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


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

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

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

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

Использование протокола 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 - в качестве картинки используется миниатюра поста
ПОЛЕЗНО  Easily Remove Query String From CSS & Javascript In WordPress

Эти теги он при формировании страницы вставляет в между тегами <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#">

источник