Метатеги (англ. 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/">

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

 


Реклама


Нет комментариев


Извините, обсуждение на данный момент закрыто.