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

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

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

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

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

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

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

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

function opengraph_for_posts() {
    if ( is_singular() ) {
        global $post;
        setup_postdata( $post );
        $og_type = '<meta property="og:type" content="article" />' . "\n";
        $og_title = '<meta property="og:title" content="' . esc_attr( get_the_title() ) . '" />' . "\n";
        $og_url = '<meta property="og:url" content="' . get_permalink() . '" />' . "\n";
        $og_description = '<meta property="og:description" content="' . esc_attr( get_the_excerpt() ) . '" />' . "\n";
        if ( has_post_thumbnail() ) {
            $imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'middle' );
            $og_image = '<meta property="og:image" content="' . $imgsrc[0] . '" />' . "\n";
        }
        echo $og_type . $og_title . $og_url . $og_description . $og_image;
    }
}
add_action( 'wp_head', 'opengraph_for_posts' );

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

  • og:type - используется значение article, указывающее, что пост является статьей
  • og:title - используется полное название поста
  • og:url - используется прямая ссылка на страницу поста
  • og:description - текстовое описание формируется из цитаты поста
  • og:image - в качестве картинки используется миниатюра поста
ПОЛЕЗНО  Добавляем меню в статью с помощью shortcode

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

<html <?php language_attributes(); ?>>

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

<html <?php language_attributes(); ?> prefix="og: http://ogp.me/ns#">

источник

  • Leon

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

    • Roman NMSK

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

      универсального скрипта быть не может, т.к. у каждого движка свои параметры и свои методы вывода инфы.