Як додати мета-теги до WordPress: повний технічний посібник
Мета-теги — це HTML-елементи, розміщені всередині розділу <head> веб-сторінки, які передають структуровані метадані пошуковим системам і браузерам. Вони невидимі для відвідувачів сайту, але безпосередньо впливають на те, як сканери індексують ваш контент, як ваші сторінки відображаються у видачі пошукових систем (SERP), і як соціальні платформи відтворюють поширені посилання. Для будь-якого сайту на WordPress правильно налаштовані мета-теги — зокрема <meta name="description">, елемент <title>, теги Open Graph і канонічні підказки — є основою on-page SEO.
Цей посібник охоплює всі практичні методи додавання мета-тегів до WordPress: робочі процеси на основі плагінів для більшості користувачів, підходи на рівні коду для розробників і критичні технічні нюанси, які більшість посібників повністю оминають.
Що таке мета-теги і чому вони важливі для SEO у WordPress
Мета-тег — це самозакривний HTML-елемент, який існує виключно в <head> документа. Він не містить видимого вмісту, але передає машинозчитувані сигнали Googlebot, Bingbot, сканерам соціальних мереж і браузерним рушіям.
Найбільш релевантні для SEO мета-теги у WordPress:
<meta name="description">— текст сніпета, який Google може відображати в органічних результатах (практичний ліміт відображення — 150–160 символів, хоча Google часто переписує його)<title>— технічно не є елементом<meta>, але розглядається як такий в SEO-інструментах; найважливіший on-page сигнал ранжування<meta name="robots">— керує поведінкою індексування та переходу за посиланнями (index,noindex,follow,nofollow,noarchive,max-snippet)<meta property="og:*">— теги протоколу Open Graph для розгортання посилань у Facebook, LinkedIn і Slack<meta name="twitter:*">— теги Twitter Card для розширених попереджень на X/Twitter<link rel="canonical">— не є мета-тегом, але розміщується в<head>і запобігає розмиванню через дублювання контенту<meta name="viewport">— критично важливий для мобільного відтворення та показників Core Web Vitals
Поширена хибна думка: <meta name="keywords"> ігнорується Google з 2009 року і деякими іншими пошуковими системами активно використовується як сигнал спаму. Не заповнюйте його.
Метод 1: Використання SEO-плагіна (рекомендовано для більшості сайтів)
Управління мета-тегами за допомогою плагінів є правильним вибором за замовчуванням для WordPress. Він забезпечує динамічну генерацію тегів для кожного типу запису, таксономії та шаблону, що важко відтворити вручну без значної кастомної розробки.
1.1 Yoast SEO
Yoast SEO залишається найпоширенішим SEO-плагіном для WordPress з понад 10 мільйонами активних установок. Його перевага — інтеграція структурованих даних поряд зі стандартним управлінням мета-тегами.
Встановлення:
- Перейдіть до Плагіни > Додати новий в адміністративній панелі WordPress.
- Знайдіть
Yoast SEO. - Натисніть Встановити зараз, потім Активувати.
Додавання мета-тегів до запису або сторінки:
- Відкрийте будь-який запис або сторінку в блоковому або класичному редакторі.
- Прокрутіть до мета-блоку Yoast SEO під областю вмісту.
- Натисніть вкладку SEO.
- Відредагуйте поле SEO Title — Yoast попередньо заповнює його за допомогою шаблону (наприклад,
%%title%% %%sep%% %%sitename%%), який можна замінити для кожної сторінки окремо. - Напишіть Meta Description обсягом 150–160 символів. Лічильник символів у реальному часі та попередній перегляд SERP оновлюються миттєво.
- Натисніть Оновити або Опублікувати.
Загальносайтові налаштування за замовчуванням керуються в розділі SEO > Search Appearance, де можна незалежно задати шаблони заголовків для записів, сторінок, кастомних типів записів, категорій, тегів і архівів авторів.
Розширена конфігурація Yoast, яку більшість посібників оминає:
- У розділі SEO > Search Appearance > Content Types можна встановити для цілих типів записів значення
noindex— це необхідно для типів записів з тонким контентом, як-от відгуки або елементи портфоліо. - Yoast SEO > Tools > Bulk Editor дозволяє оновлювати заголовки та описи сотень записів без відкриття кожного окремо.
- Yoast за замовчуванням вставляє
<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">, що явно надає Google дозвіл використовувати повну довжину сніпета. Видалення цього може скоротити ваші сніпети у видачі.
1.2 All in One SEO (AIOSEO)
AIOSEO є сильною альтернативою, особливо для сайтів на WooCommerce, оскільки має нативну схему продуктів і поля SEO для окремих варіацій, яких Yoast не має у безкоштовній версії.
Встановлення:
- Перейдіть до Плагіни > Додати новий, знайдіть
All in One SEO. - Натисніть Встановити зараз, потім Активувати.
Додавання мета-тегів:
- Відредагуйте будь-який запис або сторінку.
- Прокрутіть до панелі AIOSEO Settings.
- На вкладці General налаштуйте SEO Title і Meta Description.
- Вкладка Advanced надає доступ до директив
robots, перевизначення канонічних URL і керування структурованими даними. - Натисніть Оновити або Опублікувати.
Перевага AIOSEO: Його TruSEO Score аналізує ваші мета-теги відносно цільового ключового слова в реальному часі, виявляючи проблеми на кшталт відсутності ключових слів у заголовку, надто коротких описів або дублювання мета-описів на різних сторінках — поширена технічна SEO-проблема на великих сайтах WordPress.
1.3 Rank Math
Rank Math здобув значну частку ринку завдяки щедрій безкоштовній версії, яка включає розмітку схем, моніторинг 404-помилок і управління перенаправленнями — функції, за які в конкуруючих плагінах потрібно платити.
Встановлення:
- Перейдіть до Плагіни > Додати новий, знайдіть
Rank Math. - Натисніть Встановити зараз, потім Активувати.
- Завершіть Setup Wizard — цей крок важливий, оскільки він налаштовує загальносайтові параметри за замовчуванням, підключає Google Search Console і встановлює типи схем за замовчуванням для кожного типу запису.
Додавання мета-тегів:
- Відредагуйте будь-який запис або сторінку.
- Відкрийте бічну панель Rank Math (блоковий редактор) або прокрутіть до мета-блоку (класичний редактор).
- На вкладці General задайте SEO Title і Meta Description.
- Вкладка Advanced надає керування мета-тегами
robotsдля кожного запису, включно з полямиnoindex,nofollow,noarchiveі канонічного URL. - Натисніть Оновити або Опублікувати.
Особливий випадок Rank Math: Якщо ви мігруєте з Yoast на Rank Math, скористайтеся вбудованим інструментом Import from Yoast у розділі Rank Math > Status & Tools > Database Tools. Пропуск цього кроку означає втрату всіх раніше написаних мета-описів і заголовків — значна втрата контенту на великих сайтах.
Таблиця порівняння плагінів
| Функція | Yoast SEO (безкоштовний) | AIOSEO (безкоштовний) | Rank Math (безкоштовний) |
|---|---|---|---|
| — | — | — | — |
| Мета-заголовок і опис | Так | Так | Так |
| Open Graph / Twitter Cards | Так | Так | Так |
| Мета `robots` для кожного запису | Так | Так | Так |
| Схема / структуровані дані | Базова (Article, Breadcrumb) | Базова | Розширена (20+ типів) |
| Керування канонічним URL | Так | Так | Так |
| SEO для WooCommerce | Платний додаток | Нативне (обмежене) | Нативне (обмежене) |
| Менеджер перенаправлень | Платний додаток | Платний | Безкоштовний |
| Інтеграція з Google Search Console | Так | Так | Так |
| Масовий редактор мета-тегів | Так | Так | Так |
| Імпорт з інших плагінів | Так | Так | Так |
Метод 2: Ручне додавання мета-тегів без плагіна
Ручні методи підходять для розробників, які створюють кастомні теми, headless-установки WordPress або сайти, де необхідно мінімізувати навантаження від плагінів. Вони вимагають знання PHP і хуків WordPress.
Критична передумова: Ніколи не редагуйте файли активної теми безпосередньо. Завжди використовуйте дочірню тему. Зміни у header.php або functions.php батьківської теми перезаписуються при кожному оновленні теми, мовчки видаляючи ваші мета-теги.
2.1 Пряме редагування header.php (статичні мета-теги)
Цей підхід додає однакові мета-теги на кожну сторінку — підходить лише для односторінкових сайтів або дуже специфічних випадків використання.
- Перейдіть до Зовнішній вигляд > Редактор файлів теми.
- Виберіть
header.phpзі списку файлів праворуч. - Знайдіть розділ
<head>і додайте теги перед закриваючим тегом</head>:
<meta name="description" content="Your site-wide meta description here.">
<meta name="robots" content="index, follow">- Натисніть Оновити файл.
Чому цей підхід майже завжди неправильний для багатосторінкових сайтів: Кожна сторінка міститиме однакові мета-описи, що Google розцінює як сигнал дублювання контенту і може застосувати санкції, згортаючи ваші сторінки у результатах пошуку. Використовуйте це лише якщо у вас односторінковий застосунок або є дуже вагома причина транслювати один глобальний опис.
2.2 Динамічні мета-теги через functions.php (рекомендований ручний метод)
Це правильний ручний підхід для розробників. Він підключається до wp_head і виводить контекстно відповідні мета-теги для кожного типу сторінки.
Відкрийте functions.php дочірньої теми і додайте:
function alexhost_custom_meta_tags() {
global $post;
if ( is_singular() && ! empty( $post ) ) {
// Use the manual excerpt if set, otherwise fall back to auto-excerpt
if ( has_excerpt( $post->ID ) ) {
$description = get_the_excerpt( $post->ID );
} else {
$description = wp_trim_words( get_the_content(), 30, '...' );
}
$description = wp_strip_all_tags( $description );
$description = esc_attr( $description );
echo '<meta name="description" content="' . $description . '">' . "n";
} elseif ( is_category() || is_tag() || is_tax() ) {
$term = get_queried_object();
$description = esc_attr( strip_tags( $term->description ) );
if ( ! empty( $description ) ) {
echo '<meta name="description" content="' . $description . '">' . "n";
}
} elseif ( is_home() || is_front_page() ) {
$description = esc_attr( get_bloginfo( 'description' ) );
echo '<meta name="description" content="' . $description . '">' . "n";
}
}
add_action( 'wp_head', 'alexhost_custom_meta_tags', 1 );Технічні примітки щодо цієї реалізації:
- Аргумент пріоритету
1уadd_actionзабезпечує раннє спрацювання вwp_head, до більшості виводу теми та плагінів.
wp_strip_all_tags() використовується замість strip_tags(), оскільки також видаляє вміст тегів script і style, а не лише самі теги.
esc_attr() санітизує вивід для запобігання XSS-ін’єкціям через вміст запису.
Гілка таксономії обробляє сторінки архівів категорій і тегів, які на сайтах WordPress часто залишаються без мета-описів — поширена прогалина в технічному SEO.
Ручне додавання тегів Open Graph (для попереджень при поширенні в соціальних мережах):
function alexhost_open_graph_tags() {
global $post;
if ( is_singular() && ! empty( $post ) ) {
$og_title = esc_attr( get_the_title( $post->ID ) );
$og_url = esc_url( get_permalink( $post->ID ) );
$og_description = esc_attr( wp_trim_words( wp_strip_all_tags( get_the_content() ), 30, '...' ) );
// Use featured image if available
if ( has_post_thumbnail( $post->ID ) ) {
$og_image = esc_url( get_the_post_thumbnail_url( $post->ID, 'large' ) );
} else {
$og_image = esc_url( get_template_directory_uri() . '/images/default-og.jpg' );
}
echo '<meta property="og:type" content="article">' . "n";
echo '<meta property="og:title" content="' . $og_title . '">' . "n";
echo '<meta property="og:description" content="' . $og_description . '">' . "n";
echo '<meta property="og:url" content="' . $og_url . '">' . "n";
echo '<meta property="og:image" content="' . $og_image . '">' . "n";
}
}
add_action( 'wp_head', 'alexhost_open_graph_tags', 2 );
2.3 Ручне додавання канонічного тегу
Канонічні теги запобігають проблемам дублювання контенту, які є ендемічними у WordPress через пагінацію, рядки запитів і кілька архівних переглядів, що обслуговують схожий контент.
function alexhost_canonical_tag() {
if ( is_singular() ) {
$canonical = esc_url( get_permalink() );
echo '<link rel="canonical" href="' . $canonical . '">' . "n";
}
}
add_action( 'wp_head', 'alexhost_canonical_tag', 3 );
Важливо: Якщо ви використовуєте SEO-плагін, не додавайте канонічні теги вручну. Плагін вже обробляє це, а дублювання канонічних тегів створює суперечливі сигнали для сканерів.
Метод 3: Легковагові плагіни для кастомних мета-тегів
Для сайтів, яким потрібне впровадження кастомних мета-тегів без повного навантаження SEO-пакету, спеціалізовані плагіни мета-тегів є прийнятним компромісом. Meta Tag Manager — найпоширеніший варіант у цій категорії.
Налаштування:
Перейдіть до Плагіни > Додати новий, знайдіть Meta Tag Manager.
Натисніть Встановити зараз, потім Активувати.
Перейдіть до Налаштування > Meta Tag Manager.
Натисніть Add Meta Tag і налаштуйте:
Name: Значення атрибута name або property (наприклад, description, og:image).
Content: Значення вмісту тегу.
Scope: Застосувати глобально або до конкретних типів записів, сторінок чи URL.
Натисніть Save Meta Tag.
Коли цей підхід має сенс: Якщо ви запускаєте headless або decoupled установку WordPress, де вивід на фронтенді повноцінного SEO-плагіна є нерелевантним, але вам все одно потрібно впроваджувати конкретні теги для API-споживачів або підказок сканерам, легковажний плагін на кшталт цього дозволяє уникнути завантаження тисяч рядків невикористаного коду SEO-плагіна.
Критичні технічні помилки, яких слід уникати
Ось проблеми, через які реалізації мета-тегів мовчки не спрацьовують або активно шкодять позиціям:
Дублювання мета-описів на різних сторінках — одна з найпоширеніших технічних SEO-помилок на сайтах WordPress. Вона виникає, коли плагін налаштований із глобальним шаблоном, але не написані перевизначення для окремих сторінок. Звіт Coverage у Google Search Console позначає це. Перевіряйте за допомогою інструменту сканування, як-от Screaming Frog або Sitebulb, до і після будь-якої реалізації мета-тегів.
Конфліктуючі плагіни, що виводять дублюючі теги <title>. Якщо header.php вашої теми містить жорстко закодований тег <title> І активний SEO-плагін, у вашому HTML буде два елементи title. Google зазвичай використовує перший, який може не бути SEO-оптимізованою версією. Перевірте вихідний код сторінки за допомогою Ctrl+U і знайдіть <title>, щоб переконатися, що він існує лише в одному екземплярі.
noindex випадково встановлений на продакшн-сторінках. WordPress має вбудоване налаштування в розділі Налаштування > Читання з міткою «Відмовити пошуковим системам в індексуванні цього сайту». Воно впроваджує <meta name="robots" content="noindex,follow"> на весь сайт. Його часто залишають увімкненим після розробки та роботи на стейджингу. Перевіряйте, що воно знято на кожному продакшн-сайті.
Мета-описи, що обрізаються через спеціальні символи. Лапки (") всередині атрибута content мета-опису порушать межу HTML-атрибута. Завжди санітизуйте вміст опису за допомогою esc_attr() у PHP або переконайтеся, що поле введення вашого SEO-плагіна видаляє або кодує ці символи.
Розміри зображень Open Graph. og:image повинен бути щонайменше 1200×630 пікселів. Зображення менші за 600×315 пікселів не відображатимуться як великі картки у Facebook і LinkedIn, що знижує показники переходів при поширенні в соціальних мережах.
Перевірка роботи мета-тегів
Після реалізації завжди перевіряйте вивід, перш ніж вважати завдання виконаним.
Перевірка вихідного коду в браузері:
curl -s https://yourdomain.com/your-page/ | grep -i '<meta|<title|canonical'
Ця команда отримує необроблений HTML і фільтрує лише відповідні елементи head, дозволяючи підтвердити наявність тегів і їх правильне форматування без браузера.
Google Search Console: Після публікації змін скористайтеся інструментом URL Inspection, щоб отримати живу версію сторінки. Вкладка rendered HTML показує саме те, що бачить Googlebot, включно з мета-тегами, впровадженими через JavaScript.
Дебагери Open Graph:
Facebook Sharing Debugger: developers.facebook.com/tools/debug/www.linkedin.com/post-inspector/cards-dev.twitter.com/validatorЦі інструменти також очищають кешований попередній перегляд для відповідних платформ, що необхідно після оновлення og:image або og:description.
Хостингова інфраструктура та продуктивність мета-тегів
Відтворення мета-тегів безпосередньо пов’язане з часом відповіді сервера. Якщо ваш сервер WordPress доставляє Time to First Byte (TTFB) понад 600 мс, Googlebot може перевищити час очікування до отримання повного розділу <head>, через що мета-теги можуть бути пропущені під час сканування. Це особливо актуально для середовищ спільного хостингу під великим навантаженням.
Для сайтів, де пріоритетом є SEO-продуктивність, правильно налаштоване середовище VPS Хостингу з PHP-FPM, OPcache і шаром кешування повних сторінок (Redis або Memcached) стабільно забезпечуватиме TTFB нижче 200 мс, гарантуючи надійний розбір мета-тегів сканерами при кожному відвідуванні.
Якщо ви керуєте кількома сайтами WordPress або потребуєте панелі керування для спрощення управління плагінами та редагування файлів теми в різних середовищах, VPS з cPanel надає звичний інтерфейс як для редагування файлів мета-тегів, так і для налаштування продуктивності на рівні сервера без необхідності знання командного рядка.
Для високонавантажених розгортань WordPress, де впровадження мета-тегів у масштабі (тисячі динамічно генерованих сторінок) не повинно вносити затримки, Виділені сервери усувають конкуренцію за ресурси, властиву спільним середовищам, надаючи повний контроль над конфігурацією PHP, кешуванням опкодів і доставкою через HTTP/2 або HTTP/3.
Сайти, що значною мірою залежать від органічного пошуку, також повинні переконатися, що їхній SSL-сертифікат дійсний і правильно налаштований, оскільки Google використовує HTTPS як сигнал ранжування, а прострочений або неправильно налаштований сертифікат змушує браузери повністю блокувати завантаження сторінок — роблячи всю оптимізацію мета-тегів нерелевантною. SSL-сертифікати слід розглядати як передумову, а не другорядне питання, у будь-якому SEO-орієнтованому розгортанні WordPress.
Якщо ваш сайт WordPress включає контактну форму, підписку на розсилку або компонент транзакційної електронної пошти, репутація електронної пошти вашого домену також впливає на те, як Google оцінює сигнали довіри до вашого сайту. Правильно налаштований Email Хостинг із записами SPF, DKIM і DMARC сприяє загальній картині авторитетності домену, що лежить в основі оцінок EEAT.
Матриця рішень: вибір правильного методу мета-тегів
| Сценарій | Рекомендований метод |
|---|---|
| — | — |
| Стандартний блог або бізнес-сайт на WordPress | Yoast SEO або Rank Math (безкоштовна версія) |
| Магазин WooCommerce з варіаціями товарів | AIOSEO (безкоштовний) або Yoast Premium |
| Розробка кастомної теми без навантаження від плагінів | Хук `functions.php` з `wp_head` |
| Односторінковий або майже статичний сайт на WordPress | Пряме редагування `header.php` (дочірня тема) |
| Headless WordPress / REST API / фронтенд на блоках | Легковажний плагін мета-тегів або кастомний REST-ендпоінт |
| Міграція з одного SEO-плагіна на інший | Спочатку скористайтеся інструментом імпорту цільового плагіна |
| Великий сайт з 1000+ сторінками, що потребують масового оновлення | Yoast Bulk Editor або функція масового редагування AIOSEO |
Технічний контрольний список ключових висновків
Перш ніж вважати реалізацію мета-тегів WordPress завершеною, перевірте кожен пункт цього списку:
- [ ] У відтвореному HTML існує лише один елемент
<title>(перевірте вихідний код сторінки) - [ ] Кожна сторінка, що індексується, має унікальний мета-опис від 50 до 160 символів
- [ ] Жоден мета-опис не дублюється на різних сторінках (перевірте за допомогою Search Console або сканера)
- [ ] Налаштування > Читання > «Відмовити пошуковим системам» знято на продакшні
- [ ]
<meta name="robots" content="noindex">відсутній на сторінках, призначених для індексування - [ ] Канонічні теги присутні і вказують на правильний пріоритетний URL
- [ ] Теги Open Graph (
og:title,og:description,og:image,og:url) присутні на всіх сторінках, призначених для поширення - [ ] Розміри
og:image— щонайменше 1200×630 пікселів - [ ] Відсутній конфліктуючий вивід мета-тегів від кількох активних SEO-плагінів
- [ ] TTFB нижче 600 мс для забезпечення надійного розбору вмісту
<head>сканерами - [ ] SSL дійсний і перенаправлення HTTPS налаштовані (HTTP URL у канонічних тегах порушують індексування)
- [ ] Зміни мета-тегів перевірено за допомогою інструменту URL Inspection у Google Search Console
FAQ
Чи використовує Google мета-опис як сигнал ранжування?
Ні. Google публічно заявив, що <meta name="description"> не впливає на ранжування. Його цінність є непрямою: добре написаний опис покращує показник переходів у видачі, а CTR є поведінковим сигналом, який з часом може впливати на ранжування. Google також часто переписує описи, беручи текст із тіла сторінки, який він вважає більш релевантним для запиту.
Чи можна мати кілька активних SEO-плагінів одночасно?
Не варто. Одночасний запуск Yoast SEO і Rank Math, наприклад, призведе до дублювання тегів <title>, дублювання мета-описів і конфліктуючих канонічних тегів у вашому HTML. Деактивуйте та видаліть будь-який попередній SEO-плагін перед активацією нового, і скористайтеся інструментом імпорту нового плагіна для міграції наявних мета-даних.
Як правильно встановити noindex на сторінці WordPress без плагіна?
Додайте наступне до functions.php дочірньої теми, замінивши умову на будь-яку логіку, що ідентифікує сторінки, які ви хочете виключити:
function alexhost_noindex_specific_pages() {
if ( is_page( 'thank-you' ) || is_page( 'privacy-policy' ) ) {
echo '<meta name="robots" content="noindex, follow">' . "n";
}
}
add_action( 'wp_head', 'alexhost_noindex_specific_pages' );Чому Google показує інший опис, ніж той, що я встановив?
Google переписує мета-описи приблизно в 60–70% випадків (за даними кількох масштабних досліджень). Він робить це, коли визначає, що уривок із тіла сторінки є більш релевантним для конкретного запиту, ніж ваш написаний опис. Найкращий спосіб пом’якшити це — писати описи, що тісно відповідають інформаційному наміру сторінки, і переконатися, що тіло сторінки містить чіткий, добре структурований контент, який Google може використати як запасний варіант.
Чи впливають мета-теги на відображення мого сайту WordPress у соціальних мережах?
Стандартні теги <meta name="description"> не використовуються соціальними платформами. Facebook, LinkedIn і Slack використовують теги Open Graph (og:description, og:image, og:title). Twitter використовує власні теги twitter:card і twitter:description. Усі основні SEO-плагіни автоматично генерують обидва набори. Якщо ви використовуєте ручну реалізацію, необхідно явно додати обидві родини тегів, як показано в прикладах functions.php.
