возможно заказать разработку или сопровождение, услуги вашего сайта/блога


обновлено: 2024-01-16 в теме: Seo-Plus продвижение
Запросто с WordPress создание и продвижение сайтов ATs media

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

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

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

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

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

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

 


 

 

 

 

Google Alerts: что это такое и как использовать? система оповещений Гугл Алертс.

 

 

 

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

 

 

 

 

Англ. Social media optimization – SMO – и есть оптимизация сайта под социальные сети. (не путать с микроразметкой shema.org)

 

Комплекс важных мер целиком направленных на привлечение на веб площадку посетителей из социальных медиа: страниц, групп или блогов социальных сетей и прочая…

 

 

Если говорить не распыляясь, то техническая составляющая задачи 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 с помощью кода

 


подписка feedburner МИГ подписки - ВРЕМЯ знаний!!

 

Важно знать!

 

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

Откройте исходный код страницы "Ctrl + U" и проверьте на наличие og по характерному тегу property от англ. приоретет.

Дважды добавлять к сайту протокол og не нужно!

 

 

 

 

 

Добавьте этот код в файл 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 . '>';

 

 

 

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

 

 

 

Код возможно организовать в связке с произвольными типами записей. Почитайте ЭТУ статью…

 

 

 

 

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

 

 

 


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

 

 

 

…но, если у вас возникли вопросы или какие-то трудности с подключение Open Graph, либо не получается добавить в файлы своего сайта (темы) код, пишите (или звоните в Skype)… с удовольствием помогу!

 

 

 

Проверить валидность (правильность) подключения протокола Open Graph, а также очистить КЭШ сайта в Ф.Б возможно здесь: дебаггер Фейсбук Open Graph.

 

 

 

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

 

 

 

 

Создание… продвижение сайтов: студия ATs media запросто с WordPress

 

 

 

 

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...





Нажатия на кнопочки определяют Ваше высокое гражданское сознание

Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©


  1. Привет, Михаил!
    А как мне можно в этот код добавить описание Open Graph description, поста, например?

    echo '<meta property="og:description" content=" " />';
    Ответить - Светлана

    • Привет, Светлана!
      Добавить можно таким образом:
      в эту строку нужно добавить данные дескрипшн: тот метатег, которым ты организовывала на сайте (в шаблоне) description к статье/странице.

      echo '<meta property="og:description" content=" СЮДА " />';

      или, если ты используешь плагины типа Yoast SEO или SEO Pack (хотя в этих плагинах есть настройки OG) но если тебе принципиально, то выводи так:
      SEO Pack:

      echo '<meta property="og:description" content=" ' . get_post_meta($post->ID, '_aioseop_description', true) . '" />';

      Yoast SEO:

      echo '<meta property="og:description" content=" ' . get_post_meta($post->ID, '_yoast_wpseo_metadesc', true) . '" />';

      …можно оператор echo добавить…

      Ответить - Михаил

      • Спасибо!! получилось здОрово…

        Ответить - Светлана

        • …на здорОвье))
          Заходите… и впредь…

          Ответить - Михаил

  2. Спасибо! Все работает!
    Однако, валидатор микроразметки жалуется на то, что выдается миниатюра (thumbnail) и рекомендуется картинки размером 1200px

    Ответить - Евгений