W3docs
ru
Войти

Атрибут content в HTML

Атрибут HTML content задаёт значение для атрибутов name или http-equiv тега meta. SEO, viewport и другие примеры использования.

Атрибут content хранит значение объявления метаданных. Сам по себе он не несёт смысла — он всегда является второй половиной пары «ключ — значение», предоставляя данные для того, что задаёт атрибут name или http-equiv тега meta.

Атрибут content можно использовать только на элементе <meta>, который размещается внутри <head> документа. Думайте о name/http-equiv как о ключе, а о content — как о значении:

  • name + content — метаданные уровня документа для браузеров, поисковых систем и социальных платформ (описание, ключевые слова, viewport и т. д.).
  • http-equiv + content — директива pragma, имитирующая HTTP-заголовок ответа (например, обновление страницы или тип содержимого).

Если вы напишете тег <meta> с атрибутом name или http-equiv, но без content, такое объявление ничего не делает.

Синтаксис

<meta name="description" content="A description of the document">

Распространённые значения name и соответствующие content

Значение content интерпретируется в соответствии с парным атрибутом name. Вот наиболее часто используемые:

nameЧто хранит content
viewportСпособ отображения страницы на экране устройства. Стандартное значение — width=device-width, initial-scale=1, обеспечивающее адаптивную отрисовку на мобильных устройствах.
descriptionКраткое описание страницы. Поисковые системы часто показывают его как сниппет под результатом поиска — старайтесь укладываться в ~160 символов.
keywordsСписок ключевых слов через запятую. Современные поисковые системы в основном игнорируют его, однако он по-прежнему встречается в устаревшей разметке.
robotsИнструкции для поисковых роботов (подробнее см. ниже).
authorИмя автора страницы.

Мета-тег viewport — самый важный из всех, который нужно запомнить: без него мобильные браузеры предполагают ширину макета как у десктопа и уменьшают масштаб:

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

Значения директивы robots

Содержимое content мета-тега robots — это список директив через запятую, указывающих роботам, что им разрешено делать со страницей. Две наиболее часто понимаемые неправильно — noindex и nofollow — управляют разными вещами:

ЗначениеЧто сообщает роботу
indexСтраница может появляться в результатах поиска. Это значение по умолчанию, поэтому его редко нужно указывать явно.
followРобот может переходить по ссылкам на странице для обнаружения других страниц. Тоже значение по умолчанию.
noindexНе показывать страницу в результатах поиска — даже если робот может её прочитать и перейти по её ссылкам.
nofollowНе переходить по ссылкам на этой странице. Сама страница при этом может быть проиндексирована.

Поскольку эти директивы независимы, их часто комбинируют. Например, чтобы скрыть страницу из поиска и запретить роботам переходить по её ссылкам:

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

Метаданные Open Graph и публикация в социальных сетях

Когда страница публикуется в социальных сетях (Facebook, LinkedIn, Slack и т. д.), платформа считывает мета-теги Open Graph для формирования карточки предпросмотра. Open Graph использует атрибут property (вместо name) вместе с content:

<meta property="og:title" content="HTML content Attribute - W3docs" />
<meta property="og:description" content="Learn how the HTML content attribute pairs with a meta tag's name or http-equiv to set page metadata." />
<meta property="og:image" content="https://www.w3docs.com/assets/preview.png" />
  • og:title — заголовок, отображаемый на карточке публикации (если не задан, используется заголовок страницы).
  • og:description — текст краткого описания под заголовком.
  • og:image — абсолютный URL миниатюры. Всегда используйте полный https://-адрес; относительные пути не будут разрешены на других сайтах.

Это одни из наиболее распространённых реальных применений content, поэтому стоит добавлять их вместе с мета-тегом description.

Распространённые значения http-equiv и соответствующие content

Атрибут http-equiv позволяет тегу <meta> заменять HTTP-заголовок. Атрибут content при этом несёт значение этого заголовка:

http-equivЧто хранит content
refreshКоличество секунд до перезагрузки страницы. Добавьте ;url=... для перенаправления — например, content="5;url=https://www.w3docs.com". См. предупреждение о доступности ниже.
content-typeMIME-тип документа и набор символов, например text/html; charset=UTF-8. В HTML5 предпочтительна более краткая форма <meta charset="UTF-8">.

Значение X-UA-Compatible (например, IE=edge) влияло только на режим отрисовки Internet Explorer. Internet Explorer достиг конца жизненного цикла, поэтому эта директива считается устаревшей и её можно не указывать на новых страницах.

Внимание

Использование <meta http-equiv="refresh"> для перенаправления на другую страницу не рекомендуется с точки зрения доступности. Это задокументированный сбой WCAG 2.2 (критерии успеха 2.2.1 и 3.2.5): пользователь не может контролировать время перенаправления, что может дезориентировать людей, пользующихся программами экранного чтения или нуждающихся в большем времени для чтения. Предпочтительнее использовать настоящее серверное перенаправление HTTP (301/302). Если перенаправление на стороне клиента неизбежно, установите задержку 0, чтобы оно произошло мгновенно, или предоставьте видимую ссылку, по которой пользователь может перейти самостоятельно.

Пример использования атрибута content в HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Free hands-on tutorials and references on HTML, CSS, JavaScript, PHP and Git, with runnable examples to learn web development step by step." />
    <meta name="keywords" content="HTML,CSS,JavaScript,PHP, Git" />
    <meta http-equiv="refresh" content="30" />
  </head>
  <body>
    <h1>Example of the HTML "content" attribute</h1>
    <p>Lorem ipsum, or lorem ipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
  </body>
</html>

Вот что делает каждое значение content в приведённом примере:

  • width=device-width, initial-scale=1 указывает браузеру подстроить макет под ширину экрана устройства и начать с масштаба 100%.
  • Значение description ("Free hands-on tutorials and references on HTML, CSS, JavaScript, PHP and Git…") — это краткое описание страницы, которое поисковая система может показать в сниппете результата.
  • "HTML,CSS,JavaScript,PHP, Git" — список ключевых слов через запятую.
  • "30" в директиве refresh перезагружает страницу каждые 30 секунд. Используйте автообновление с осторожностью — ознакомьтесь с примечанием о доступности выше, прежде чем применять его.
«Попробуйте сами» недоступно для этого примера.

Практика

Практика
Какие из перечисленных вариантов являются реальными применениями атрибута content в мета-теге?
Какие из перечисленных вариантов являются реальными применениями атрибута content в мета-теге?
Was this page helpful?