HTML => Мета-информация

Вступление

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

Синтаксис

<meta name="metadata name" content="value">
<meta http-equiv="pragma directive" content="value">
<meta charset="encoding label">

замечания

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

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

Мета-данные страницы в основном используются браузером (например, масштабирование документа) и паутинами паутины, используемыми поисковыми системами (Google, Yahoo !, Bing).

Спецификация дает ряд стандартизованных имен метаданных для использования с <meta name> и стандартизованными директивами pragma метаданных для использования с <meta http-equiv> . Тем не менее, многие службы в Интернете (веб-сканеры, инструменты разработки, службы социального обмена и т. Д.) Используют форму <meta name> в качестве общей точки расширения для метаданных. Некоторые из них перечислены на вики-странице spec .

Кодировка символов

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

<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">

См. Также Стандарт кодирования , чтобы просмотреть все доступные символы кодировки символов, которые распознают браузеры.

Автоматическое обновление

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

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

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

Управление компоновкой мобильных устройств

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

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

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

В приведенном выше примере, content="width=device-width означает , что браузер отображает ширину страницы по ширине своего собственного экрана. Таким образом , если этот экран 480px wide в 480px wide initial-scale=1 480px wide , в окне браузера будет 480px wide в 480px wide . initial-scale=1 показывает, что начальный масштаб (который в этом случае равен 1, означает, что он не масштабируется).

Ниже приведены атрибуты, поддерживаемые этим тегом:

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

Заметки:

¹ Свойство width может быть задано в пикселях ( width=600 ) или шириной устройства ( width=device-width ), которая представляет физическую ширину экрана устройства.

² Аналогично, свойство height может быть задано в pixels ( height=600 ) или по device-height ( height=device-height ), которая представляет физическую высоту экрана устройства.

Информация о странице

`application-name`

Предоставление имени веб-приложения, которое представляет страница.

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

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

`author`

Укажите автора страницы:

<meta name="author" content="Your Name">

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

`description`

Задайте описание страницы:

<meta name="description" content="Page Description">

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

`generator`

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

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

`keywords`

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

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

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

Роботы

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

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

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

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

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

Признание номера телефона

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

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

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

Социальные медиа

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

Facebook / Open Graph

<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/ -->

Facebook / мгновенные статьи

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- The URL of the web version of your article -->
<link rel="canonical" href="http://example.com/article.html">

<!-- The style to be used for this article -->
<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">

Google+ / Schema.org

<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">

Автоматическое перенаправление

Иногда вашей веб-странице требуется автоматическая переадресация.

Например, чтобы перенаправить на example.com через 5 секунд:

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

Это строка отправит вас на указанный сайт (в этом случае example.com через 5 секунд.

Если вам нужно изменить временную задержку перед перенаправлением, просто изменив число прямо перед вашим ;url= изменит временную задержку.

Веб-приложение

Вы можете настроить свое веб-приложение или веб-сайт, чтобы добавить ярлык приложения, добавленный на рабочий экран устройства, и запустить приложение в полноэкранном режиме приложения с помощью пункта меню «Добавить в рабочий стол» для Chrome.

Ниже метатеги (ов) откроется веб-приложение в полноэкранном режиме (без адресной строки).

Android Chrome

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

IOS

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

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