Open Graph в WordPress — настройка мета‑тегов

Быстрые ссылки

Что такое Open Graph
Добавление тегов вручную в PHP
Настройка через плагин

Что такое Open Graph

Open Graph — открытый протокол мета‑тегов, появившийся в Facebook и широко принятый многими платформами. Он сообщает социальной сети, какое изображение, заголовок и описание показывать, когда пользователи делятся ссылкой на ваш сайт.

Пример базовой структуры HTML‑тегов, которые попадают в страницы:

Важно: в обычном статическом сайте можно вставлять такие теги напрямую в шаблон. В WordPress заголовок, картинка и описание должны заполняться динамически в зависимости от текущей записи или страницы.

Определение: Open Graph — набор мета‑тегов, которые управляют отображением ссылки в социальных сетях.

Когда добавлять вручную, а когда плагином

Вручную: вы хотите минимизировать зависимости от плагинов, контролировать разметку и добавить кастомную логику. Требует доступа к файлам темы и базовых навыков PHP.
Плагином: удобно на shared‑хостинге или при отсутствии навыков. Быстрое решение, но может добавить лишний функционал.

Совет: если вы поддерживаете несколько сайтов или хотите гибкость на уровне темы — добавляйте вручную. Для блогов без администрирования лучше плагин.

Добавление тегов вручную в PHP

Файлы, которые участвуют в генерации , зависят от темы. Обычно header.php вызывает wp_head(). Вместо правки header.php корректнее добавить функцию в functions.php вашей темы:

wordpress/wp-content/themes/theme/functions.php

Если вы не хотите редактировать файлы напрямую, можно временно использовать плагин Head, Footer, and Post Injections для вставки кода в , но это компромисс. Для чистоты решения лучше править functions.php.

Откройте файл functions.php в редакторе и добавьте функцию, которая подставляет OG‑теги. Полный пример функции (вставьте в конец файла темы):

function fb_opengraph() {

global $post;

if(is_single()) {

if(has_post_thumbnail($post->ID)) {

$img_src = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'medium');

} else {

$img_src = get_stylesheet_directory_uri() . '/img/opengraph_image.jpg';

}

if($excerpt = $post->post_excerpt) {

$excerpt = strip_tags($post->post_excerpt);

$excerpt = str_replace("", "'", $excerpt);

} else {

$excerpt = get_bloginfo('description');

}

?>

Что делает этот код (коротко):

Проверяет, является ли текущая страница отдельной записью (is_single()).
Если у записи есть миниатюра — использует её как og:image. Иначе — подставляет файл /img/opengraph_image.jpg в директории темы. Это значит, что вам нужно положить туда изображение по умолчанию.
Берёт excerpt записи, если он есть, иначе — описание сайта.
Вставляет стандартные OG‑теги в .

Важно: wp_get_attachment_image_src() возвращает массив, обычно первым элементом будет URL. В примере выше переменная $img_src может быть массивом — при необходимости извлеките $img_src[0].

Критерии приёмки

OG‑теги появляются в исходном HTML страницы (проверьте «Просмотр кода страницы»).
При шеринге соцсеть показывает ожидаемое изображение, заголовок и описание.
Для страниц без миниатюры отображается изображение по умолчанию.

Советы по картинкам

Минимальный рекомендуемый размер: 1200×630 px для корректного отображения в большинстве сетей.
Формат: JPEG или PNG. WebP поддерживается не на всех платформах при предварительном сканировании.
Храните изображение по умолчанию в wp-content/themes/ваша-тема/img/opengraph_image.jpg.

Alt: Пример файла functions.php в редакторе темы WordPress с местом для вставки OG‑функции

`Тонкости и распространённые ошибки`

Кэш: кешированные страницы и CDN могут показать старые мета‑теги. Очистите кеш сервера и CDN, затем используйте отладчик соцсети.
Соцсети кешируют превью ссылки. Для Facebook используйте Sharing Debugger (Sharing Debugger обновит кэш). Для Twitter — Card Validator.
Неправильный путь к изображению — частая причина отсутствия превью. Проверьте, что URL изображения доступен публично.
Если og:image содержит относительный путь, соцсети могут не загрузить картинку — всегда используйте абсолютный URL.

`Настройка через плагин`

Если вы предпочитаете плагин, ищите «Open Graph and Twitter Card Tags» или популярные SEO‑плагины, которые включают OG (Yoast SEO, All in One SEO). Плагин обычно автоматически добавляет теги и даёт настройки для:

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

Пример установки:

Установите и активируйте плагин «Open Graph and Twitter Card Tags».
Откройте его настройки и задайте текст для главной страницы, описание по умолчанию и загрузите дефолтное изображение.
Примените изменения и проверьте результат через отладчики соцсетей.

Alt: Список плагинов в админке WordPress с выделенным плагином Open Graph and Twitter Card Tags

Alt: Настройки плагина Open Graph — поля для заголовка, описания и загрузки дефолтного изображения

Плюсы плагина:

Быстро и просто.
Подходит для пользователей без доступа к файлам темы.

Минусы:

Может добавить лишние возможности и нагрузку.
Меньше контроля над конкретной разметкой.

`Отладка и проверки (шаг за шагом)`

Очистите кэш WordPress и CDN.
Откройте страницу и просмотрите исходный код: найдите теги .
Проверьте URL изображения — откройте в браузере.
Используйте инструменты: Facebook Sharing Debugger и Twitter Card Validator.
Если превью не обновляется — в отладчике нажмите “Scrape Again” (или аналог) для обновления кеша.

`Альтернативные подходы и расширения`

Использовать хуки WordPress: add_action('wp_head', 'your_function', 5) — позволяет подключать OG в теме или в небольшом плагине собственной разработки.
Для мультиязычных сайтов: хранить OG‑теги в полях ACF (Advanced Custom Fields) и выводить их в вашей функции.
Для сайтов на Headless WordPress: формируйте OG на стороне фронтенда (например, Next.js/React), но убедитесь, что серверный рендеринг содержит мета‑теги.

`Шаблоны и чек‑лист для публикации`

Чек‑лист перед публикацией статьи:

Есть миниатюра статьи (проверьте разрешение ≥1200×630).
Заголовок записи оптимизирован для соцсетей (короче 60 символов для удобного отображения).
Описание (excerpt) читается как тизер — 110–160 символов.
Проверено отображение в Facebook и Twitter через отладчики.
Очистили кеш сайта и CDN.

Шаблон дефолтных тегов (копируйте в functions.php и адаптируйте):

Замените %og_*% на переменные из PHP.

`Когда Open Graph не поможет`

Если соцсеть блокирует ваш сайт (например, по политике содержимого) — теги не изменят ситуацию.
Если изображение недоступно из публичной сети — соцсеть не сможет его скачать.
Если сайт генерирует мета‑теги через JavaScript на клиенте и соцсеть не рендерит JS — превью не появится.

`Роли и ответственность (кто что делает)`

Контент‑редактор: подготавливает заголовок и описание, выбирает миниатюру.
Веб‑разработчик: добавляет функцию в тему или настраивает плагин, обеспечивает абсолютные URL.
DevOps: очищает CDN/серверный кэш и проверяет доступность изображений.

`Рекомендации по безопасности и конфиденциальности`

Не вставляйте в OG‑теги персональные данные.
Убедитесь, что изображения не ссылаются на приватные ресурсы, требующие авторизации.

`Социальные подсказки (предпросмотр для поста)`

OG‑title (пример): Как настроить Open Graph в WordPress за 10 минут OG‑description (пример): Настройте мета‑теги для корректного превью в соцсетях — два метода: вручную через functions.php и через плагин.

Короткое объявление (100–200 слов):

Настройка Open Graph‑тегов гарантирует, что при публикации ссылки в Facebook, Twitter и других сетях будет красивый предпросмотр: корректное изображение, заголовок и описание. В статье показаны два подхода: правка functions.php для полного контроля и использование плагина для быстрого результата. Также есть чек‑лист и инструкции по отладке.

`Короткая сводка`

Open Graph делает ваши ссылки привлекательнее в соцсетях. Для WordPress лучше всего добавить динамические OG‑теги либо через functions.php, либо через надёжный плагин. Проверьте работу через отладчики соцсетей и очистите кэш.

Важное: всегда проверяйте абсолютность URL изображений и размер миниатюр.

Конец статьи.