Метатеги в HTML

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

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

Раньше, поисковыми системами для индексирования веб-страниц использовались метаданные, основанные на заголовке 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=http://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, можно узнать с помощью Insights.

<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. После регистрации, Вы сможете получать уведомления в случае возникновения каких-либо ошибок о неправильным использованием метатегов.