Что должно быть в <head> и зачем нужны мета-теги?

Вопрос

Какие теги обычно кладут в <head> документа и зачем нужны мета-теги вроде charset, viewport, description, Open Graph и favicon?

Короткий ответ

<head> содержит невидимые пользователю метаданные страницы: кодировку, заголовок вкладки, ссылки на стили/скрипты и мета-теги, которые управляют рендерингом (viewport), SEO (description) и тем, как ссылка выглядит при шаринге в соцсетях (Open Graph). Ничего внутри <head> не отображается в теле страницы.

Подробный ответ

Ключевые элементы <head>:

• <meta charset="UTF-8"> — кодировка документа. Должен идти в первых 1024 байтах файла, иначе браузер может успеть начать парсинг с неверной кодировкой.
• <title> — заголовок вкладки браузера и заголовок сниппета в поисковой выдаче.
• <meta name="viewport" content="width=device-width, initial-scale=1"> — без этого тега мобильные браузеры рендерят страницу в виртуальном окне ~980px и затем масштабируют её, из-за чего адаптивная вёрстка ломается. width=device-width приравнивает viewport к реальной ширине экрана.
• <meta name="description" content="..."> — краткое описание страницы, которое поисковики часто показывают под заголовком в выдаче. Не влияет напрямую на ранжирование, но влияет на CTR.
• Open Graph (og:title, og:description, og:image, og:url) — протокол Facebook, который читают большинство мессенджеров и соцсетей для построения превью-карточки при шаринге ссылки. Без og:image карточка обычно выглядит пусто и непривлекательно.
• <link rel="icon" href="/favicon.ico"> — иконка вкладки (favicon), также используется в закладках и истории браузера.
• <link rel="canonical" href="..."> — указывает поисковику каноническую версию страницы при дублирующемся контенте (например, с ?utm_source и без).
• <link rel="stylesheet"> и <script> — подключение CSS и JS; порядок и атрибуты (defer/async) здесь влияют на скорость первого рендера.

Пример

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Магазин обуви — Nuxt UZ</title>
  <meta name="description" content="Каталог кроссовок и ботинок с доставкой по Узбекистану" />

  <!-- Open Graph для превью при шаринге -->
  <meta property="og:title" content="Магазин обуви — Nuxt UZ" />
  <meta property="og:description" content="Каталог кроссовок и ботинок с доставкой" />
  <meta property="og:image" content="https://example.com/og-cover.jpg" />
  <meta property="og:url" content="https://example.com" />

  <link rel="canonical" href="https://example.com" />
  <link rel="icon" href="/favicon.ico" />
  <link rel="stylesheet" href="/styles/main.css" />
</head>

Дополнительные вопросы

• Что произойдёт с адаптивной вёрсткой без тега viewport?
• Чем og:* теги отличаются от Twitter Card тегов (twitter:card)?
• Зачем нужен rel="canonical" и как он влияет на дублирующийся контент?