SEO-оптимізація метатегів: title, description, заголовки H1–H3

Метатеги — перше, що бачить і Google, і користувач. Title впливає на ранжування прямо, description — на клікабельність у пошуку. При цьому більшість сайтів досі мають дублі, порожні або обрізані мета — а це легкий приріст позицій без жодних посилань і технічних правок.

Тут — конкретні правила для кожного тегу, інструменти для аудиту, шаблони для масового редагування і пояснення meta robots та Open Graph. Якщо потрібен повний технічний аудит метатегів вашого сайту — дізнайтесь про SEO-просування від SEO-Factory.

Тег title: правила та помилки

Title — найважливіший SEO-елемент на сторінці після самого контенту. Google використовує його для розуміння теми сторінки і відображення у пошуковій видачі. Але є нюанс: з 2021 року Google може автоматично переписувати title, якщо вважає його нерелевантним вмісту. Це не означає, що писати title не потрібно — навпаки, грамотний title знижує ймовірність переписування.

Технічні параметри

• Довжина: 50–60 символів (включно з пробілами). Більше 60 — title обрізається у видачі.
• Ключове слово: на початку або в першій третині title. Слова на початку мають більшу вагу.
• Унікальність: кожна сторінка — свій title. Дублі — сигнал слабкої структури сайту для Google.
• Бренд: зазвичай додається в кінці через « | » або « — ».

Шаблони title за типом сторінки

Meta description: навіщо писати, якщо Google переписує

Meta description не впливає на ранжування прямо. Але добре написаний опис підвищує CTR у видачі — а CTR є непрямим сигналом для Google. Крім того, якщо description відповідає запиту, Google з більшою ймовірністю використає його, а не підтягне довільний уривок з тексту.

Параметри

• Довжина: 140–160 символів. Коротше — не використовується потенціал; довше — обрізається.
• Ключ: природно вписаний у перше речення. Google виділяє його жирним, якщо збігається із запитом.
• Заклик до дії: «дізнайтесь», «замовте», «перегляньте» — без жорсткого продажу.
• Унікальність: як і title — не копіювати між сторінками.

H1: один, точний, без повторів

H1 — головний заголовок сторінки. Він не дорівнює title, хоча часто плутають. Title — для пошукової видачі. H1 — для користувача на сторінці.

Правила для H1

• Один H1 на сторінку. Кілька H1 — не критична помилка, але Google може неправильно зрозуміти головну тему.
• Містить головний ключ або його природне перефразування.
• Не дублює title дослівно. Title — стислий і ключовий. H1 — розгорнутий і читабельний.
• Відповідає вмісту сторінки. Clickbait-заголовки, що не збігаються з контентом, — сигнал низької якості.

H2–H3: структура і вторинні ключі

Заголовки H2–H3 структурують контент для читача і допомагають Google зрозуміти підтеми сторінки. Вторинні ключі та LSI-терміни природно вписуються в H2–H3 без потреби перевантажувати основний текст.

• H2 — основні розділи статті або сторінки. Можна і потрібно включати середньочастотні ключі.
• H3 — підрозділи всередині H2-розділів. Питальні формати («Як…?», «Що таке…?») добре резонують з featured snippets.
• H4–H6 — для складних документів, не для типових комерційних сторінок.

Інструменти для аудиту метатегів

Ручна перевірка метатегів на великому сайті — нереалістична задача. Для ефективного аудиту використовують спеціалізовані інструменти, які сканують весь сайт і знаходять проблемні теги автоматично.

Screaming Frog SEO Spider

Найпопулярніший десктопний краулер для технічного SEO. Безкоштовна версія — до 500 URL, платна — необмежена кількість.

Як налаштувати і що шукати:

1. Запустіть Screaming Frog, введіть домен і натисніть Start. Дочекайтеся завершення сканування.
2. Перейдіть до вкладки Page Titles: відфільтруйте за «Missing» (порожні title), «Duplicate» (дублі), «Over 60 Characters» (задовгі), «Below 30 Characters» (задвороткі).
3. Перейдіть до вкладки Meta Description: аналогічно — Missing, Duplicate, Over 160 Characters, Below 70 Characters.
4. Вкладка H1: знайдіть сторінки без H1, з кількома H1 або дублями.
5. Експортуйте результати в CSV для зручної роботи в таблиці.

Google Search Console для аудиту метатегів

GSC не показує метатеги напряму, але дає важливу непряму інформацію:

• Performance → Search results → Pages: сторінки з низьким CTR при хорошій позиції (місця 3–8) — сигнал, що title або description неефективні. Ці сторінки — першочергові для переписування.
• Coverage: сторінки з помилками індексації часто пов'язані з проблемами в meta robots або canonical.
• Enhancements: якщо ви використовуєте структуровані дані — GSC покаже помилки розмітки, які впливають на сніпети.

Ahrefs Site Audit

Хмарний краулер від Ahrefs. Після сканування формує звіт із пріоритизованим списком проблем. Для метатегів шукайте розділ «On-page»: дублі title і description, відсутні теги, надто довгі або короткі значення. Зручний тим, що автоматично присвоює «важливість» кожній проблемі.

Покроковий алгоритм аудиту через GSC + Screaming Frog

Найефективніший підхід — комбінація GSC і Screaming Frog. Ось практичний алгоритм, який дає повну картину за 2–3 години навіть на великому сайті:

1. GSC → Performance → Сторінки: відсортуйте за кількістю показів. Відмітьте ТОП-50 сторінок за трафіком — вони мають бути пріоритетом для аудиту.
2. Виявіть сторінки з CTR нижче 2% при позиціях 4–10. Для них title або description неефективні — навіть невеликий перезапис може дати +0.5–1% CTR, що на сторінці з 10 000 показів щомісяця дорівнює сотням кліків.
3. Screaming Frog: завантажте список URL з GSC (Export → CSV) або просто просканувала весь домен. Порівняйте title з GSC-даними: для сторінок, де Google переписав title (він відрізняється від вашого оригіналу), — розгляньте перероблення.
4. Фільтр «Title Modified by Google» у Screaming Frog (версія 19+) показує саме ті сторінки, де Google замінив title власною версією. Це прямий сигнал: ваш title не відповідав контенту або був нерелевантним.
5. Пріоритизуйте: спочатку виправляйте сторінки з найбільшим трафіком і найнижчим CTR — це найкращий ROI на витрачений час.

Масове редагування метатегів у CMS

На сайтах із сотнями або тисячами сторінок ручне редагування кожного title — нереалістично. Використовуйте шаблони та batch-редагування у вашій CMS.

WordPress + Yoast або Rank Math

У Yoast SEO і Rank Math є функція шаблонів title і description. Ви задаєте формулу, яка автоматично генерує мету на основі змінних:

• %%title%% — назва поста або сторінки
• %%category%% — категорія
• %%sitename%% — назва сайту
• %%sep%% — роздільник (|, —, тощо)

Приклад шаблону для категорій WooCommerce: %%title%% — купити онлайн | %%sitename%%. Для постів блогу: %%title%% | %%sitename%%.

Bulk editor у Yoast (розділ SEO → Tools → Bulk editor) дозволяє переглянути і редагувати title та description всіх сторінок у єдиному списку — без відкриття кожного поста окремо.

OpenCart

У OpenCart метатеги прописуються на рівні кожного товару, категорії та статичної сторінки. Для масового редагування зручно використовувати модулі імпорту/експорту (наприклад, через CSV або розширення типу SEO Bulk Editor). Схема роботи: експортували таблицю з назвами і поточними метатегами → відредагували в Excel → імпортували назад.

Найчастіша помилка в OpenCart: title категорії залишається автоматично генерованим із назви категорії без ключа і бренду. Перевіряйте це першочергово.

Bitrix

У 1C-Bitrix метатеги редагуються в розділі «Властивості елементу» кожного матеріалу або товару. Для масової заміни використовується агент або компонент bulk-редагування через адмін-панель або через API. Для великих каталогів рекомендується скрипт або модуль batch-імпорту.

Open Graph і Twitter Card

Open Graph (OG) і Twitter Card — метатеги, які визначають, як сторінка виглядає при поширенні в соціальних мережах і месенджерах. Вони не впливають на SEO-ранжування прямо, але критично важливі для CTR при поширенні в Facebook, Telegram, LinkedIn та Twitter/X.

Основні Open Graph теги

• og:title — заголовок, який відображається при шерингу. Може відрізнятися від SEO-title: тут можна бути більш «зачіпним».
• og:description — опис під заголовком. 150–300 символів.
• og:image — зображення для превью. Рекомендований розмір: 1200×630 px. Файл не більше 8 МБ.
• og:url — канонічний URL сторінки.
• og:type — тип контенту: website, article, product.

Приклад повного блоку Open Graph у HTML

<meta property="og:title" content="SEO-оптимізація метатегів: title, description, H1–H3">
<meta property="og:description" content="Конкретні правила для кожного тегу, інструменти аудиту і шаблони для масового редагування. Чеклист 10 найчастіших помилок.">
<meta property="og:image" content="https://seo-factory.com.ua/images/metategi-preview.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://seo-factory.com.ua/blog/seo-metategi/">
<meta property="og:type" content="article">
<meta property="og:locale" content="uk_UA">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="SEO-оптимізація метатегів: title, description, H1–H3">
<meta name="twitter:image" content="https://seo-factory.com.ua/images/metategi-preview.jpg">

Зверніть увагу на og:locale — для україномовних сторінок вкажіть uk_UA. Facebook використовує його для визначення мови, в якій відображати кнопки та підписи в блоці шерингу. Також рекомендується додати og:image:width і og:image:height — без них Facebook або LinkedIn можуть довше обробляти превью або вибрати неправильний розмір.

Як перевірити OG-теги перед публікацією

• Facebook Sharing Debugger (developers.facebook.com/tools/debug) — показує, як виглядає сторінка у Facebook і дозволяє скинути кеш превью після оновлення OG-тегів.
• LinkedIn Post Inspector (linkedin.com/post-inspector) — аналогічно для LinkedIn.
• Telegram — просто відправте посилання в будь-який чат і перевірте превью вручну. Telegram кешує превью на короткий час.
• Screaming Frog → вкладка Custom Extraction: налаштуйте виймання og:title, og:description, og:image і перевірте весь сайт одночасно.

Twitter Card

Twitter (тепер X) використовує власні теги, але якщо вони відсутні — підтягує OG-дані. Основний тег: twitter:card з типом summary_large_image — показує велике зображення, підвищує впізнаваність публікації. Розмір зображення для Twitter: 1200×628 px.

Якщо на сторінці немає og:image або зображення неправильного розміру, Facebook і Telegram підберуть будь-яку картинку зі сторінки або взагалі покажуть посилання без превью. Це різко знижує клікабельність у соцмережах.

Meta robots і canonical

Meta robots і canonical — два теги, які управляють тим, як пошукові роботи взаємодіють зі сторінкою. Неправильне їх використання може закрити від індексації важливі сторінки або призвести до «розтікання» ваги між дублюючими URL.

Meta robots: index/noindex і follow/nofollow

Тег <meta name="robots" content="..."> у <head> сторінки дає пошуковому боту інструкцію. Основні значення:

• index, follow — (за замовчуванням) індексуй сторінку і переходь за посиланнями. Не потрібно прописувати явно.
• noindex, follow — не індексуй сторінку, але переходь за посиланнями. Для: сторінок пагінації, особистих кабінетів, сторінок кошика, дублікатів контенту.
• noindex, nofollow — повна ізоляція від пошукових роботів. Для: адмін-панелей, внутрішніх сервісних сторінок.
• index, nofollow — рідко використовується. Для сторінок із посиланнями на сумнівні ресурси, де ви не хочете передавати вагу.

Canonical: який URL вважається основним

Canonical-тег (<link rel="canonical" href="URL">) повідомляє Google, яка версія сторінки є «оригінальною», коли існує кілька URL з ідентичним або дуже схожим контентом.

Різниця між noindex і canonical

Це не взаємозамінні інструменти. Noindex — виключає сторінку з індексу, але не вирішує питання дублікатів і розподілу ваги посилань. Canonical — каже Google «ось оригінал», не видаляючи дублюючу сторінку з індексу відразу. Для сторінок із параметрами краще canonical; для службових сторінок, яким у індексі взагалі не місце, — noindex.

X-Robots-Tag у HTTP-заголовках

Окрім тегу <meta name="robots"> у HTML, можна передавати директиви роботам через HTTP-заголовок X-Robots-Tag. Це особливо корисно для нетекстових файлів (PDF, зображення, документи), де додати мета-тег неможливо:

X-Robots-Tag: noindex, nofollow

Налаштовується у конфігурації сервера (Apache .htaccess або nginx) або через PHP/серверну мову. Якщо ваш сайт генерує PDF-прайси або каталоги і ви не хочете, щоб вони потрапляли в пошук — X-Robots-Tag є правильним рішенням.

Метатеги в SPA та JavaScript-сайтах

Якщо ваш сайт побудований на React, Vue або Angular і рендерить контент на клієнтській стороні, метатеги потребують особливої уваги. За замовчуванням Googlebot може не побачити title і description, якщо вони проставлені через JavaScript після завантаження сторінки — бот отримає HTML з порожніми тегами до того, як скрипти виконаються.

Рішення — Server-Side Rendering (SSR) або Static Site Generation (SSG): Next.js, Nuxt.js, Gatsby, SvelteKit дозволяють прописувати метатеги на сервері до відправки HTML клієнту. Альтернативно — бібліотеки типу react-helmet або vue-meta дають змогу динамічно керувати <head>, але для SEO важливо, щоб ці теги були присутні у rendered HTML, який отримує Google. Перевіряйте через GSC → Інструмент перевірки URL → Переглянути сторінку: якщо title у rendered HTML відрізняється від того, що показано у вихідному коді — є проблема.

Практичні шаблони title і description

Замість того, щоб щоразу думати «з чого почати», використовуйте перевірені шаблони. Нижче — готові формули для різних типів сторінок.

Шаблони — стартова точка, а не жорстке правило. Адаптуйте їх під специфіку вашого бізнесу, ніші і конкурентного середовища. Головне — ключ на початку title і чіткий інтент у description.

Чеклист: 10 помилок у метатегах

Ось найпоширеніші помилки, які ми бачимо під час аудитів сайтів клієнтів. Кожна — легко виправляється:

Аудит метатегів — це не разова акція. При додаванні нових сторінок, зміні структури або оновленні семантики метатеги треба переглядати разом із контентом.

Структуровані дані та їх вплив на сніпети

Структуровані дані (schema.org розмітка) не є метатегами в класичному розумінні, але безпосередньо впливають на те, як виглядає ваш сніпет у пошуковій видачі. Rich results — зірки рейтингу, ціна, хлібні крихти, FAQ — зроблять ваш результат помітнішим за сусідів, навіть якщо позиція однакова.

Найважливіші типи розмітки для комерційних сайтів:

• Product — ціна, рейтинг, наявність для карток товарів. Зірки рейтингу в SERP підвищують CTR на 15–30%.
• FAQ — розгортає два-три питання прямо під сніпетом. Збільшує видиму площу результату в SERP без підняття позиції.
• BreadcrumbList — показує ієрархію сайту в URL-рядку сніпета. Підвищує довіру і CTR.
• Article — для статей блогу: дата публікації, автор. Google News використовує цей тип для відображення у блоці новин.
• LocalBusiness — адреса, години роботи, телефон. Критично для локального SEO.

Перевіряйте коректність розмітки через Rich Results Test від Google — він показує, які rich results доступні для сторінки і чи немає помилок у розмітці. GSC → Покращення також відображає помилки Schema, що потребують виправлення.

Пріоритизація метатегів: з чого починати

Типова ситуація після аудиту: Screaming Frog показує 200 дублів title, 150 порожніх description і 80 сторінок без H1 — і незрозуміло, за що братися першим. Проста матриця пріоритетів:

1. Порожні title на сторінках з трафіком — найвищий пріоритет. Google підставляє H1 або URL замість title, що погіршує відображення у видачі та знижує CTR.
2. Дублі title на ключових сторінках — призводять до канібалізації. Google не розуміє, яку сторінку показувати в пошуку.
3. Порожні description на сторінках з позицією 4–10 — тут найбільший потенціал зростання CTR від переписування.
4. Задовгі title (понад 60 символів) — Google обрізає їх у видачі, часто в найважливішому місці.
5. Open Graph і canonical — після того, як базові метатеги в порядку.

Часті запитання

Скільки символів має бути в title сторінки?

Оптимальна довжина title — 50–60 символів (до 600px у пікселях). Google обрізає довші заголовки в сніпеті. Ключове слово розміщуй на початку, бренд — наприкінці через роздільник: «Купити iPhone 15 в Україні | Назва магазину».

Чи переписує Google meta description?

Так, Google переписує meta description приблизно у 70% випадків — підбирає фрагмент тексту зі сторінки, який найточніше відповідає запиту. Попри це, писати description варто: він показується коли запит збігається, впливає на CTR і є сигналом релевантності.

Чи може бути кілька H1 на сторінці?

Технічно HTML5 дозволяє кілька H1, але SEO-практика — один H1 на сторінку. Google офіційно каже що кілька H1 не шкодять, але один чіткий H1 краще структурує сторінку і дає ясний сигнал про головну тему.

Що таке canonical тег і навіщо він потрібен?

Canonical (<link rel="canonical">) вказує Google яка версія сторінки є основною при наявності дублів. Наприклад: сторінка доступна через HTTP і HTTPS, або з параметрами UTM і без — canonical вказує на «правильну» URL і консолідує на неї весь PageRank.