Атрибут name HTML тега <meta>

Значение и применение

Атрибут name (HTML тега <meta>) задаёт имя метаданных документа. Имя метаданных указывается в атрибуте name, а значение указывается в атрибуте content.

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

Метатег viewport задаёт область просмотра в CSS-пикселях, а не в физических точках дисплея. initial-scale=1 задаёт начальный масштаб; не запрещайте увеличение через user-scalable=no и малый maximum-scale. Значения масштаба могут быть дробными. Описание description — возможный источник поискового сниппета, но не гарантия его текста.

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

Спецификации: multipage, webappsec-referrer-policy

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (19) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьhtml.elements.meta.name
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
name✓1✓12✓1✓≤12.1✓≤4✓18✓4✓≤12.1✓≤3.2✓1.0✓4.4✓≤3.2
application-title✓134✓134×✓119×✓134×✓88×✓29.0✓134×
color-scheme✓81✓81✓96✓68✓12.1✓81✓96×✓12.2✓13.0✓81✓12.2
referrer✓17✓79✓36✓15✓11.1✓18✓36✓14✓12✓1.0✓4.4✓12
responsive-embedded-sizing✓154✓154×✓138×✓154××××✓154×
text-scale✓146✓146×××✓146×✓97××✓146×
theme-color◐73◐79××✓15✓92××✓15✓6.2×✓15
viewport×××××✓18✓4✓10.1✓3✓1.0✓4.4✓3
height×××××××✓10.1✓3××✓3
initial-scale×××××✓18✓4✓10.1✓3✓1.0✓4.4✓3
interactive-widget×××××✓108✓133✓73×✓21.0✓108×
overlays-content×××××✓108✓133✓73×✓21.0✓108×
resizes-content×××××✓108✓133✓73×✓21.0✓108×
resizes-visual×××××✓108✓133✓73×✓21.0✓108×
maximum-scale×××××✓18✓4✓10.1✓3✓1.0✓4.4✓3
minimum-scale×××××✓18✓4✓10.1✓3✓1.0✓4.4✓3
user-scalable×××××✓18✓4✓10.1✓3✓1.0✓4.4✓3
viewport-fit×××××✓135✓79✓89✓11✓29.0✓135✓11
auto×××××✓135✓79✓89✓11✓29.0✓135✓11
cover×××××✓135✓79✓89✓11✓29.0✓135✓11
width×××××✓18✓4✓10.1✓3✓1.0✓4.4✓3

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис:

HTML
<meta name = "value">

Значения атрибута

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

Часто используемые значения атрибута

Рассмотрим часто используемые варианты использования тега <meta>:

HTML
<meta name = "description" content = "Бесплатные уроки по созданию сайтов" >

Описание в данном теге довольно важное, его учитывают поисковые машины при индексации. Атрибут content в данном примере содержит описание конкретной веб-страницы сайта. Не рекомендуется использовать длинные описания.

HTML
<meta name = "keywords" content = "HTML, CSS, JavaScript">

Представляет собой список ключевых слов (касающиеся конкретной страницы). Ходит много споров о том учитывается или нет поисковыми системами это значение, исходя из перечня, используемых метатегов в Google, то он не учитывает этот мета тег, а Яндекс, в некоторых случаях оставляет за собой право его использовать.

Определяет автора контента:

HTML
<meta name = "author" content = "Denis Bolshakov">

Индексация страниц

Используется поисковыми системами при индексации страниц:

HTML
<meta name = "robots" content = "noindex, follow">

Доступные значения:

Значение атрибута Определение
noindex запрещает индексирование документа.
nofollow запрещает проход по ссылкам в документе.
index разрешает индексирование документа.
follow разрешает проход по ссылкам в документе.

Настройка области просмотра

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

Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге <head> разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:

HTML
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
  • Атрибут name задаёт имя метаданных, значение "viewport" дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
  • Значение width=device-width атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height.
  • Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).

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

Доступные значения:

Значение атрибута Определение
width Определяет ширину в пикселях области просмотра (значение - положительное целое число или device-width).
height Определяет высоту в пикселях области просмотра (значение - положительное целое число или device-height).
initial-scale Начальный масштаб области просмотра. Допускается дробное число, например 1 или 1.5.
minimum-scale Минимальный масштаб; допускается дробное число. Не должен превышать maximum-scale.
maximum-scale Максимальный масштаб; допускается дробное число. Ограничение увеличения может мешать чтению; браузер вправе игнорировать его ради доступности.
user-scalable Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб).

Отличия HTML 4.01 от HTML 5

Нет.

Примеры, попробуйте сами

Атрибут name элемента meta

Метаданные размещаются в head и не отображаются как текст страницы.

Исходный код для изучения. Запуск на этой странице недоступен.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Учебная страница" />
    <title>Метаданные</title>
  </head>
  <body>
    <h1>Моя страница</h1>
    <p>Содержимое документа.</p>
  </body>
</html>