Метаданные документа

Метаданные — информация о странице, которую видит не пользователь, а браузер, поисковики и соцсети. Основные: charset (кодировка), viewport (мобильные), description (описание для SEO), Open Graph (превью в соцсетях), favicon (иконка во вкладке).

Основные мета-теги:

<meta charset="UTF-8"> — кодировка символов:

• Обязателен для кириллицы, эмодзи, спецсимволов
• Должен быть первым в <head>

<meta name="viewport" ...> — для мобильных:

• width=device-width — ширина = ширина экрана
• initial-scale=1.0 — начальный масштаб
• Без этого сайт будет «уменьшен» на телефоне

<meta name="description" ...> — описание для SEO:

• Показывается в результатах поиска (Google, Яндекс)
• 150-160 символов — оптимальная длина

Open Graph (для соцсетей):

• og:title — заголовок при шаринге
• og:description — описание
• og:image — картинка превью
• og:url — URL страницы

Favicon — иконка во вкладке: <link rel="icon" href="/favicon.ico"> <link rel="icon" href="/icon.svg" type="image/svg+xml">

Альтернативные стили: <link rel="stylesheet" href="style.css"> <link rel="canonical" href="https://..."> — канонический URL

Метаданные — как паспорт документа. Паспорт не виден при чтении книги, но содержит crucial info: название (title), автор (og:author), язык (lang). Мета-теги — паспорт вашей страницы для поисковиков и соцсетей.

**Самый простой:**

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя страница</title>
</head>

Минимальный набор: charset, viewport, title.

**Простой:**

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Бесплатный курс по HTML и CSS для начинающих">
  <title>HTML и CSS — PROlab Academy</title>
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="style.css">
</head>

Добавили description для SEO и favicon.

**Реальный пример:**

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Изучите HTML и CSS с нуля: семантическая вёрстка, flexbox, grid. 17 уроков с примерами.">
  <meta name="robots" content="index, follow">
  <meta name="author" content="PROlab Academy">

  <!-- Open Graph -->
  <meta property="og:title" content="HTML и CSS — PROlab Academy">
  <meta property="og:description" content="Бесплатный курс по HTML и CSS">
  <meta property="og:image" content="/og-image.png">
  <meta property="og:url" content="https://prolab-academy.site/skills/html">
  <meta property="og:type" content="website">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="HTML и CSS">
  <meta name="twitter:description" content="Бесплатный курс">
  <meta name="twitter:image" content="/og-image.png">

  <title>HTML и CSS — PROlab Academy</title>
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="canonical" href="https://prolab-academy.site/skills/html">
</head>

Полный набор метаданных: SEO, Open Graph, Twitter Card, canonical.

**Неправильно:** Забыть meta viewport

**Почему:** Без viewport сайт не будет адаптивным на мобильных — он покажется «уменьшенным».

**Правильно:** Всегда добавляйте <meta name="viewport" content="width=device-width, initial-scale=1.0">.

**Неправильно:** Писать description длиннее 160 символов

**Почему:** Поисковики обрезают описание. Длинное описание не поместится в сниппет.

**Правильно:** Description — 150-160 символов. Кратко и informatively.

**Неправильно:** Забыть Open Graph теги

**Почему:** Без OG-тегов при шаринге в соцсетях страница покажется без картинки и описания.

**Правильно:** Добавляйте og:title, og:description, og:image для красивого превью в соцсетях.

• charset="UTF-8" — обязателен для кириллицы
• viewport — обязателен для мобильных
• description — 150-160 символов для SEO
• Open Graph — превью в соцсетях (og:title, og:image)
• Favicon — иконка во вкладке браузера

Назад: Вы знаете атрибуты (H14) — метаданные расширяют <head> конфигурацией страницы.

Вперёд: В следующем уроке (H16) вы изучите мультимедиа: audio, video, iframe и встраиваемый контент.