Open Graph в WordPress: превью ссылок для соцсетей

Open Graph — набор meta-тегов (og:title, og:description, og:image и др.), по которым Facebook, VK, Telegram, LinkedIn и часть мессенджеров собирают превью ссылки. В WordPress теги либо ставит SEO-плагин, либо вы выводите их сами в <head>. Без нормальных OG шаринг выглядит как случайный title и «кривая» картинка.

Основные теги

  • og:title — заголовок карточки;
  • og:description — короткий текст под заголовком;
  • og:image — URL картинки превью;
  • og:url — канонический URL страницы;
  • og:type — обычно website или article.

Для X/Twitter часто добавляют ещё Twitter Cards (twitter:card, twitter:image) — многие SEO-плагины заполняют оба набора.

Ориентиры по размерам

ПараметрПрактика
Картинка og:imageлучше одна явная на URL
Рекомендуемый размероколо 1200×630 px
Минимумне мельче ~200×200
Заголовокукладывайтесь примерно в 60-70 символов
Описаниедо ~150-200 символов, суть в первых строках

Точные лимиты у площадок отличаются; безопасный путь — осмысленный title, 1-2 предложения description и горизонтальное изображение без мелкого текста.

Настройка через плагин (предпочтительно)

Самый спокойный вариант — SEO-плагин с блоком Social / Open Graph:

  • Yoast SEO — вкладка Social у записи, дефолты в SEO → Social;
  • Rank Math — Social meta у поста и в настройках;
  • All in One SEO — секция Social Networks / Open Graph.

Типичный порядок:

  1. включите Open Graph в настройках плагина;
  2. задайте сайт-wide title/description/image по умолчанию;
  3. у важной записи переопределите title, description и OG-image;
  4. проверьте, что в теме нет второго набора дублирующих og:* тегов.

Миниатюра записи (Featured Image) часто уходит в og:image, если отдельную OG-картинку не задали. Для лендингов лучше явно выбрать кадр 1200×630.

Описание: Excerpt и поля плагина

Если плагин берёт описание из excerpt — заполняйте «Отрывок» осмысленно, не копипастой первого абзаца на 1000 знаков. Надёжнее править description в meta-боксе SEO/Social: туда пишете короткий текст именно для превью.

Ручной вывод (тема / functions.php)

Без плагина можно повесить хук wp_head. Упрощённый пример (адаптируйте под тему, экранирование и свои поля):

add_action('wp_head', function () {
    if (!is_singular()) {
        return;
    }
    $title = wp_get_document_title();
    $desc  = has_excerpt() ? get_the_excerpt() : '';
    $url   = get_permalink();
    $img   = get_the_post_thumbnail_url(null, 'full');
    echo '<meta property="og:type" content="article" />' . "\n";
    echo '<meta property="og:title" content="' . esc_attr($title) . '" />' . "\n";
    echo '<meta property="og:url" content="' . esc_url($url) . '" />' . "\n";
    if ($desc) {
        echo '<meta property="og:description" content="' . esc_attr(wp_strip_all_tags($desc)) . '" />' . "\n";
    }
    if ($img) {
        echo '<meta property="og:image" content="' . esc_url($img) . '" />' . "\n";
    }
});

Не дублируйте теги, если уже активен Yoast/Rank Math: получите два og:title и непредсказуемое превью.

Проверка превью

  • Facebook Sharing Debugger — сброс кэша и разбор og:*;
  • VK / Telegram — часто кэшируют; после смены картинки нужен рефреш через отладчик площадки или время;
  • просмотр исходника страницы: в <head> должны быть ваши meta property=»og:…».

Частые ошибки

  • нет og:image или картинка отдаёт 404 / требует авторизацию;
  • относительный URL картинки вместо абсолютного https://…;
  • дубли meta от темы + плагина;
  • кэш CDN/плагина отдаёт старый head — сбросьте кэш после правок;
  • слишком длинный description: площадка обрежет посередине фразы.

Связь с SEO

OG напрямую не «поднимает позицию в Google», но влияет на CTR из соцсетей и мессенджеров: нормальное превью = больше переходов. Title/description для поиска и для OG могут отличаться: для шаринга пишите живее и короче, для сниппета поиска — по правилам SEO-плагина.

Кратко

Включите Open Graph в Yoast/Rank Math/AIOSEO, задайте дефолты сайта, для ключевых URL пропишите title, description и картинку 1200×630, проверьте debugger-ом и уберите дубли meta. Ручной код в теме — только если плагина нет и вы контролируете один источник тегов.


Комментарии загружаются…