HTML тег <meta>

Тег <meta> содержит метаданные — информацию о странице, а не контент, отображаемый на ней. Браузеры, поисковые системы и социальные сети читают эти метаданные, чтобы решить, как отображать страницу, как индексировать её и как показывать при совместном использовании. Ничего внутри элемента <meta> не отображается на самой странице.

Документ может содержать несколько тегов <meta>, и почти каждая современная страница нуждается хотя бы в паре из них (кодировка символов и viewport). Все теги <meta> размещаются внутри элемента <head> вместе с тегами <title> и <link>.

На этой странице рассматриваются теги meta, которые вы будете использовать в повседневной работе: кодировка, viewport, SEO-тег description, симуляция HTTP-заголовков с помощью http-equiv, а также теги Open Graph / Twitter, управляющие отображением ссылок при публикации.

Синтаксис

Тег <meta> является пустым элементом — у него нет содержимого и закрывающего тега. В XHTML он должен быть самозакрывающимся (<meta />).

Тег <meta> использует один из двух шаблонов:

Пара name/content (или property/content для Open Graph) — name указывает тип метаданных, content — их значение.
Самостоятельный атрибут charset или пара http-equiv/content, имитирующая HTTP-заголовок ответа.

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

Кодировка символов: `<meta charset>`

Этот тег сообщает браузеру, какую кодировку использовать при декодировании документа. Он должен быть первым внутри <head>, и всегда должен иметь значение UTF-8:

<meta charset="UTF-8">

Почему UTF-8? Эта кодировка может представить каждый символ в любом языке — буквы с диакритикой, emoji, символы валют, иероглифы CJK — с помощью единой универсальной кодировки. Без объявленной (или правильно угаданной) кодировки символы вроде é, — или " могут превратиться в нечитаемую «кракозябру». UTF-8 — это кодировка современного интернета; стандарт HTML требует её для новых документов.

Разместите этот тег как можно раньше, чтобы браузер знал кодировку ещё до разбора любого текста.

Мета-тег viewport

Тег viewport делает страницу адаптивной на телефонах и планшетах. Без него мобильные браузеры предполагают, что страница создана для десктопа, и отображают её шириной около 980px, а затем уменьшают результат — оставляя крошечный, уменьшенный текст. Добавьте этот тег, и страница адаптируется к устройству:

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

Что делает каждая часть:

width=device-width — устанавливает ширину viewport на собственную ширину устройства (например, 390px на телефоне) вместо фиктивной ширины десктопа в 980px.
initial-scale=1.0 — начало с масштаба 1:1, так что один CSS-пиксель соответствует одному аппаратно-независимому пикселю при загрузке.

Эта единственная строка обязательна для любого сайта, который должен хорошо выглядеть на мобильных устройствах. Избегайте добавления user-scalable=no или maximum-scale меньше 5 — это блокирует масштабирование жестом щипка и ухудшает доступность для пользователей с нарушениями зрения.

SEO: мета-тег `description`

Тег description — это краткое описание, которое поисковые системы часто показывают под заголовком страницы в результатах, и на которое опираются социальные платформы. Старайтесь написать лаконичное, привлекательное предложение примерно из 150–160 символов — более длинный текст обрезается многоточием.

<meta name="description" content="Learn how the HTML meta tag controls encoding, the viewport, SEO, and social sharing — with copy-paste examples.">

Тег description напрямую не влияет на позиции в поиске, но чёткое, релевантное описание улучшает кликабельность в результатах поиска.

Другие значения `name`/`content`

Атрибут name задаёт тип метаданных; content содержит их значение. Распространённые значения:

<!-- Author of the page -->
<meta name="author" content="Jane Doe">

<!-- Software that generated the page -->
<meta name="generator" content="Next.js">

<!-- Control how search engines crawl and index this page -->
<meta name="robots" content="index, follow">
<!-- ...or keep a page out of search results -->
<meta name="robots" content="noindex, nofollow">

<!-- Tint the mobile browser UI to match your brand -->
<meta name="theme-color" content="#10b981">

<!-- Limit the referrer information sent to other sites -->
<meta name="referrer" content="strict-origin-when-cross-origin">

Примечание: Мета-тег keywords (<meta name="keywords" content="…">) сегодня игнорируется всеми крупными поисковыми системами и его можно смело не использовать. Старый атрибут scheme был удалён в HTML5 и не должен применяться.

Симуляция HTTP-заголовков: `http-equiv`

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

<!-- Declare the content type and encoding (legacy alternative to charset) -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Auto-refresh the page every 60 seconds -->
<meta http-equiv="refresh" content="60">

<!-- ...or redirect to another URL after 3 seconds -->
<meta http-equiv="refresh" content="3; url=https://www.w3docs.com">

Предупреждение о доступности: Избегайте http-equiv="refresh". Страница, автоматически обновляющаяся или перенаправляющая пользователей, может дезориентировать их, прерывать работу программ чтения с экрана и создавать трудности для тех, кому нужно больше времени для чтения — это нарушает критерии успеха WCAG. Предпочитайте серверное HTTP-перенаправление или видимую ссылку, по которой пользователь кликает сам.

Публикация в социальных сетях: Open Graph и Twitter cards

Когда кто-то публикует вашу ссылку в Facebook, LinkedIn, Slack или X, эти платформы читают теги Open Graph, чтобы построить карточку предварительного просмотра (заголовок, описание, изображение). Теги Open Graph используют атрибут property вместо name:

<meta property="og:title" content="HTML meta Tag — Full Guide">
<meta property="og:description" content="Encoding, viewport, SEO, and social meta tags explained with examples.">
<meta property="og:image" content="https://www.w3docs.com/images/meta-preview.png">
<meta property="og:url" content="https://www.w3docs.com/learn-html/html-meta-tag.html">
<meta property="og:type" content="website">

X (Twitter) добавляет собственные теги поверх, используя name:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML meta Tag — Full Guide">
<meta name="twitter:description" content="Encoding, viewport, SEO, and social meta tags explained with examples.">
<meta name="twitter:image" content="https://www.w3docs.com/images/meta-preview.png">

Указывайте абсолютный URL для og:image (около 1200×630px), чтобы в предварительном просмотре отображалось большое чёткое изображение, а не крошечная миниатюра или ничего.

Полный пример `<head>`

Вот как эти теги сочетаются в реальном документе:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML meta Tag — Full Guide</title>
    <meta name="description" content="Encoding, viewport, SEO, and social meta tags explained with copy-paste examples.">
    <meta name="author" content="Jane Doe">
    <meta name="theme-color" content="#10b981">

    <!-- Open Graph -->
    <meta property="og:title" content="HTML meta Tag — Full Guide">
    <meta property="og:description" content="Everything the meta tag controls, with examples.">
    <meta property="og:image" content="https://www.w3docs.com/images/meta-preview.png">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">

    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Page content goes here</h1>
  </body>
</html>

Атрибуты

Атрибут	Значение	Описание
`charset`	character_set	Задаёт кодировку символов документа (используйте `UTF-8`).
`content`	text	Задаёт значение атрибутов `name`, `property` или `http-equiv`.
`http-equiv`	content-type, default-style, refresh	Имитирует HTTP-заголовок ответа и определяет его обработку.
`name`	application-name, author, description, generator, keywords, robots, theme-color, referrer, viewport	Задаёт имя метаданных, хранящихся в `content`.
`property`	og:title, og:description, og:image, …	Задаёт имя свойства Open Graph (используется социальными платформами).

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

Связанные теги

<head> — контейнер для всех метаданных.
<title> — заголовок страницы, отображаемый во вкладках и результатах поиска.
<link> — ссылает на внешние ресурсы, такие как таблицы стилей и фавиконы.
<base> — задаёт базовый URL для всех относительных ссылок на странице.
<style> — встраивает CSS непосредственно в раздел head.

Практика

Какова цель мета-тега в HTML?

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

Синтаксис

Кодировка символов: <meta charset>