Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Необхідні мета-теги в HTML». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Мета теги (meta tags)** - це HTML-елементи в `<head>`, які передають інформацію про сторінку браузерам, пошуковим системам та соціальним мережам, але нічого не відображають на самій сторінці.

## Теорія

### TL;DR

- Мета теги - це як етикетки на посилці: вони пояснюють обробникам (браузерам, пошуковим ботам, соціальним платформам), що всередині і як з цим працювати
- Три теги для кожної сторінки без винятку: `charset` (кодування), `viewport` (мобільне відображення), `description` (сніпет у пошуку)
- `og:` теги керують тим, як сторінка виглядає при шерингу в соціальних мережах
- `robots` визначає, чи може пошуковий рушій індексувати сторінку взагалі

### Короткий приклад

```html
<head>
  <meta charset="UTF-8" />

Ці чотири теги покривають кодування, мобільний вигляд, SEO та соціальний шеринг. Близько 90% реальних потреб.

### Як мета теги насправді працюють

Браузер читає `<head>` до того, як починає рендерити сторінку. `charset` вказує, як декодувати сирі байти файлу. `viewport` задає ширину вікна рендерингу. `description` зберігається, але не показується користувачу - пошукові системи забирають його під час краулінгу.

Open Graph теги працюють інакше. Коли хтось шерить посилання, Facebook чи LinkedIn роблять HTTP-запит до сторінки, читають `<head>` і будують картку попереднього перегляду з `og:` значень. Браузер не виконує мета теги. Він читає їх як конфігурацію.

### Коли використовувати кожен тег

- `charset="UTF-8"` - на кожній сторінці, завжди, без винятків. Запобігає проблемам з не-ASCII символами.
- `viewport` - на кожній сторінці для мобільних пристроїв (тобто майже скрізь, адже мобільний трафік складає 60%+ від усього веб-трафіку).
- `description` - на кожній сторінці. Відображається в результатах пошуку і впливає на клікабельність.
- `og:title`, `og:image`, `og:url` - коли контент може поширюватись у Facebook, LinkedIn та схожих платформах.
- `twitter:card` - той самий контент, але у форматі для Twitter.
- `robots` - для тестових середовищ, адмін-сторінок або будь-якого контенту, який не повинен потрапити до пошукових систем.

### Порівняльна таблиця

| Тег | Призначення | Коли використовувати |
|-----|-------------|----------------------|
| `charset="UTF-8"` | Кодування символів | Кожна сторінка |
| `viewport` | Мобільне відображення | Кожна адаптивна сторінка |
| `description` | Сніпет у пошуку | Кожна сторінка |
| `og:title`, `og:image` | Картка попереднього перегляду | Контент для шерингу |
| `robots` | Поведінка пошукових ботів | Тестові, приватні сторінки |
| `theme-color` | Колір браузерного UI на мобільному | Брендовані мобільні сайти |

### Типові помилки

**Відсутній viewport**

```html

<head>
  <meta charset="UTF-8" />
  <title>Мій сайт</title>
</head>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
```

Без viewport мобільні браузери припускають, що сторінка має 980px ширини, і зменшують її для вписування в екран. Користувач бачить стислий, нечитабельний макет. Я не раз бачив, як цей баг минає локальне тестування і виявляється лише на реальних телефонах під час QA. Google також знижує рейтинг через mobile-first індексацію.

**Charset не на початку документа**

```html

<head>
  <title>Мій сайт</title>
  <meta charset="UTF-8" />
</head>

<head>
  <meta charset="UTF-8" />
  <title>Мій сайт</title>
</head>
```

Специфікація HTML вимагає charset у перших 1024 байтах. Якщо браузер зустрічає не-ASCII символи до того, як прочитав charset, він вгадує кодування. Зазвичай неправильно.

**Очікування SEO-ефекту від keywords**

```html

<meta name="keywords" content="навушники, бездротові, аудіо" />

<meta name="description" content="Бездротові навушники з активним шумоподавленням" />
```

Google перестав враховувати тег keywords приблизно у 2009 році через спам. Додавати його сьогодні - не означає отримати жодного результату. Краще зосередитись на `description` і якісному тексті сторінки.

**Відсутні розміри og:image**

```html

<meta property="og:image" content="https://example.com/image.jpg" />

<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
```

Пропорція 1200x630 - стандарт для карток у соціальних мережах. Без розмірів Facebook і LinkedIn можуть обрізати зображення дивним чином.

### Де зустрічається в реальних проектах

- React/Next.js - `next/head` або `react-helmet` для динамічного встановлення мета тегів на кожному роуті (сторінки продуктів отримують унікальні `og:image` і `description` на основі даних роуту)
- Express/Node.js - сервер рендерить мета теги в HTML-шаблоні на основі даних поточного роуту
- Статичні генератори сайтів (Hugo, Jekyll) - front matter задає значення, генератор підставляє їх у `<head>` під час білду
- Тестові середовища - `<meta name="robots" content="noindex" />` тримає тестові URL поза Google

### Питання на співбесіді

**Q:** Чому charset має бути в перших 1024 байтах?
**A:** Браузер починає декодувати байти одразу, ще до завантаження всього файлу. Якщо він зустрічає не-ASCII символи до charset, то вгадує кодування. Специфікація HTML зафіксувала цю межу на 1024 байтах.

**Q:** Якщо я додам `<meta name="robots" content="noindex" />`, Google одразу видалить сторінку?
**A:** Ні. Google враховує тег під час наступного краулінгу, але сторінки, що вже в індексі, можуть залишатись там ще кілька тижнів. Для швидкого видалення використовуй інструмент "Remove URL" у Google Search Console.

**Q:** Яка різниця між `og:type="product"` і `og:type="article"`?
**A:** Тип підказує соціальним платформам, який шаблон картки використати. Для product можна показати ціну й наявність. Для article - дату публікації та автора. Facebook рендерить попередній перегляд по-різному залежно від цього значення.

**Q:** Як керувати мета тегами в React SPA, де контент змінюється без перезавантаження сторінки?
**A:** `react-helmet` або `next/head` оновлює `<head>` при зміні роуту. Але для соціального шерингу цього замало: боти соцмереж бачать початковий HTML, а не React-стан. Потрібен server-side rendering або static generation, щоб кожен роут повертав унікальні мета теги прямо в HTML-відповіді.

## Приклади

### Базове налаштування head сторінки

```html
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Купи преміальні бездротові навушники з акумулятором на 30 годин." />
  <title>Бездротові навушники - AudioShop</title>
</head>

```

### Сторінка продукту з шерингом у соцмережах

```html
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Преміальні бездротові навушники з акумулятором на 30 годин. Безкоштовна доставка від $50." />

<meta property="og:title" content="Pro Wireless Headphones - $199" />
  <meta property="og:description" content="Преміальний звук, 30 годин роботи, шумоподавлення" />
  <meta property="og:image" content="https://example.com/headphones.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:url" content="https://example.com/products/headphones-pro" />
  <meta property="og:type" content="product" />

<meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Pro Wireless Headphones" />
  <meta name="twitter:image" content="https://example.com/headphones.jpg" />
</head>

```

Коли хтось поширює це посилання у Facebook, Facebook сам робить HTTP-запит до сторінки, зчитує ці теги і будує картку попереднього перегляду. JavaScript з боку Facebook не потрібен.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати1130 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.