Open Graph в WordPress: как настроить красивые превью ссылок

Когда вы отправляете ссылку в Telegram, ВКонтакте или WhatsApp, мессенджер показывает карточку с заголовком, описанием и картинкой. Эти данные он берёт из метатегов Open Graph. Если их нет, превью получается случайным: обрезанный текст, логотип вместо обложки или вовсе ничего.

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

<meta property="og:type" content="article">
<meta property="og:title" content="Заголовок статьи">
<meta property="og:description" content="Короткое описание, до 200 символов">
<meta property="og:image" content="https://example.ru/wp-content/uploads/cover.jpg">
<meta property="og:url" content="https://example.ru/statya/">
<meta property="og:site_name" content="Название сайта">
<meta property="og:locale" content="ru_RU">

Для X (Twitter) добавляют ещё twitter:card со значением summary_large_image.

Картинка

• Размер 1200 на 630 пикселей, соотношение примерно 1,91 к 1.
• Формат JPG или PNG, вес до 1 МБ, чтобы мессенджеры успевали её загрузить.
• Важное держите в центре: разные площадки обрезают края по-разному.

В WordPress проще всего использовать миниатюру записи (обложку) как og:image.

Способ 1. SEO-плагин

Yoast SEO, Rank Math и The SEO Framework выводят Open Graph автоматически: берут заголовок, описание и обложку записи. В карточке записи можно задать отдельный заголовок и картинку для соцсетей. Это самый простой путь, особенно если плагин уже стоит. О The SEO Framework есть отдельная заметка.

Способ 2. Вручную через functions.php

Если SEO-плагина нет, теги можно вывести кодом в дочерней теме:

add_action( 'wp_head', function () {
    if ( ! is_singular() ) return;
    $post  = get_queried_object();
    $title = get_the_title( $post );
    $desc  = wp_strip_all_tags( get_the_excerpt( $post ) );
    $img   = get_the_post_thumbnail_url( $post, 'full' );
    printf( '<meta property="og:type" content="article">' . "\n" );
    printf( '<meta property="og:title" content="%s">' . "\n", esc_attr( $title ) );
    printf( '<meta property="og:description" content="%s">' . "\n", esc_attr( $desc ) );
    printf( '<meta property="og:url" content="%s">' . "\n", esc_url( get_permalink( $post ) ) );
    if ( $img ) printf( '<meta property="og:image" content="%s">' . "\n", esc_url( $img ) );
} );

Не используйте оба способа сразу, иначе теги задублируются.

Проверка

• Отладчик Facebook показывает, что видит парсер, и сбрасывает кэш.
• В Telegram кэш превью сбрасывает бот @WebpageBot.
• ВКонтакте сбрасывает кэш через метод pages.clearCache или просто через время.
• Посмотреть теги можно и в исходном коде страницы: ищите og:.

Частые проблемы

• Старая картинка в превью: площадка закэшировала её, сбросьте кэш.
• Картинка не показывается: слишком большая, указан относительный адрес или сайт закрыт от ботов.
• Дубли тегов от темы и плагина: отключите вывод в одном из мест.

Open Graph не влияет на позиции в поиске напрямую, но красивая карточка заметно повышает кликабельность ссылок. Остальные шаги продвижения описаны в заметке о SEO в WordPress.

Источники и ссылки