Метатеги (meta tags) — HTML-теги, предназначенные для предоставления структурированных метаданных о веб-странице. Как правило, элементы <meta> указываются в заголовке <head> HTML-документа.
В связи с тем, что метатеги несут чисто служебную функцию и увеличивают размер документа, начинающие вебмастера, зачастую, предпочитают их игнорировать. Присутствие данных тэгов не является обязательным, так как они не отображаются на странице и предназначены, прежде всего, для браузеров и роботов поисковых систем, однако их наличие в ряде случаев является достаточно полезным.
Структура мета-тэга:
<meta тип_мета-тэга="название_мета-тэга" content="значение_мета-тэга">
Метатеги делятся на два основных типа — http-equiv и name. Теги http-equiv браузеры преобразовывают, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера. Теги name отвечают за текстовую информацию о странице, её авторе, а также — рекомендации для поисковых систем.
Теги http-equiv
Метатег Content-Language
Тег позволяет указать язык используемый в документе:
- ru – Русский
- en – Английский
- en-GB – Английский (Великобритания)
- en-US – Английский (США)
- и др.
Пример:
<meta http-equiv="Content-Language" content="ru" />
В HTML5 указание языка упрощено:
<html lang="ru">
Метатег Cache-Control
Определяет действия кэша по отношению к данному документу. Возможные значения:
public— документ кэшируется во всех доступных кэшахprivate— кэшируется браузером, не кэшируется proxy-серверомno-cache— запрет на кэширование (браузер и proxy-сервер документ не кэшируют)no-store— может быть кэширован, но не сохраняется в архивеmax-age=time, must-revalidate— указывает браузеру сколько секунд хранить документ в кэшеmax-age=time, proxy-revalidate— указывает сколько секунд хранить документ в кэше proxy-серверу
Пример:
<meta http-equiv="Cache-Control" content="max-age=3600, must-revalidate" />
Метатег Content-Script-Type
Определяет язык программирования сценариев. Если тег не используется, следует указать язык программирования непосредственно в каждом теге <script>, например <script type=»text/javascript»>. Тег <script> обладает более высоким приоритетом по сравнению с content-script-type.
Возможные значения:
- text/javascript – JavaScript (значение по умолчанию);
- text/perlscript – PerlScript;
- text/tcl – TCL;
- text/vbscript – VBScript.
Пример:
<meta http-equiv="Content-Script-Type" content="text/javascript">
Метатег Content-Style-Type
Указывает язык таблицы стилей, по умолчанию используется значение — «text/css».
Пример:
<meta http-equiv="Content-Style-Type" content="text/css">
Метатег Content-Type
Служит для указания типа документа (атрибут content) и может быть расширено указанием кодировки страницы (атрибут charset).
Использование этого тега требует соблюдения двух условий:
- кодировка символов текста должна соответствовать кодировке, указанной в тэге;
- сервер не должен менять кодировку текста при обработке запроса браузера. Если сервер меняет кодировку текста, то он должен скорректировать или удалить мета-тэг Content-Type.
Невыполнение этих условий может привести к невозможности прочтения документа без проведения дополнительных настроек браузера.
Возможные типы кодировки:
- ISO-8859-1 – Latin-1 — для большинства западноевропейских языков;
- Windows-1251 – Кириллица (Windows);
- UTF8 — Юникод
- и др.
Пример:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
В HTML5 указание кодировки упрощено:
<meta charset="UTF-8">
Метатег Expires
Позволяет управлять кэшированием документа в браузере. Если указанная в теге дата прошла, то браузер должен сделать повторный сетевой запрос, а не использовать сохраненную в кэше копию. Если изначально указать прошедшую дату, то документ не будет кэшироваться. Некоторые поисковые роботы могут отказаться индексировать документ с устаревшей датой. Дата должна указываться в стандарте [RFC850].
Пример:
<meta http-equiv="Expires" content="Wed, 26 Feb 1999 08:21:57 GMT">
Метатег PICS-Label
PICS — (англ. Platform-Independent Content rating Scheme Label) — указывает содержания документа с целью ограничения доступа (sex, violence), настраиваемого в каждом браузере отдельно.
Метатег Pragma
Позволяет создателю документа контролировать его кэширование. Значение «no-cache» запрещает кэширование документа. Данный тэг, в первую очередь, предназначен для документов, сформированных в результате работы скрипта.
Пример:
<meta http-equiv="Pragma" content="no-cache">
Метатег Refresh
Позволяет определить задержку времени (в секундах), после которой браузер автоматически обновляет документ, либо производит редирект на страницу, указанную в значении url.
Пример:
<meta http-equiv="Refresh" content="5; url=http://site.com/">
Метатег Set-Cookie
Позволяет настроить cookie в браузере.
Имеет атрибуты:
- NAME – имя cookie. Данный атрибут не может содержать символы перевода строки, пробелов, табуляции и точки с запятой;
- EXPIRES – время хранения cookie. После указанной даты (формат даты: «Wdy, DD-Mon-YYYY HH:MM:SS GMT») истекает время хранения cookie. Если данный атрибут не указан, то cookie хранится в течение одного сеанса, то есть до закрытия браузера;
- DOMAIN – домен, для которого задается значение cookie;
- PATH – дает возможность указания подмножества документов, расположенных в различных директориях, на которые распространяется действие cookie. Например, при значении атрибута PATH=/dir действие cookie будет распространено на все файлы и каталоги, начинающиеся с символов «dir» (/dir/, /directory/, dir.htm, directory.html). Если этот атрибут опущен, то значение cookie распространяется только на документы директории, в которой расположен текущий документ;
- SECURE – указывает, что информация о cookie должна пересылаться через HTTPS протокол (с использованием SSL). При отсутствии данного атрибута информация о cookie будет пересылаться по протоколу HTTP.
Пример:
<meta http-equiv="Set-Cookie" content="NAME=cookexample; EXPIRES=Monday, 22-FEB-02 21:11:51 GMT; DOMAIN=www.site.com; PATH=/; SECURE">
Метатег Window-target
Определяет окно текущей страницы. Данный мета-тэг распространяется не на все браузеры.
- _blank — документы будут открываться в новом окне
- _parent — документы будут открываться в родительском окне
- _top — загрузка всего окна
- _self — открытие документа в текущем окне
Пример:
<meta http-equiv="Window-target" content="_self">
Теги NAME
Метатег Author
Позволяет указать автора документа. Может содержать дополнительный атрибут «lang», позволяющий указать язык, использующийся при написании значения свойства.
Пример:
<meta name="Author" content="Иван Иванович Иванов" />
<meta name="Author" lang="ru" content="Иван Иванович Иванов" />
Метатег Copyright
Позволяет указать держателя авторских прав на документ. Может содержать дополнительный атрибут «lang», позволяющий указать язык, использующийся при написании значения свойства.
Пример:
<meta name="Copyright" content="ООО Рога и Копыта" />
<meta name="Copyright" lang="ru" content="ООО Рога и Копыта" />
Метатег Description
Позволяет указать для документа краткое описание. Используется поисковыми системами при ранжировании документов, а также для создания сниппета в выдаче по запросу.
Пример:
<meta name="description" content="Большая статья о том что такое мета-теги и как ими пользоваться" />
Метатег Document-state
Служит для управления индексацией документа поисковыми роботами. Может иметь два атрибута:
Static– документ не изменяется, поэтому не требует индексирования в будущем;Dynamic– документ периодически меняется.
При отсутствии данного мета-тэга, значением по-умолчанию считается Dynamic.
Пример:
<meta name="Document-state" content="Dynamic">
Метатег Generator
Используется разработчиками программ для редактирования веб-страниц или CMS с целью саморекламы — в качестве значения тега разработчики таких программ, как правило, указывали название своего продукта. Для владельца сайта эти тэги не несут полезной нагрузки, т.е. являются бесполезными.
Пример:
<meta name="generator" content="Joomla! 1.x - Open Source Content Management" />
Метатег Keywords
Используется для указания ключевых слов, использующихся в документе. Если документ написан на нескольких языках, то возможно использование нескольких мета-тэгов Keywords с указанием языка с помощью атрибута lang.
Пример:
<meta name="Keywords" lang="ru" content="метатеги, мета, теги, тэги, метаданные">
<meta name="Keywords" lang="en-us" content="metatags, meta, tags">
Метатeг Resource-type
Описывает свойство или состояние документа. Если значение данного мета-тэга отличается от значения «Document», то документ индексироваться поисковыми системами не будет. Отсутствие данного мета-тэга аналогично его присутствию со значением «Document».
Возможные значения:
- Document
- Build
- Classification
- Creation
- Formatter
- Host
- Operator
- Random text
- Rating
- Site-languages
- Subject
- Template
- Version
Пример:
<meta name="Resource-type" content="Document">
Метатeг Revisit
Позволяет указать роботам поисковых систем, с какой периодичностью (измеряется в стуках) желательно индексировать документ.
Пример:
<meta name="Revisit" content="7">
Метатег Robots
Позволяет разрешить или запретить индексирование, а также переход по ссылкам в документе.
Значения тэга могут быть следующими:
all– разрешено индексирование и переход по ссылкам данного документа;index– страница разрешена к индексированию;noindex– страница запрещена к индексированию;follow– разрешается переход по гиперссылкам, расположенным на данной странице;nofollow– запрещается переход по гиперссылкам, расположенным на данной странице;index, follow– то же, что и значение all;none– запрещено индексирование и переход по ссылкам данного документа;noindex, nofollow– то же, что и значение none.
Отсутствие мета-тэга Robots аналогично его присутствию со значением all.
Тэг имеет приоритет перед директивами управления, заданными в файле robots.txt.
Пример:
<meta name="Robots" content="all">
Метатег Viewport
Сообщает браузеру о том, как именно обрабатывать размеры страницы, и изменять её масштаб. Meta-тег viewport может иметь следующие атрибуты, указанные через запятую:
width – ширина области просмотра.
Значение атрибута является целое неотрицательно число от 200 до 10000 пикселей или константа device-width, которая задаёт ширину страницы в соответствии с размером экрана.
Если значение не задано, по умолчанию устанавливается – в мобильном Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px.
height – высота области просмотра.
Значением атрибута является целое неотрицательно число от 233 до 10000 пикселей или константа device-height, которая задаёт высота страницы в соответствии с размером экрана.
initial-scale – начальный масштаб страницы.
Значением атрибута является число с точкой от 0.1 до 1.0. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».
user-scalable – доступность масштабирования страницы пользователем.
Значение атрибута является логическое «yes» (1) – можно масштабировать или «no» (0) – нельзя масштабировать. По-умолчанию установлено «yes».
minimum-scale – минимальный масштаб области просмотра.
Значением атрибута является число с точкой от 0.1 до 1.0. В мобильном браузере Safari по умолчанию 0.25. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».
maximum-scale – максимальный масштаб области просмотра.
Значением атрибута является число с точкой от 0.1 до 1.0 . В мобильном браузере Safari по умолчанию 1.6. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».
Пример:
<meta name="Viewport" content="width=device-width, initial-scale=1">
Мeтaтeг Url
Предназначен для указания роботам поисковых систем основного зеркала сайта. Встретив этот тэг, робот поисковой машины должен прекратить индексацию текущего документа и перейти по указанной ссылке.
Пример:
<meta name="Url" content="http://site.ru/">
Многие из этих тегов необходимыми не являются, как с точки зрения браузера, так и с точки зрения поисковых систем. Однако правильное употребление метатегов может улучшить работу браузера, а также положительно повлиять на ранжирование вашего сайта в поисковых системах.