Метаданные

Метатеги в документах HTML предоставляют браузерам полезную информацию о документе, включая описание, ключевые слова, автора, дату изменения и около 90 других полей. В этом разделе рассматриваются использование и назначение этих тегов.

Директива application-name указывает имя веб-приложения, представленного в документе.

<meta name="application-name" content="OpenStreetMap">

Если страницу создано не веб-приложение, то метатег application-name можно не использовать.

Эта директива содержим имя автора страницы

<meta name="author" content="Иванов Иван Иванович">

Можно указать только одно имя.

Этот метатег содержит описание страницы

<meta name="description" content="Описание страницы">

Метатег description может использоваться различными поисковыми системами при индексировании вашей веб-страницы для улучшения поиска. Обычно описание, содержащееся в метатеге, представляет собой краткое резюме, которое отображается в главном заголовке страницы/сайта в результатах выдачи поисковой системы. Обычно Google использует только первые 20-25 слов вашего описания.

<meta name="generator" content="HTML Generator 1.42">

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

Эта директива устанавливает ключевые слова для поисковых систем (разделенные запятой):

<meta name="keywords" content="Keyword1, Keyword2">

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

Атрибут charset указывает кодировку символов для HTML-документа и должен быть допустимой кодировкой символов (примеры windows-1251, ISO-8859-2, Shift_JIS и UTF-8). Кодировка Юникод (UTF-8) является наиболее широко используемой и должна использоваться для любого современного проекта.

<meta charset="UTF-8">
<meta charset="ISO-8859-1">

Все браузеры всегда распознавали форму <meta charset>, но если вам почему-то нужна ваша страница в стандарте HTML 4.01, вы можете использовать следующую форму:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

Атрибут robots поддерживаемый несколькими основными поисковыми системами, контролирует, разрешено ли поисковым роботам индексировать страницу, а также следует ли им следовать по ссылкам со страницы или нет.

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

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

| Значение | Описание | | -------------- | ------------- |програмного | all | По умолчанию. Эквивалентен значению index. Позволяет роботу индексировать страницу. | | noindex | Запрещает роботу индексировать страницу. | | nofollow | Запрещает роботу переходить по ссылкам со страницы | | follow | Позволяет роботу переходить по ссылкам со страницы | | none | Эквивалетно значению noindex, nofollow | | noarchive | Запрещает поисковой системе кэшировать содержимое страницы. | | nocache | Эквивалетно значению noarchive для Bing | | nosnippet | Запрещает показывать фрагменты этой страницы в результатах поиска. | | noodp | Запрещает использование Open Directory Project описания, если таковые имеются, как описание страницы на странице результатов поиска | | notranslate | Запрещает переводы этой страницы в результатах поиска. | | noimageindex | Запрещает индексировать изображения на странице | | unavailable_after [RFC-850 date/time] | Запрещает показывать эту страницу в результатах поиска после указанной даты/времени. Дата/время должны быть указаны в формате RFC 850. |

Явно прописывать значения index и follow не нужно, так как почти все поисковые системы предполагают, что им разрешено делать все, что не запрещено. Так же как работает файл robots.txt, поисковые системы обычно ищут только то, что им запрещено. Поэтому следует указывать, что запрещено системе и не допускать указание противоположностей (таких как index и noindex), которые не все поисковые системы будут обрабатывать одинаково.

Open Graph - это стандарт, разработанный Facebook, для метаданных, который расширяет обычную информацию. Это позволяет социальным сетям, таким как Facebook, показывать более глубокую и богатую информацию о веб-сайте в структурированном формате. Эта информация автоматически отображается, когда пользователи обмениваются ссылками на страницы, содержащие метаданные OG, в социальных сетях.

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">
<!-- Facebook: https://developers.facebook.com/docs/sharing/webmasters#markup -->
<!-- Open Graph: http://ogp.me/ -->

Описание директив смотрите:

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">
<!-- Канонический URL вашей статьи -->
<link rel="canonical" href="http://example.com/article.html">
<!-- Стиль, используемый в этой статье -->
<meta property="fb:article_style" content="myarticlestyle">

Описание смотрите:

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

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

Описание смотрите:

<link href="https://plus.google.com/+YourPage" rel="publisher">
<meta itemprop="name" content="Content Title">
<meta itemprop="description" content="Content description less than 200 characters">
<meta itemprop="image" content="https://example.com/image.jpg">

Обычно сайты, оптимизированные для мобильных устройств, используют тег <meta name = "viewport"> следующим образом:

<meta name="viewport" content="width=device-width, initial-scale=1">

Директива viewport передает браузеру информацию о том, как управлять размерами страницы и масштабированием исходя из типа устройства. В приведенном выше примере content="width=device-width" означает, что браузер будет отображать ширину страницы по ширине собственного экрана. Поэтому, если этот экран имеет ширину 480 пикселей, окно браузера будет иметь ширину 480 пикселей. А строка initial-scale=1 означает, что начальное увеличение (которое в этом случае равно 1, не масштабируется). Ниже приведены атрибуты, поддерживаемые этим тегом:

Атрибут Описание
width Определяет ширину области просмотра в пикселях или значение device-width, например width=480 или width=device-width
height Определяет высоту области просмотра в пикселях или значение device-height, например height=600 или height=device-height
initial-scale Определяет соотношение между шириной устройства и размером области просмотра при загрузке страницы. Может принимать значения от 0.0 до 10.0. Значение 1.0 - без увеличения.
minimum-scale Определяет минимальное значение уменьшения; должен быть меньше или равен максимальному масштабу или быть неопределенным.
maximum-scale Определяет максимальное значение увеличения; должен быть больше или равен минимальному масштабу или быть неопределенным.
user-scalable Позволяет устройству изменять масштаб. Значения yes или no. Если установлено значение no, пользователь не может увеличить/уменьшить веб-страницу. По умолчанию yes . Настройки браузера могут игнорировать это правило.

Чтобы обновлять страницу каждые пять секунд, добавьте эти метаданные в элемент head:

<meta http-equiv="refresh" content="5">

ВНИМАНИЕ! Хотя это рабочая команда, рекомендуется не использовать ее из-за ее негативных последствий для пользователя. Обновление страницы слишком часто может привести к ее плохой восприимчивости и часто прокручиваться вверх страницы. Если некоторая информация на странице должна постоянно обновляться, есть намного лучшие способы сделать это, обновив только часть страницы.

Чтобы перенаправить на страницу https://example.com/ через 10 секунд, добавьте эти метаданные в элемент head:

<meta http-equiv="refresh" content="10;https://example.com/">

Мобильные платформы, такие как iOS, автоматически распознают номера телефонов и превращают их в ссылки tel:. Хотя эта функция удобна, система иногда ошибается и в качестве телефонных номеров опознает коды ISBN и другие номера. Для мобильных Safari и некоторых других мобильных браузеров на основе WebKit, чтобы отключить автоматическое распознавание и форматирование номера телефона, вам нужен этот метатег:

<meta name="format-detection" content="telephone=no">

Вы можете настроить свое веб-приложение или веб-сайт для запуска вне браузера, так чтобы добавить ярлык приложения на рабочий экран устройства, и запускать его в полноэкранном режиме. Ниже приведены метатеги для открытия веб-приложения в полноэкранном режиме (без адресной строки). Android Chrome:

<meta name="mobile-web-app-capable" content="yes">

IOS:

<meta name="apple-mobile-web-app-capable" content="yes">

Вы также можете установить цвет для строки состояния и адресной строки в метатеге: Android Chrome:

<meta name="theme-color" content="black">

IOS:

<meta name="apple-mobile-web-app-status-bar-style" content="black">