Стандарт OpenGraph долгое время существует, как микроформат в верстке и в основном использовался для передачи данных о контенте для социальных сетей. Когда кто-то решил перепостить вашу статью в VK, Twitter или Facebook, то заголовок, картинка и кусок текста формируется из содержимого статьи. Иногда это происходит быстро и правильно, а иногда вместо заголовка показывается техническая информация для браузера.
Так вот, чтобы избежать такой путаницы, рекомендуется прописывать заголовок, описание и ссылку на картинку внутри og тегов. Ниже пример, как это должно выглядеть в шапке кода страницы.
<meta property="og:title" content="Улучшение встроенного sitemap в WordPress 6.5" />
<meta property="og:description" content="Неожиданный позитивный отзыв сделал сотрудник поискового департамента Google в адрес движка WordPress 6.5, в частности, об обновлении функционала sitemap.xml" />
<meta property="og:image" content="https://antijeans.com/wp-content/uploads/2020/12/page_featured_wp2.jpg" />А в августе 2024 упоминание тега og:title вдруг появилось в рекомендациях для веб-мастеров в справочниках Google. Это означает, что поисковый алгоритм сканирует этот параметр при обходе страниц, но нет точного понимания, насколько серьезно он его учитывает при формировании сниппета в выдаче.
В любом случае, добавить три строчки кода в head не так сложно и не требует никаких плагинов. Давайте покажу, как это сделать в файле functions.php.
Здесь у нас уже есть настройка тега description, который является ключевым в требованиях Яндекс Вебмастера. Подробнее о том, как настроить description для WordPress читайте в этой статье. Она пригодится, так как там объясняется где мы можем прописать description без плагинов, и потом доставать его. Это можно сделать в окошке excerpt.
А чтобы все это появилось внутри тегов <head></head> следует использовать хук php и желательно исключить заглавную страницу сайта, для которой я пропишу статический title.
<?php function hook_links() {
if (is_page(1111)) { // тут в скобках пишем id вашей главной страницы
?>
<meta property="og:title" content="Сайт о велопутешествиях минималиста - на велосипеде по России и странам мира" />
<?php }
else {
?>
<meta property="og:title" content="<?php echo get_the_title(); ?>" />
<meta property="og:description" content="<?php if ( is_single() || is_page() ) {
echo strip_tags(apply_filters( 'the_excerpt', get_the_excerpt() ));
} else {
bloginfo('name'); echo " - "; bloginfo('description');
}
?>" />
<?php if (has_post_thumbnail()) { ?>
<meta property="og:image" content="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'large'); ?>" />
<?php }
}
add_action('wp_head', 'hook_links', 1);
?>Сохраняем, проверяя количество парных фигурных скобок, чтобы не создать ошибку.
Теперь открываем любой пост вашего блога и смотрим наличие тегов og:tag в коде страницы. Если теги появились и они не пустые, то вы все сделали правильно.