HTML тег <meta>

Поддержка браузерами

Описание

HTML тег <meta> является пустым элементом и располагается внутри элемента <head>. Он используется для предоставления дополнительной информации (метаданных) о HTML-документе, используемой браузерами и поисковыми системами.

Обычно на одной странице располагается по несколько элементов <meta>, но с различными атрибутами, которые используются например для определения описания страницы, ключевых слов, указания автора документа, последнего изменения, указания кодировки HTML-документа и т.д.

Примечание: содержимое элементов <meta> не отображается на веб-странице.

Атрибуты

charset:

Указывает кодировку символов для текущего HTML-документа. Чаще всего используется кодировка UTF-8.

Тег <meta> с атрибутом charset лучше всего располагать в качестве первого дочернего элемента внутри элемента <head>. Чтобы текст на странице отображался корректно, кодировка, указанная в значении атрибута должна совпадать с кодировкой самого документа.

content:

Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name, в зависимости от их значения.

http-equiv:

Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте.

Возможные значения атрибута:

default-style: указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей.
refresh: указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка ";url=адрес_страницы":
```

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


<meta http-equiv="refresh" content="10;url=httр://www.puzzleweb.ru">
```

name:

Определяет название метаданных. Данный атрибут используется совместно с атрибутом content.

Примечание: атрибут name не должен использоваться в элементе, если в нём уже установлен атрибут http-equiv или charset.

Возможные значения атрибута:

application-name: указывает название веб-приложения, используемого на странице.
author: указывает имя автора документа.
description: определяет краткое описание к содержимому страницы.
Примечание: стоит уделить особое внимание к описанию страницы с помощью атрибута description, так как многие посетители будут сталкиваются с этой информацией во фрагменте ссылки на ваш сайт в результатах поиска.
generator: указывает один из пакетов программного обеспечения, используемого для создания документа.
keywords: содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы.

robots: определяет поведение поисковых роботов на странице.

Значения атрибута content для <meta name="robots">:
Значение	Описание	Поисковик
index	разрешает роботу индексировать страницу	все
noindex	запрещает роботу индексировать страницу	все
follow	позволяет роботу переходить по ссылкам на странице	все
nofollow	запрещает роботу переходить по ссылкам на странице	все
noodp	запрещает использование общего описания сайта из каталога DMOZ, если таковое имеется, к описанию данной страницы на странице результата поиска	google, yahoo, bing
noarchive	предотвращает кэширование страницы поисковой системой	google, yahoo
nosnippet	предотвращает отображение любого описания страницы на странице результатов поиска	google
nocache	синоним значения noarchive	bing

viewport: позволяет определить размер и/или масштаб области просмотра веб-страницы в мобильных браузерах. Параметры для области просмотра указываются в атрибуте content через запятую:

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

Значения атрибута content для <meta name="viewport">:
Значение	Пример значения	Допустимые значения	Описание
width	width=device-width width=320	положительное целое число от 1 до 10000 или device-width	Определяет ширину в пикселях. Специальное значение device-width указывает, что ширина области просмотра будет равна ширине экрана устройства.
height	height=device-height height=640	положительное целое число от 1 до 10000 или device-height	Определяет высоту в пикселях. Специальное значение device-height указывает, что высота области просмотра будет равна высоте экрана устройства.
initial-scale	initial-scale=2.0	положительное число от 0.0 до 10.0	Задает масштаб страницы при ее первоначальном просмотре.
maximum-scale	maximum-scale=2.5	положительное число от 0.0 до 10.0	Задает предел увеличения веб-страницы.
minimum-scale	minimum-scale=0.5	положительное число от 0.0 до 10.0	Задает предел уменьшения веб-страницы.
user-scalable	user-scalable=no	булево значение (yes или no)	При использовании значения no, пользователь не сможет масштабировать веб-страницу. Значение по умолчанию - yes.

Тег <meta> так же поддерживает Глобальные атрибуты

Стиль по умолчанию

Нет.

Пример

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Портал для Web разработчиков">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="Автор Я">
</head>

<body>
  Содержимое страницы
</body>

Результат данного примера в окне браузера: