Метатеги в HTML

Лучший способ описать веб-страницу использовать метатеги HTML. Как правило метатег содержит сведения о странице HTML. Метаданные описанные в метатегах, нужны поисковым системам для отображения их в результатах поиска.

Оглавление:
  1. Метатеги что это?
  2. Старые метатеги
  3. Применить метатеги
  4. descriptions
  5. author
  6. charset
  7. HTTP
  8. robots
  9. viewport
  10. Метатеги для социальных сетей
  11. Инструменты метаданных
  12. Заключение

Метатеги что это?

Раньше, поисковыми системами для индексирования веб-страниц использовались метаданные, основанные на заголовке title, описание description и ключевые слова keywords. Сейчас существует много веб-страниц без метаданных, а так же есть веб-сайты которые злоупотребляют метатегами в надежде получить более релевантные результаты поиска. Компания Google в 2009 году объявила; что сайты которые злоупотребляют метатегами не будут ранжироваться в поисковых алгоритмах Google.

На самом деле, метаданные не имеют никакого ранга в поиске, они предназначены показать пользователю описание страницы в результатах поиска (сниппет). Веб-страницы, которые имеют хорошие мета-описания для людей, а не для поисковых роботов, получают хороший ранг.

Еще одна важная вещь которую следует отметить, Google и Bing это не единственные поисковые системы, есть и другие, например Yandex, в котором запрос “Бухгалтерский +учет” — миллион в день.

К началу

Старые метатеги

Полный вариант кодировки символов, который был широко распространен в XHTML.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

В устаревших метатегах также указывались авторские права.

<meta name="copyright" content="htmlhook.ru" />

Можно указать ссылку на страницу copyright (или якорь на той же странице).

<link rel="copyright" href="copyright.html">

Многие веб-сайты по-прежнему пишут ключевые слова keywords, Google их не рассматривает в поисковом алгоритме ранжирования или при отображении результатов поиска. Алгоритм поиска Google никогда не знал о ключевых словах в метатеге keywords.

<meta name="keywords" content="web,design,html,css,html5">

Google сказал:

маловероятно, что в будущем это изменится, так что Вы не должны беспокоиться о ключевых словах в метатеге.

Поскольку Китай основной поставщик компьютерной техники, есть факты, что китайский Baidu-language search engine рассматривает метатег ключевых слов — это один из основных факторов его алгоритма для поисковика. Что касается Яндекс, был создан веб-сервис ключевых слов Яндекс.

Любой из этих устаревших методов не навредит рейтингу вашего веб-сайта, но добавляет ненужный код на веб-страницу …, лучше всего избегать такой подход и применять альтернативные методы.

К началу

Применить метатеги

Чтобы определить значение meta к атрибуту name требуется добавить название метатега.

descriptions

Метатег descriptions — описание статьи:

<meta name="description" content="Общее руководство по использованию метатегов для веб-страницы html">

Если описание пустое или его не существует, ни чего страшного, поисковые системы будут автоматически генерировать описание из содержимого страницы. Проблема в том, что генерируемое описание поисковой системой, может оказаться не понятным для пользователя, и он кликнет на другую ссылку с более понятным мета-описанием, написанным вручную.

К началу

author

Метатег author — автор статьи:

<meta name="author" content="Pixel Bot">

Метатег author заполняется на ваше усмотрение.

charset

Если остальные метатеги заполняются опционально, то метатег charset нужен обязательно. Он указывает браузеру кодировку веб-страницы, без этого метатега, текст написанный кириллицей на странице будет отображаться (крякобразами).

<meta charset="utf-8">

HTTP

Как уже упоминалось, метатеги могут быть использованы для выполнения задачи HTTP заголовков, как перенаправление и обновление страницы.

<meta http-equiv="refresh" content="5;url=https://htmlhook.ru">

Значение атрибута content, относится к временному интервалу в секундах, перед обновлением или перенаправлением страницы. URL адрес может быть другим, если Вы хотите перенаправить пользователя на другую страницу. Можно URL оставить пустым, тогда через 5 секунд обновится текущая страница.

К началу

robots

Метатег robots разрешает или запрещает индексировать веб-страницу.

Список значений для поля content:

  • noindex — запрещает индексирование документа;
  • index — разрешает индексирование документа;
  • nofollow — запрещает проход по ссылкам, имеющимся в документе;
  • follow — разрешает проход по ссылкам.
  • all — равносильно index, follow
  • note — равносильно noindex, nofollow

Значение по умолчанию:

<meta name="robots" content="index, follow">

значение по умолчанию добавлять в документ не требуется, этот метатег писать нужно только тогда, когда нужно запретить индексирование документа.

<meta name="robots" content="noindex, nofollow">

или

<meta name="robots" content="note">

В следующем примере робот индексирует страницу, но не переходит из неё по всем ссылкам на другие страницы:

<meta name="robots" content="index, nofollow">

Имя тега, названия и значения полей нечувствительны к регистру.

В поле content нельзя дублировать инструкции, наличие противоречивых инструкций и т.п. не допускается. Например, значение поля content не может иметь вид none, nofollow.

К началу

viewport

Мобильных браузеров раньше не было, они появились позже чем браузеры для ПК, к тому времени веб-сайтов в интернете уже было много. Все эти веб-сайты не были адаптивными для разных размеров экрана мобильных устройств, чтобы полностью просмотреть веб-страницу нужно было пользоваться горизонтальной прокруткой. Чтобы адаптировать веб-страницы для разных размеров экрана, в компании apple для браузера Safari, придумали метатег viewport,теперь этот тег понимают все современные браузеры.

<meta name="viewport" content="width=device-width">
К началу

Метатеги для социальных сетей

В связи с постоянно растущей значимости социальных сетей, метатеги эволюционировали. Facebook Open Graph позволяет управлять отображением содержания в соц.сети Facebook. Как содержание вашего сайта будет выглядеть на Facebook, можно узнать с помощью Отладчика перепостов.

<meta property="og:title" content="Лучший сайт">
<meta property="og:image" content="Ссылка на изображение">
<meta property="og:description" content="Здесь описание">

Для подробного изучения рекомендую Вам прочесть документацию Facebook и Twitter Cards (с использованием name="twitter:title" или name="twitter:url"), Google использует Schema.org (с использованием itemscope и itemprop).

Open Graph стал очень популярным, большинство социальных сетей используют его по умолчанию. Если такие метатеги отсутствуют, Open Graph для применяет значения по умолчанию.

Если у Вас WordPress, можно самому сделать Open Graph Facebook для WordPress.

К началу

Инструменты метаданных

Инструменты метаданных не требуют глубоких знаний HTML или иных веб-технологий. Так же есть набор приложении для Google Analytics которые помогут вам оптимизировать веб-сайт.

Если Вы работаете в WordPress, там есть много вариантов для создания метаданных при написании или редактировании записи, наиболее популярным из которых является WordPress SEO. Для Joomla и Drupal также есть свой набор плагинов и модулей заполнения метатегов. Если Вы ими не пользуетесь, есть генератор метатегов.

К началу

Заключение

Метатеги не решают все проблемы с SEO, но они важная часть оптимизации веб-сайта для поисковых систем. Если вы являетесь владельцем веб-сайта, Вы можете отслеживать производительность его на Google Webmaster Tools. После регистрации, Вы сможете получать уведомления в случае возникновения каких-либо ошибок о неправильным использованием метатегов.