! Запросто с WordPress - доступная ручная работа по правилам оптимального интернета
...здесь Ваша реклама.?.
Здравствуйте !
написано: — 
отредактировано: 2018-09-25
издатель:  в теме: Seo-Plus продвижение реплики: будьте первым в диалоге
 
Запросто с WordPress - студия ATs media fashion Reception WordPress golden

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

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

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

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

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

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


 

 

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

 

 

 

 

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

 

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

 

 

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

 

 

 

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

 

 

 

 

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

 

 

 


подписка feedburner Online консультация по работе c сайтом на WordPress

 

 

 

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

 

 

 

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

 

 

 

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

 

 


Благодарности)) и вопросы в комментариях - помогу… в чём дюжу
А также Вы можете просто:
Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!
 ! самое читаемое:
   Как исключить вывод (выборочно) поста с главной страницы сайта — регулировка в админке   Как перевести сайт на https — сертификат ssl — шифрование   Уже в этом году WordPress потребует от пользователей протокол HTTPS   Как к статье добавить блок ссылок на похожие по теме записи сайта   Выведем последние комментарии в любом месте сайта — несколько вариантов   Яндекс ИКС — новый индекс качества сайта, заместо ТИЦ   Подключение jQuery библиотеки от CDN Google — рационально!..   Ускоряем сайт: основные кэш и gzip правила .htaccess которые нужно знать   Как добавить свой новый (второй) сайт в Яндекс Директ   Включаем обслуживание gzip сжатия файлов на хостинге и в htaccess   Продвижение контентом или нужно настраивать сайт — валидный код шаблона..?   Убираем циклическую ссылку h1 логотипа на главной странице   Как выбрать хостинг — пошаговые инструкции (обзоры 4 хостингов) — нюансы модного ssl сертифицирования   Создаём плагин — добавочный файл функций — my-functions.php
↔ перетаскивайте ленту ↔
ещё статьи по теме:

смотреть ещё статьи в теме Seo-Plus продвижение
меточная навигация:


Комментарии © 0 к статье: Что такое Open Graph? как подключить протокол Open Graph к WordPress

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

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

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

 необходимо принять правила конфиденциальности и пользовательского соглашения
Яндекс.Метрика
?Skype консультация Skype консультацияЕсли вы выбрали для своего сайта WordPress и только-только начинаете изучать панель управления контентом, то этот вариант оnline консультаций — практически по любым вопросам — для вас! Skype онлайн