n-wp.ru — блог о WordPress
Использование протокола Open Graph | n-wp.ru

Использование протокола Open Graph

Что же это такое — Open Graph, для чего он нужен, и как этот протокол можно применять на практике в блоге на WordPress? Давайте разбираться.

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

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

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

  • og:image — этот тег указывает на наиболее релевантную картинку, которая может сопровождать ссылку при отправке ее в Facebook.
  • og:title — этот тег определяет заголовок рядом с ссылкой. Его можно изменять с таким расчетом, чтобы он имел наибольшую привлекательность для читателей.
  • og:description — этот тег указывает на текстовое описание ссылки. По умолчанию Facebook понимает текст длиной 295 символов, что, например, больше, чем 160 символов, которые понимают сервисы Google, и этим можно пользоваться, предоставляя для одних социальных один текст, а для других — другой.

Использование протокола Open Graph

Подробнее познакомиться с описанием Open Graph можно на странице Facebook и странице протокола.

Так как же правильно настроить теги Open Graph для максимальной выгоды своему блогу? Ничего сложного в этом нет — достаточно добавить в файл functions.php следующий код:

Этот код автоматически формирует из содержимого поста Open Graph теги:

  • og:type — используется значение article, указывающее, что пост является статьей
  • og:title — используется полное название поста
  • og:url — используется прямая ссылка на страницу поста
  • og:description — текстовое описание формируется из цитаты поста
  • og:image — в качестве картинки используется миниатюра поста

Эти теги он при формировании страницы вставляет в между тегами

и

Ну и чтобы не возникало ошибок в определении языка и кодировки, нужно открыть файл header.php, и найти в нем тег html. Например, в теме Twenty Twelve, являющейся в WordPress 3.4.x дефолтной, он выглядит так:

Вместо него нужно вставить:

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

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

7 комментариев

  • Скажите, если сайт (интернет-магазин) сделан не на WordPress, а с помощью самописного движка, полезен ли будет этот скрипт для него? И если нет, то есть ли бесплатный универсальный скрипт для динамических сайтов, позволяющий формировать теги Open Graph для генерируемых страниц?

  • если сайт сделан не на WordPress, а с помощью самописного движка, полезен ли будет этот скрипт для него?

    Нет.

  • Спасибо. Решение пришло спонтанно — добавлять OG разметку в каждую вновь создаваемую страницу или раздел прямо в редакторе и скрывать с помощью стилей display:none; Если получится — поделюсь.

    • Если у вас получилось поделитесь, у меня сайт тоже самописный и при прописывании тега og:image при постевании на фейсбуке все равно вылазит картинка банера. При тестировании на https://developers.facebook.com/tools/debug/ он видит этот тег и рисует правильную картинку, а в итоге рисует опять же банер.

      • К сожалению, ничего не получилось. Через дебаггер Фейсбука не всегда удается сбросить кеш этой соцсети, попробуйте зайти вообще с другого компьютера и провайдера на дебаггер ФБ и сбросить кеш вашего сайта. Тогда, возможно, при следующей попытке перепостить статью, кнопка «Поделиться» подхватит именно ту картинку, которую вы указали в og:image. Вообще, конечно, вопиющий баг. Толку от этих тегов Open Graf для таких, как мы — нет практически. Для распространенных бесплатных движков типа WP написаны плагины, позволяющие автоматически прописывать эти теги в каждой странице, а для самописных — нет, нам остается довольствоваться тем, что прописывать одну универсальную картинку, которая и будет подтягиваться к любому посту.

  • Для того чтобы прописывать тег автоматически, например для страницы новостей, выход есть. Именовать картинки для каждой новости стандартно типа 1.jpg и вытаскивать это значение из базы, куда его соответственно также автоматически заносить. <meta property="og:image" content="» /> Как-то так

  • Ура! У меня все получилось, и сменить картинку на желаемую и автоматически прописывать кнопку на каждой странице. И теги Open Graf работают. Проблема с картинкой у меня была с ее размером, если она меньше 200х200 facebook автоматически выбирает другую. В предыдущем комоменте сайт видимо автоматически вырезал php код, который я вставляла: .

/* ]]> */