Метатеги в документах 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">