Не знаю, кто начал первым употреблять этот термин, но сейчас Open Graph активно продвигается социальной сетью Facebook, как универсальный протокол представления информации для дальнейшего распространения. Так что же это такое и с чем его едят?
Протокол Open Graph позволяет странице быть полноценным участником социального окружения, формируемого публикуемой информацией. С его помощью можно унифицировать всю информацию на странице, составив из нее своеобразную визитную карточку, в которую включено текстовое описание, графическое изображение, правильно оформленный заголовок.
Большинство начинающих блоггеров плохо знакомы с этим протоколом, и с его возможностями, поэтому страницы, отправляемые в Facebook имеют страшный вид - без изображений, с недостаточно точным описанием или вовсе без оного, с корявым заголовком. Чтобы исправить такую ситуацию, разработчики Facebook рекомендуют применять несколько тегов, с помощью которых можно добиться наиболее привлекательного представления ссылки на страницу. Вот самые востребованные из них:
- og:image - этот тег указывает на наиболее релевантную картинку, которая может сопровождать ссылку при отправке ее в Facebook.
- og:title - этот тег определяет заголовок рядом с ссылкой. Его можно изменять с таким расчетом, чтобы он имел наибольшую привлекательность для читателей.
- og:description - этот тег указывает на текстовое описание ссылки. По умолчанию Facebook понимает текст длиной 295 символов, что, например, больше, чем 160 символов, которые понимают сервисы Google, и этим можно пользоваться, предоставляя для одних социальных один текст, а для других - другой.
Подробнее познакомиться с описанием 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 - в качестве картинки используется миниатюра поста
Эти теги он при формировании страницы вставляет в между тегами <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#">