HTML тег meta — тег, предназначенный поисковым роботам. Именно они(теги) являются основными источниками информации о содержимом страницы при индексации ботами. В множественном числе(о теге meta)потому, что их много видов и все они нужны. И кста, когда вы нажимание кнопку «Поделится» — внешний вид репоста формируется специальными метатегами. Нет, вроде как, могут и обычные использоваться, но мы о всех технических моментах ниже и поговорим.
Содержание
Синтаксис тега «meta»
HTML тег meta — одиночный тег который размещается исключительно блоке head. Имеет четыре атрибута: name, content, charset и http-equiv. Первые два — те, которые и образуют мета-данные страницы
<head>
<title>...</title>
<meta charset="utf-8"/>
<meta name="title" content="..."/>
...
</head>Приблизительно так выглядит html-разметка страницы. Кодировку(charset) достаточно указать единожды.
А теперь перейдем к рассмотрению значений атрибута name, ведь он, имхо, самый важный(на пару с content) парень. Он может иметь 7 значений:
- title — сео название документа, до 70 символов;
- application-name — в случаи, если это веб-приложение — то в content его название;
- author — автор данного документа:
- description — описание документа. до 160 символов;
- generator — если документ сгенерирован программой — название этой программы;
- keywords — ключевые слова, до 130 символов, до 10 фраз через кому;
- viewport — поиска и индексации страницы не касается, от него зависит отображение страницы при масштабировании. Крайне рекомендую ко всем страницам, в head добавить
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Как пишет support google «каждый атрибут контента может содержать до 1024 символов. Пользовательский поиск может обрабатывать до 50 метатегов для каждой страницы…»
Протокол Open Graph
Протокол Open Graph позволяет любой веб-странице стать полноценным объектом в социальных сетях. Например, протокол используется на Facebook, чтобы разрешить любой веб-странице иметь такую же функциональность, как и любой другой объект на Facebook.
Иначе говоря — это метаданные, по которым современные социальные сети строят отображение репоста.
В этом протоколе есть свой атрибут, который полностью замещает name, — это property. У этого атрибута также есть свои значения:
Основные:
- og:title — аналог title в name;
- og:type — тип объекта от значения этого атрибута зависит наличие других свойств;
- og:image — значение этого метатега должно содержать ссылку на изображение(репоста);
- og:url — канонический урл, говоря простыми словами — постоянная ссылка на пост.
Дополнительные(необязательные, но рекомендуемые)
- og:audio — ссылка на аудиофайл страницы, если есть;
- og: description — аналог description в name;
- og:determiner — слово, которое появляется перед названием этого объекта в предложении. Строковое значение, которое является членом перечисления(an, a, the…);
- og:locale — тег физического местоположения в формате language_TERRITORY(en_US) ;
- og:locale:alternate — альтернативные локали, каждая с которых записывается в свой тег;
- og:site_name — если это страница сайта, то здесь — название сайта;
- og:video — ссылка на видеофайл, если он есть.
Разметка Twitter Cards
Это отдельная разметка метатегов созданная Twitterом для построения твитов. Это те же мета-теги, что и в обычном HTML.
Начинается она с объявления ее поддержки
<meta name="twitter: card" content = "summary"> </ meta>
далее, должна идти одна из двоих строк, в зависимости от-того, у кого есть твит-аккаунт
<--! аккаунт есть у проекта --> <meta name="twitter: site" content="@название аккаунта"/> <--! аккаунт есть у автора страницы --> <meta name="twitter: creator" content="@название аккаунта"/>
После этого, твиттер воспринимает нижеследующую обычную Open Graph разметку.
Заключение
Здесь рассмотрено техническое использование тега <meta>. Он который является основным, но не единственным(теги a, h%d, p…), для СЕО страницы. Однако же, если содержимого метатегов не будет в заголовках(h1, h2…) или параграфах(p) — поисковые роботы обидятся на сайт и в результатах поиска вы его не увидите. И, кстати, если вам нужно больше инфы по Open Graph — загляните сюда.