Как добавить уникальный метатег Open Graph (OG) в WordPress для квизов

Автор: Олеся Волкова | Опубликовано: 05.06.2026

Зачем нужен уникальный метатег Open Graph для квизов в WordPress

Метатеги Open Graph (OG) отвечают за корректное отображение ссылок на ваш контент в социальных сетях (Facebook, VK, Twitter и др.). Для квизов важно, чтобы при шаринге отображалось уникальное превью с правильным заголовком, описанием и изображением. Без уникальных OG-тегов соцсети могут брать данные по умолчанию с главной страницы сайта или неактуальные данные, что снижает вовлечённость пользователей.

Диагностика проблемы: как проверить отсутствие или дублирование OG-тегов для квизов

Проверьте исходный код страницы с квизом (CTRL+U в браузере) и найдите метатеги, начинающиеся с <meta property="og:. Если метатеги отсутствуют или они одинаковые на всех страницах квиза, значит проблема есть. Также можно воспользоваться инструментом Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/): вставьте URL страницы квиза и посмотрите, какие OG-теги получит Facebook.

Типичные признаки проблемы

При публикации ссылки в соцсетях отображается заголовок главной страницы или сайта вместо названия квиза.
Отсутствует уникальное изображение, показывается дефолтное лого сайта.
Описание в превью не соответствует содержимому квиза.

Пошаговое решение: добавляем уникальные OG-теги для квизов через functions.php

Для примера рассмотрим, что квизы — это отдельный тип записи quiz. Если у вас другой тип, замените в коде соответствующее значение.

function add_quiz_open_graph_tags() {
    if (is_singular('quiz')) {
        global $post;

        $title = get_the_title($post->ID);
        $description = get_post_meta($post->ID, '_quiz_description', true);
        if (empty($description)) {
            $description = wp_strip_all_tags(get_the_excerpt($post->ID));
        }

        $image_id = get_post_thumbnail_id($post->ID);
        if ($image_id) {
            $image_url = wp_get_attachment_image_url($image_id, 'full');
        } else {
            $image_url = get_template_directory_uri() . '/images/default-quiz-image.jpg';
        }

        echo "<meta property=\"og:title\" content=\"" . esc_attr($title) . "\" />\n";
        echo "<meta property=\"og:description\" content=\"" . esc_attr($description) . "\" />\n";
        echo "<meta property=\"og:type\" content=\"article\" />\n";
        echo "<meta property=\"og:image\" content=\"" . esc_url($image_url) . "\" />\n";
        echo "<meta property=\"og:url\" content=\"" . esc_url(get_permalink($post->ID)) . "\" />\n";
    }
}
add_action('wp_head', 'add_quiz_open_graph_tags');

Объяснение:

Проверяем, что мы на странице отдельного квиза (custom post type 'quiz').
Берём заголовок и описание (сначала из метаполя, затем из excerpt).
Получаем миниатюру записи; если нет, подставляем дефолтное изображение из темы.
Выводим нужные OG-теги в <head>.

Добавление описания в админке квиза

Если хотите добавить поле «Описание квиза» для метатега, используйте следующий код в functions.php:

function quiz_add_custom_meta_box() {
    add_meta_box('quiz_description_meta', 'Описание квиза для OG', 'quiz_description_meta_callback', 'quiz', 'normal', 'high');
}
add_action('add_meta_boxes', 'quiz_add_custom_meta_box');

function quiz_description_meta_callback($post) {
    wp_nonce_field('quiz_save_description', 'quiz_description_nonce');
    $value = get_post_meta($post->ID, '_quiz_description', true);
    echo '<textarea style="width:100%;" rows="4" name="quiz_description">' . esc_textarea($value) . '</textarea>';
}

function quiz_save_description($post_id) {
    if (!isset($_POST['quiz_description_nonce']) || !wp_verify_nonce($_POST['quiz_description_nonce'], 'quiz_save_description')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (isset($_POST['quiz_description'])) {
        update_post_meta($post_id, '_quiz_description', sanitize_text_field($_POST['quiz_description']));
    }
}
add_action('save_post', 'quiz_save_description');

Проверка результата после внедрения

Откройте страницу с квизом в браузере, нажмите CTRL+U и убедитесь, что в <head> появились уникальные OG-теги.
Используйте Facebook Sharing Debugger для проверки корректного отображения (очистите кеш с помощью функции «Scrape Again»).
Проверьте отображение превью в других соцсетях (VK, Telegram и т.д.).

Частые ошибки и как их исправить

OG-теги не отображаются: проверьте, что функция подключена через add_action('wp_head', ...) и что условие is_singular('quiz') корректно. Возможно, тип записи отличается.
Изображение не подгружается: убедитесь, что у квиза есть миниатюра. Если нет, проверьте путь к дефолтному изображению.
Описание пустое: добавьте метаполе или используйте the_excerpt, при необходимости прописывайте вручную.
Кеш соцсетей мешает обновлению: используйте инструменты дебага (Facebook Debugger) для очистки кеша OG-данных.

Практические советы по производительности и безопасности

Не используйте тяжелые запросы в wp_head, чтобы не замедлять загрузку страниц.
Для больших сайтов с сотнями квизов рассмотрите кэширование OG-тегов с помощью Transients API.
Всегда экранируйте вывод (esc_attr, esc_url), чтобы избежать XSS-уязвимостей.
Если используете SEO-плагины (Yoast, Rank Math), убедитесь, что их настройки не конфликтуют с вашим кодом.

Сравнение способов добавления OG-тегов для квизов

Метод	Плюсы	Минусы	Когда использовать
Код в functions.php (ручной)	Гибкость, контроль, нет плагинов	Требует навыков, поддержка на вас	Специальный кастомный тип записи, минимальное количество квизов
SEO-плагины (Yoast, Rank Math)	Автоматизация, дополнительные функции SEO	Могут не поддерживать кастомные поля, конфликт с кастомным кодом	Если уже используете SEO-плагины, хотите простой вариант
Плагины для Open Graph	Простая настройка без кода	Могут перегружать сайт, ограниченная кастомизация	Новички, если не хотите писать код