Необхідні мета-теги в HTML

HTML та CSS~4 хв читання

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

Теорія

TL;DR

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

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

html

<head>
  <meta charset="UTF-8" />
  <!-- Говорить браузеру, як декодувати байти файлу -->

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Запобігає зменшенню мобільної версії до ширини десктопу -->

  <meta name="description" content="Вивчи мета теги HTML для співбесіди" />
  <!-- З'являється як сніпет у результатах пошуку Google -->

  <meta property="og:title" content="Гід по мета тегам" />
  <meta property="og:image" content="https://example.com/preview.jpg" />
  <!-- Керує карткою попереднього перегляду у Facebook/LinkedIn -->
</head>

Ці чотири теги покривають кодування, мобільний вигляд, 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>

<!-- Правильно: charset першим -->
<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>
<!-- Результат: сторінка правильно відображається на мобільному, description з'являється у Google -->

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

html

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

  <!-- Open Graph для Facebook та LinkedIn -->
  <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" />

  <!-- Twitter Card -->
  <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 відображається фото продукту і ціна. Twitter показує велику картку. -->

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?