Справочник HTML & CSS

<meta>

Метаданные страницы: кодировка, настройки для телефонов, описание для поиска.

Синтаксис

<meta name="description" content="text">

Атрибуты

Параметр	Тип	Описание
charset	utf-8	Кодировка страницы.
name	description \| viewport \| robots \| …	Какое свойство страницы описывает тег.
content	text	Значение этого свойства.
property	og:title \| og:image \| …	Свойства Open Graph для превью в соцсетях и мессенджерах.

Примеры

Самые нужные теги <meta>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Fresh coffee and cakes in the city centre.">
    <title>The Bean</title>
  </head>
  <body>
    <p>Meta tags are invisible but read by browsers and search engines.</p>
  </body>
</html>

Превью ссылки в соцсетях (Open Graph):

<meta property="og:title" content="The Bean coffee shop">
<meta property="og:image" content="https://example.com/cover.jpg">
<p>These tags change how a shared link looks.</p>

Примечания

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

См. также

<head> — Служебная часть страницы: кодировка, заголовок вкладки, подключение стилей и скриптов.
<title> — Заголовок страницы: текст на вкладке браузера и в результатах поиска.
<link> — Подключает к странице внешний ресурс: файл стилей, иконку сайта, шрифт.

Вопросы и ответы по теме

В учебнике

Метатеги и SEO — Что писать в head — title, meta description, viewport, Open Graph для соцсетей, иконка сайта, canonical и robots.

Спасибо, что читаете!