Метатеги

Метатеги

19.05.2021


Метатеги (англ. meta tags) — (X)HTML-теги, предназначенные для предоставления структурированных метаданных (дополнительных, сопроводительных) о веб-странице. Как правило, указываются в заголовке (теге <head>) (X)HTML-документа. Элемент meta принимает как минимум четыре атрибута: content, http-equiv, name и scheme. Из них обязателен только атрибут content и исключение тег revisit. Практически не стандартизированы, разрабатываются различными сервисами и поставщиками браузеров по своему усмотрению и регламентируются лишь «изобретателями». Лишь небольшая часть часто используемых или «изобретенных» достаточно давно, распознаются и обрабатываются относительно одинаково.

Пример использования элемента meta

Один из вариантов применения тега meta — указание HTTP-заголовков, которые должны быть отправлены клиенту до отправки самой веб-страницы. Например:

<meta http-equiv="Content-Type" content="text/html" />

Такая запись указывает, что страница должна быть отправлена вместе с HTTP-заголовком Content-Type: text/html. Такой заголовок указывает браузеру или другой программе тип отправляемого документа. Тем не менее, несмотря на то, что первоначально предполагалось, что веб-серверы будут считывать метатеги внутри отправляемых клиенту веб-страниц, и формировать HTTP-заголовки в зависимости от их содержимого, на практике это не реализовано в наиболее используемых веб-серверах, соответственно, веб-серверы не меняют отправляемые клиенту HTTP-заголовки, а клиент (веб-браузер) обрабатывает эти метатеги самостоятельно (в частности, данные из метатегов могут заменять данные, получаемые из HTTP-заголовков).

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

В общей форме метаданные записываются в следующем виде: в теге meta указывается атрибут name (имя) и связанный с ним атрибут content (содержимое), в котором описывается какой-либо аспект веб-страницы, например, ключевые слова:

<meta name="keywords" content="википедия, энциклопедия" />

Функции метатегов

Основной особенностью тегов этого типа является то, что они не имеют отображаемого контента, располагаются в разделе HEAD и могут содержать любую дополнительную информацию для автоматической обработки веб клиентами — браузерами, роботами, специализированным ПО.

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

  • Сведения о документе: авторство, источники и т. п.;
  • Информация для поисковых роботов: ключевые слова, краткое описание, и т. д.;
  • Инструкции для браузеров: кодовые страницы, куки, интервалы автоматического обновления;
  • Инструкции для специализированного ПО и различных сервисов, например — указание для программ парсеров адреса с копией данных страницы, подготовленных для машинной обработки.

Группы метатегов

Наиболее широко используемые группы: NAME- для предоставления информации общего назначения и HTTP-EQUIV — для указания в теле страницы эквивалентов заголовков протокола HTTP.

В HTML5 стандартизирован атрибут charset, для указания кодировки документа (см. пример ниже). Поддерживается всеми современными браузерами и корректно распознается всеми поисковыми системами.

NAME

Author и Copyright

Эти теги, как правило, не используются одновременно. Функция тегов — идентификация автора или принадлежности документа. Тег Author содержит имя автора Интернет-страницы, в том случае, если сайт принадлежит какой-либо организации, целесообразнее использовать тег Copyright. В настоящий момент имеют крайне низкую актуальность.

<meta name="author" content="Велимира Лисичкина" />

Кроме этого, теги Author и Copyright могут содержать дополнительный атрибут «lang», позволяющий определить язык, использующийся при указании значения свойства

<meta name="copyright" lang="ru" content="ПБОЮЛ Велимира Лисичкина" />

Description

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

Несмотря на это, предпочтительно заполнять этот тег, но учитывать, что эффективная длина текста, который можно поместить в этот тег различными поисковиками устанавливается по своему усмотрению и на текущий момент рекомендуемый размер составляет от 70 до 140 символов, а максимально обрабатываемый не превышает 400.

Достоверно известно:

  • Содержимое тега учитывается и иногда используется для показа в выдаче результатов поиска. Например, как об этом сообщает Яндекс:

    <meta name="Description" content="..."/> — содержание данного тега может использоваться в сниппетах (описаниях сайтов на странице результатов поиска);

    В некоторых «волшебных» случаях, даже при наличии этого тега в выдаче поисков в качестве описания страницы используется текст из неё. И это не всегда лид-абзац (первый на странице).
  • Эффективная учитываемая длина содержимого у разных поисковиков — разная, на то они и разные поисковики.
  • Содержимое тега влияет на оценку релевантности, но как именно, сегодня[когда?], пожалуй, не скажут даже сами разработчики, в силу того, что для расчета релевантности во всех поисковиках используется множество разных и сложных алгоритмов. Поэтому разработчики во множестве статей и блогов, чуть не хором, сообщают, что нет, не влияет никак.
  • Указывать этот тег все-равно надо, об этом имеются указания в системах помощи веб-мастерам всех крупных поисковых систем.

Более подробно в статье «»

<meta name="description" content="Метатеги в Википедии" />

Document-state

Метатег Document-state также может учитываться при индексации страницы поисковиками. Учитываются два значения атрибута content — Static и Dynamic. Значение Static указывает, что документ изменяется крайне редко, Dynamic (по умолчанию) — страница создается при запросе и может меняться в зависимости от дополнительных условий запроса. Лет 20 назад[когда?] имел важное значение, в настоящий момент сложно представить чем информация из этого тега может помочь поисковику, проводящему анализ страницы по множеству параметров и с использованием весьма сложных и разнообразных алгоритмов.

<meta name="document-state" content="Dynamic" />

Generator

Данный метатег когда-то активно использовался разработчиками программ для редактирования веб-страниц — в качестве значения тега разработчики таких программ, как правило, указывали название своего продукта, либо иную идентифицирующую информацию. Чуть позднее эстафету подхватили разработчики CMS. С помощью этого тега некоторые разработчики пытались если не контролировать, то хотя-бы примерно подсчитывать количество установок своих разработок. Однако вскоре, осознав, что этим облегчают жизнь всяким вредоносным «не товарищам», от этой порочной практики наиболее сознательные разработчики отказались. Дело в том, что имея информацию об уязвимостях и внутренней структуре системы, достаточно легко обнаружить сайты использующие её и воспользоваться уязвимостями в своих далеко не благовидных целях. По сути, для CMS — данный тег, как вывеска: заходи кто хочет и живи как дома.

Может иметь смысл для некоторых программ редактирования HTML, которые могут учитывать особенности других редакторов и использовать это для обратного инжинирига сохраненной страницы. Например редактор Macromedia DreamWeaver (ныне Adobe DreamWeaver) при открытии файлов HTML, созданных в Microsoft Word и Microsoft Excel автоматически удалял и модифицировал избыточную и специфичную разметку созданную этими программами.

Также некоторые инструменты вставляли в разметку необходимые для их дальнейшей работы данные и по этому тегу контролировали вероятность найти эти данные в файле. Сегодня для этих целей стараются использовать другие маркеры.

В настоящее время верстальщиками, а также программами для вёрстки, используется крайне редко.

<meta name="generator" content="Macromedia Dreamweawer 4.0" />

Keywords

Используется для предоставления данных поисковикам для повышения значимости некоторых слов при поиске.

Почти все поисковики игнорируют слова из этого списка если они не встречаются в видимой части страницы. Рекомендованное количество слов в данном теге — 5-10. Кроме того, опытным путем выявлено, что разбивка этого тега на несколько строк влияет на оценку поисковыми машинами релевантности страницы запросу.

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

<meta name="keywords" content="Википедия, Метатег, статья" />

Resource-type

Описывает свойство или состояние страницы. Если значение тега отличается от «Document», то поисковые системы его не индексируют или могут применять особые алгоритмы индексации. Метатег предназначен для масштабирования document (используется по умолчанию), rating, version, operator, formatter, creation и другие. Имеет узконаправленное применение, во избежание недоразумений рекомендуется не применять без должного понимания.

<meta name="resource-type" content="document" />

Revisit

Тег позволяет сообщить поисковым роботам о желательном сроке реиндексации документа в поисковой системе. Абсолютно все поисковики фиксируют его значение, но абсолютно все не особо стремятся исполнить пожелания неизвестного автора страницы. На сегодня совершенно бесполезен — гораздо большее влияние на поведение роботов имеет реальная частота обновления данных на сайте и его популярность. То есть динамические страницы популярного сайта роботы «простукивают» гораздо чаще, чем редко изменяемые блоги одиночек, какие бы цифры не были указаны с помощью этого мета..

<meta name="revisit" content="14" />

Robots

Тег формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем. Значения тега могут быть следующими: Index (страница должна быть проиндексирована), Noindex (документ не индексируется), Follow (гиперссылки на странице отслеживаются), Nofollow (гиперссылки не прослеживаются), All (включает значения index и follow, включен по умолчанию), None (включает значения noindex и nofollow). Впервые предложен поисковиком Google, но очень быстро стал учитываться другими крупными поисковиками. Правильное применение очень положительно влияет на индексацию и ранжирование всеми крупными поисковиками, как и ошибки применения могут сильно повредить.

Пример 1. Разрешить индексирование страницы и использование размещённых на ней ссылок для последующей индексации.

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

или равноценный аналог

<meta name="robots" content="all" />

Пример 2. Запретить индексирование страницы, разрешить использование размещённых на ней ссылок для последующей индексации.

<meta name="robots" content="noindex,follow" />

Пример 3. Разрешить индексирование страницы, запретить использование размещённых на ней ссылок для последующей индексации.

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

Пример 4. Запретить индексирование страницы и использование размещённых на ней ссылок для последующей индексации.

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

или равноценный аналог

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

Subject

Определяет тематику документа. Практически бесполезен из-за отсутствия четкой и согласованной классификации тем в различных поисковых системах. Впервые был внедрен компанией Yahoo в середине 90х, но уже к концу 90х стало ясна его несостоятельность, так как не было установлено ни регламентов, ни мало-мальского контроля за использованием.

url

Тег прекращает индексацию страницы поисковой системой, и перенаправляет робота поисковой машины по указанной ссылке. Тег применяется для отмены индексации «зеркала» и генерируемых страниц.

<meta name="url" content="http://ru.wikipedia.org/" />

ViewPort

Данные для настройки области просмотра. Активно поддерживается Google и Яндекс для оценки готовности дизайна к отображению на мобильных устройствах, а также всеми современными браузерами в том числе и для мобильных платформ.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0">

HTTP-EQUIV

Когда нет возможности модифицировать HTTP заголовки на стороне сервера, имеется возможность указать их прямо в теле страницы с помощью тегов META HTTP-Equiv. Содержимое тега составляется по правилам для заголовков HTTP с той лишь разницей, что в значение атрибута http-equiv вносится название заголовка (левая часть до двоеточия), а его значение в значение атрибута content. Подробнее о заголовках HTTP можно прочитать на сайте Mozilla Developer Network в разделе HTTP Headers

Cache-Control

Управление кэшированием. Должно давать четкие указанию браузеру и промежуточным серверам как вести кэширование этой страницы.

Возможные значения:

Полный список возможных значений на сайте MDN.

<!-- для динамических страниц типа результатов поиска --> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <!-- для публичных страниц типа статей блога --> <meta http-equiv="Cache-Control" content="public, max-age=31536000">

Content-Language

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

<meta http-equiv="content-language" content="ru" />

В HTML5 указание языка упрощено:

<html lang="ru">

Content-Style-Type

Переназначения языка таблицы стилей используемого по умолчанию внутри тегов <STYLE> и <LINK rel="stylesheet"> c text/css на другой. Имеет смысл при использовании по умолчанию типа отличного от text/css, например, при использовании подгружаемых препроцессоров LESS или Stylus. Используется как браузерами, так подгружаемыми компонентами.

<meta http-equiv="Content-Style-Type" content="text/stylus-lang"> <!-- или --> <meta http-equiv="Content-Style-Type" content="text/less">

Content-Type

Указывает на MIME-тип документа, кодовую таблицу и, возможно, другие технические параметры текста.

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

В HTML5 указание кодировки упрощено:

<meta charset="UTF-8">

Expires

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

Некоторые поисковые роботы могут отказаться индексировать документ с устаревшей датой.

Дата должна указываться в стандарте [RFC850].

Пример:

<meta http-equiv="Expires" content="Wed, 26 Feb 1999 08:21:57 GMT">

PICS-Label

PICS — (от англ. Platform-Independent Content rating Scheme Label) — указывает стандартизированную метку, характеризующую содержимое сайта. Сходно по назначению прокатным категориям для фильмов в кинотеатре или телевизионных передач. Используется поисковиками для ранжирования и браузерами в системах ограничения доступа. Например, если в браузере на компьютере включен родительский контроль, то браузер отклонит показ страниц с недопустимым содержимым.

Придумана давно, но активно развивается в наши дни. В некоторых, «не наших», странах обязательное использование этого тега предписывается законами для всех поголовно, в «несколько других» — этот тег обязателен для страниц с «особым» содержимым: секс, насилие и т. п., доступ к которым имеет возрастные или другие ограничения.

<!-- Безопасно для детей --> <meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.weburbia.com/safe/ratings.htm" LR (s 0))'>

Маркировка должна осуществляться специальными службами — labeling services.

Здесь возможны варианты:

  • Специалисты labeling service осуществляют «оценку» содержания сайта и заносят её в свою базу данных, интегрированную с web-сервером и назначают разработчику содержимое тега для указания на страницах сайта;
  • Разработчик сайта заполняет для labeling services специальную форму и тем самым генерирует соответствующий тэг <META HTTP-EQUIV="PICS-Label"...>. Такая возможность бесплатно предоставляется, например, на сервере Vancouver-Webpages.
  • То есть просто вписать тег в свою страницу по своему усмотрению — чревато, как минимум, непониманием, а в большинстве случаев — непредсказуемым набором неприятностей, ненужных волнений и трат.

    Pragma

    Контроль кэширования на страницах создаваемых динамически, например, результаты поиска. Жутко устаревший, используется для совместимости со старым оборудованием и ПО, работающих с использованием протокола HTTP/1.0. До сих пор включают на тот самый «всякий» случай, что где-то, на промежуточных маршрутизаторах или прокси серверах, есть древнее ПО или оборудование. В современных условиях при использовании шифрованных соединений SSL/TLS теряет всякий смысл. Также практически бесполезен в теле страницы для промежуточных устройств.

    Почти то же самое, что и HTTP заголовок Cache-Control: no-cache или <meta http-equiv="Cache-Control" content="no-cache"/>.

    <meta http-equiv="Pragma" content="no-cache">

    Refresh

    Указание браузеру автоматически перейти на другой адрес через указанное количество секунд. Если параметр url не указан, обновить страницу без использования кэша. Из-за массовых злоупотреблений с целью перевода пользователей на незатребованный ресурс, откровенного мошеннечества и использования этой особенности при распространении вредоносного ПО, практически все современные браузеры по умолчанию игнорируют инструкцию указанную в теле страницы. В современных браузерах, в том числе мобильных, имеются более технологичные средства для обновления данных на странице: AJAX, Push уведомления, WebSockets, Web Workers, ….

    На сегодня — малоприменим, практически бессмысленный и затратный, как для клиента, так для сервера.

    <meta http-equiv="refresh" content="5; url=http://www.example.com/" /> <!-- После url= кавычек нет! -->

    Set-Cookie

    Установка cookie в браузере. Позволяет инициализировать куки на сайтах из статичных страниц и без использования Javascript. В современных браузерах может игнорироваться в зависимости от региональных настроек в связи с законодательной политикой в некоторых странах. То есть в некоторых «не наших» странах заголовок полученный от сервера в HTTP ответе обработан будет, а указанный в теге — нет.

    Формат:

    <meta http-equiv="Set-Cookie" content="NAME=value; EXPIRES=date; DOMAIN=domain_name; PATH=path; SECURE" />

    Атрибуты EXPIRES, DOMAIN, PATH и SECURE при необходимости можно опустить:

    <meta http-equiv="Set-Cookie" content="NAME=value; />

    Такой куки будет доступен для текущего домена и будет удален при закрытии браузера, или сессии, если закрывается режим «инкогнито»

    Параметры

    Перед запросом к серверу, браузер проверяет cookie. И если атрибуты NAME, DOMAIN и PATH совпадают, браузер посылает cookie серверу. Если cookie принимает новое значение, старое значение удаляется. Браузер имеет ряд ограничений по работе с cookie:

    • Единовременно может храниться не более 300 значений cookie.
    • не может превышать 4 Кбайт.
    • От одного сервера (домена) не может быть более 20 cookie.

    Эти ограничения могут быть несколько иными, в зависимости от настройки и типа браузера. Если происходит превышение лимита (общего или по домену) удаляется первая по времени запись. Удаление происходит, не зависимо от значения атрибута EXPIRES. При превышении 4 Кбайт, cookie усекается.

    <meta http-equiv="Set-Cookie" content="NAME=cookexample; EXPIRES=Fri Jun 30 2017 15:32:49 GMT+0800; DOMAIN=WWW.MY.RU; PATH=/; SECURE" /> <meta http-equiv="Set-Cookie" content="NAME=cookexample;" />

    Window-target

    Назначает окно текущей страницы. Действие аналогично атрибуту target HTML тега A, только не для вновь открываемой, а именно для данной страницы.

    Принудительно открыть эту страницу во фрейме верхнего уровня текущей вкладки:

    <meta http-equiv="Window-target" content="_top">

    Открыть страницу в новой вкладке, либо во вкладке с именем «my_site_documentation». Все страницы с таким тегом и точно таким именем (в некоторых браузер важен регистр символов в имени) будут открываться в одной и той же вкладке.

    <meta http-equiv="Window-target" content="my_site_documentation">

    Не все браузеры распознают и одинаково обрабатывают этот мета.

    Imagetoolbar

    Управлял(ет?) Image Toolbar в Internet Explorer 6.0.

    • image toolbar был разработан только для IE версии 6. В более поздних версиях он отсутствует
    • существует плагин (недоступная ссылка) для Mozilla Firefox, который воссоздает такой же image bar. Плагин реагирует на метатег imagetoolbar и атрибут galleryimg аналогично IE6
    <meta http-equiv="imagetoolbar" content="no" />

    ClearType

    Для Mobile Internet Explorer — позволяет принудительно активировать технологию ClearType сглаживания шрифтов на LCD экранах.

    Технология ClearType — проприетарная, то есть исключительное право на её применение принадлежит Microsoft, используется в системах семейства Windows. Обращали внимание, что в IE те же шрифты выглядят иначе, чем в других браузерах? А в Photoshop? Это в основном из-за разных технологий сглаживания шрифтов.

    Возможно, понимается и другими браузерами от Microsoft, однако на «старших» системах эта технология включена по умолчанию и при некоторых настройках отключается при работе от батерии. А так как «серфить» на ноутбуке с батареи и в MS Explorer, это ещё нужно догадаться либо попасть в экстремальную ситуацию, когда не до таких мелочей, то мало кто обращал внимание — работает ли это принудительное включение на десктопных IE. А если и обращали, то «почему-то» не сочли нужным об этом где-нибудь оставить информацию.

    <meta http-equiv="cleartype" content="on" />

    X-UA-Compatible

    Исключительно для браузеров от Microsoft: Internet Explorer версий с 8 по 11 и Edge. Впервые стал распознаваться браузером IE8, когда в комплект поставки были включены все версии движка, начиная с 5. В различных релизах IE поставлялись разные наборы доступных движков. Этот метатег диктует браузерам этого славного семейства какую версию движка использовать для отображения страницы. Браузеры Edge сегодня не имеют возможности переключаться в режимы Internet Explorer, лишь эмулируют их поведение, равно как и IE воспринимает указание на Edge, как приказ использовать новейший из имеющихся в наличии движок.

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    Значение метатегов

    Метаданные о веб-странице изначально предназначались в том числе для того, чтобы помочь поисковым машинам отнести веб-страницу к той или иной категории. В 90-е годы метатеги активно использовались в целях раскрутки своего сайта, в том числе предоставляя ложные или избыточные данные. За последние десятилетия разработчиками поисковых систем было предпринято множество мер по пресечению таких манипуляций: например, из факторов безусловного ранжирования был исключён тег keywords, принципы правильного заполнения основных тегов TITLE, <meta http-equiv="X-UA-Compatible" content="werbefläche vermieten"> и description также поменялись.

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