Что такое Open Graph? как подключить протокол Open Graph к WordPress

Разрешим вопрос о том, что такое есть протокол Open Graph (Опен Граш), и как его подключить с своему сайту на Вордпресс посредством плагинов, или реализуем этот функционал “og” при помощи простенького кода.

Сегодня невозможно себе представить сайт, на котором не реализована поддержка Open Graph – и это значит, что, если пользователь решил поделиться некой вашей публикацией, то при выводе её в ленте, к примеру, Фейсбука, анонс появляется с какими-то несоответствующими картинками, либо вовсе без миниатюры.

Всё дело в том, что Фейсбук и пр. соцсети, не имея данных Open Graph, будут выхватывать первое попавшееся изображение сайта. Скажем прямо: выглядит всё это неряшливо и, как следствие, вызывает у пользователей недоверие к сайту – а это потеря клиентов, продаж… и попросту – прибыли!

Вряд ли стоит толковать о том, что оптимизация сайта под социальные сети давным-давно является неотъемлемой частью веб разработки.

…ну… давайте поподробнее…

 

 

 

 

 

 

 

 

оптимизация сайта под социальные сети – Open Graph

 

 

 

 

 

 

Если говорить не распыляясь, то техническая составляющая задачи SMO (а по теме этого поста – Open Graph) направлены на то, чтобы:

 

 

1 – дать возможность посетителю как можно легче делиться понравившимся контентом (как добавить на сайт кнопки социальных сетей кнопку поделиться
Как установить на страницы сайта кнопки социальных сетей – подробная инструкция)…

 

2 – сделать так, чтобы анонс публикации был максимально приближен к задумке автора (выгода со всех сторон))

 

 

 

 

как подключить Open Graph к WordPress при помощи плагинов

 

 

 

 

В Вордпресс подключить Open Graph возможно несколькими способами: при помощи специальных плагинов, либо кодом… либо же (как умудряются многие) обоими вариантами: что весьма неверно!

 

 

Для тех админов, которые особенно не морочатся тонкой работой с сайтом, предлагаю, как 1-й вариант – специализированные плагины с поддержкой Open Graph.

 

 

конкретные плагины:

 

WP Facebook Open Graph protocol;

Open Graph.

 

 

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

 

это:

 

Yoast SEO;

All in One SEO Pack.

 

 

 

Всказываясь прямо, я, на своих сайтах, не использую функции поддержки Open Graph в плагинах Yoast SEO или там в All in One SEO Pack – не очень люблю многофункциональные плагины, использую их только в основном конкретном функционале.

 

К сожалению, многие социальные сети очень часто некорректно распознают расшариваемый контент (либо валидаторы указывают на возникшие ошибки).

 

Хотя, в общем, ничего против плагинов не имею… и, скорее, ЗА! нежели супротив) – просто, не всё и не всегда целесообразно реализовывать при помощи плагинов.

 

 

 

 

 

как подключить Open Graph к WordPress с помощью кода

 

[sssy]

 

 

 

 

 

 

Добавьте этот код в файл functions.php активного шаблона (также можно прописать данные строки в какой-то личный плагин, созданный для этих целей – как такой плагин /или добавочный файл функций/ создать, описано в этой статье):

 

 

/* добавим Open Graph в WordPress */
add_action('wp_head', 'insert_ss_fb_in_head', 5 );
function insert_ss_fb_in_head() {
global $post;
if (!is_singular())
return;
//echo '<meta property="fb:admins" content="Ваш ID в Facebook"/>'; // это возможно закомментировать
echo '<meta property="og:title" content="' . get_the_title() . '"/>';
echo '<meta property="og:type" content="article"/>';
echo '<meta property="og:url" content="' . get_permalink() . '"/>';
echo '<meta property="og:site_name" content="' . get_bloginfo('name') . '"/>';
if(!has_post_thumbnail( $post->ID )) {
$default_image = "/wp-content/themes/имя_шаблона/images/имя_картинки.jpg"; // путь к картинке Лого
echo '<meta property="og:image" content="' . $default_image . '"/>';
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
}
echo "";
}
/* добавим Open Graph в WordPress */

 

 

В результате отработки кода на страницах всех записей будут выводиться основные метаданные Open Graph – и как следствие, например, Фейсбук, теперь будет подцеплять к анонсу соответствующую тексту картинку:

 

 

 

 

основные метаданные Open Graph

 

 

 

og:title – заголовок страницы…

 

og:type – содержимое, контент…

 

og:url – адрес страницы…

 

og:site_name – имя сайта.

 

og:image – картинка страницы.

 

 

 

Пара дополнений относительно og:image.

 

Код отрабатывает таким образом, что, в качестве изображения поста, будет установлена первая картинка статьи – обычно это миниатюра (thumbnail) текущей записи. Размеры картинки должны быть более 200х на 200px, в противном случае Ф.Б её не распознает!

 

Что примечательно: если миниатюра записи отсутствует, то будет использовано любое первое изображение текущей записи. А вот коли в посте ни того, ни другого нет – будет выводиться дефолтное изображение, ссылку на которую требуется организовать в переменной $default_image. Обычно указывают путь к изображению логотипа сайта: 250 – 250px.

 

 

fb:admins – суда нужно прописать свой юзер ID ФБ. Как его узнать, читайте… Также можно эту строку закомментировать: использование её отработки необязательно.

 

 

 

 

Всё как бы хорошо! однако, если задуматься и задаться таким резонным вопросом: а если кто-то поделится архивом рубрики или метки моего сайта? или Главной страницей? какая миниатюра прикрепится к анонсу?..

 

 

В этом случае социальная сеть возьмёт самое первое изображение на странице; т.е. возьмёт фото (миниатюру) самой последней публикации из архива! – это не очень хорошо, так как публикации время от времени пополняются, а значит и изменяются миниатюры, и более того миниатюра некой статьи может не соответствовать прямой тематике Архива!… а следовательно, в соцсетях возникает каша из изображений…

 

 

Чтобы этого избежать, предлагаю, страницы архивов: Главной стр. архивов Рубрик, Тегов и авторов снабдить своим изображением (возможно, с помощью условных тегов, задавать своё изображение для каждого архива. Почитать подробнее о работе с условными тегами WP Как найти и убрать циклические ссылки… Работа с условными тегами).

 

 

 

 

как подключить протокол Open Graph к статической странице сайта

 

 

 

 

Примерный шаблон подключения Open Graph для статической страницы:

 

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

 

 

<meta property="og:title" content="Заголовок" />
<meta property="og:description" content="Краткое описание публикации, страницы" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://mihalica.ru" />
<meta property="og:image" content="https://mihalica.ru/wp-content/themes/RealMik/images/mihalica-logo.jpg" />
<meta property="og:image:width" content="250" />
<meta property="og:image:height" content="250" />

 

 

далее…

 

 

Ниже дан код, установив который – страницы архивов станут отдавать картинку логотипа сайта (ну или ту, до которой укажете путь в строке кода)!

 

Отныне, например, Ф.Б, если кто-то поделится страницей архива публикаций, будет брать именно её…

 

 

Код добавлять в файл header.php, ну или тот, который в вашем шаблоне отвечает за формирование шапки сайта (разметка шапки сайта header.php – теги h1 – h2 условия вывода):

 

 

 

<?php
if (is_home('') or is_category('') or is_tag('') or is_author(''))
{
echo "".'<meta property="og:image" content="https://almica.ru/wp-content/themes/имя_шаблона/images/имя_картинки.jpg" />'."\n";
echo "".'<meta property="og:image:width" content="250" /><meta property="og:image:height" content="250" />'."";
} 
?>

 

 

 

получаем URL любой страницы

 

 

 

Для тех, которые хотят поработать с чистым php возможно выполнить получение адреса (url) любой страницы сайта таким образом:

 

 

$Path = $_SERVER['REQUEST_URI'];  //получаем адрес url текущей страницы = хороший вариант. Все получает !!
$atsurl = get_site_url() . $Path; //получаем адрес url

 

 

 

выводим информацию урла в мета так:

 

 

echo '<meta property="og:url" content="' . $atsurl . '>';

 

 

 

Возможно бесконечно много конструкций!..

 

 

 

 

 

 

 

На этом вроде бы всё, что хотел, рассказал…

 

 

 

Online консультация по настройкам и созданию сайтов на WordPress

 

 

 

 

 

 

 

 

 

почитать подробнее из уст Яндекс об Open Graph можно здесь…