Что такое «Open Graph» и как его подключить к Вордпресс

Социальные сети проникают в веб все глубже. Не адаптироваться к современным реалиям — значит терять посетителей, клиентов, продажи, прибыль. Оптимизация сайта под социальные сети уже давно является неотъемлемым этапом веб-разработки.

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

Оптимизация сайта под социальные сети (англ. Social media optimization, SMO) — комплекс мер, направленных на привлечение на сайт посетителей из социальных медиа: блогов, социальных сетей и т. п.

Появление термина SMO принято связывать с публикацией Рохита Бхаргавы (Rohit Bhargava), сформулировавшего 5 основных правил SMO:

1. Повышение ссылочной популярности;
2. Упрощение добавления контента с сайта в социальные сети;
3. Привлечение входящих ссылок;
4. Обеспечение экспорта и распространения контента;
5. Поощрение создания сервисов, использующих наш контент.

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

Вопросы, связанные непосредственно с генерацией контента рассматривать не будем. О написании сильных текстов лучше всего расскажет недавно вышедшая книга Максима Ильяхова и Людмилы Сарычевой «Пиши, сокращай. Как создавать сильный текст».

Настоятельно рекомендую всем кто хотя бы иногда что-то пишет.

Как я уже говорил выше, социальная оптимизация большинства сайтов обычно ограничивается установкой виджетов «Поделиться» Фейсбука, ВКонтакте и Твиттера — это верный ход, но этого часто мало. Появилось много сторонних сервисов, которые существенно упростили эту процедуру. Например, блок «Поделиться» Яндекса и многие другие. К сожалению, социальные сети не всегда корректно распознают расшариваемый контент. И очень часто необходимо программно уточнять его тип и характеристики. Чтобы после репоста, публикация в социальных сетях выглядела интересно.

Возьмем в качестве примера самую простую публикацию самого заурядного блога. На ней я покажу как контент должен расшариваться и как не должен.

Сначала как должен.

В Фейсбуке.

ВКонтакте.

Как видим, публикация имеет понятный заголовок, характерное изображение и краткое описание. Оно не самое лучшее, но технически работает все верно.

А вот как не должен расшариваться контент.

В Фейсбуке.

ВКонтакте.

Видим, что и Фейсбук, и ВКонтакте получили только адрес сайта. Еще я часто вижу при расшаривании, как в качестве изображения прикрепляются разные счетчики Лайвинтернета, Рамблера, какие-то логотипы и прочие бессмысленные картинки. Так тоже быть не должно. Изображение должно соответствовать публикации или хотя бы тематике сайта, если публикация не несёт в себе никаких изображений. Никакие счетчики и элементы интерфейса прикрепляться не должны.

Такой шаринг никуда не годится.

Такие посты никто не будет ни лайкать, ни репостить. Скорее всего и посетитель, решивший расшарить публикацию, увидев эту срамоту, изменит свои планы.

Задача веб-разработчика сделать так, чтобы социальные сети видели метаданные публикаций и понимали, что конкретно репостит посетитель. Если это статья — она должна быть соответствующе оформлена, если это медиаконтент — он должен оставаться медиаконтентом, не теряя при репосте никакой информации о себе. Иначе не может быть никакой речи о SMO.

Для решения этой задачи в 2010 году компанией Facebook был разработан протокол Open Graph.

Протокол Open Graph

Open Graph — это протокол социальной адаптации веб-контента, разработанный компанией Facebook. Open Graph позволяет присвоить любому веб-объекту ряд метаданных, по которым социальные сети смогут интерпретировать его как свой внутренний объект.

Протокол Open Graph хоть и является разработкой Facebook, однако, поддерживается всеми популярными соцсетями. На данный момент Open Graph поддерживают: Твиттер, ВКонтакте, Google+, LinkedIn, Pinterest и многие другие.

Основные метаданные Open Graph

• og:title — название объекта, заголовок;
• og:type — тип объекта, в зависимости от которого задаются другие свойства;
• og:image — URL-адрес изображения;
• og:url — канонический URL-адрес объекта.

Дополнительные метаданные Open Graph

• og:audio;
• og:description;
• og:determiner;
• og:locale;
• og:locale:alternate;
• og:site_name;
• og:video.

Структурированные свойства

Ряд свойств имеют дополнительные метаданные, которые определяются как и обычные метаданные.

С полным описанием протокола Open Graph можно ознакомиться на сайте Ruogp.me.

Подключение Open Graph

Open Graph подключается к HTML-страницам так же как и любые другие метатеги.

Для статичных страниц так, например:

<meta property="og:title" content="Заголовок" />
<meta property="og:description" content="Краткое описание публикации" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://danilin.biz" />
<meta property="og:image" content="https://danilin.biz/wp-content/themes/danilin/images/social.jpg" />

Как подключить Open Graph к WordPress

Для WordPress традиционно существует два способа подключения: с помощью плагина и ручное подключение с помощью фильтров и экшенов.

Подключение Open Graph к WordPress с помощью плагина

Для подключения Open Graph к WordPress существуют специальные плагины:

• WP Facebook Open Graph protocol;
• Open Graph.

Но чаще всего подключение специальных плагинов не требуется, т.к поддержка Open Graph реализована во многих комплексных SEO-плагинах.

Самые популярные:

• Yoast SEO — рекомендую;
• All in One SEO Pack.

Иногда поддержка Open Graph имеется прямо в теме WordPress, особенно это касается премиум-тем. Поэтому, перед стартом работ по SMO, нужно открыть HTML-код сайта и проверить его на наличие метатегов Open Graph. Их можно определить по характерному свойству (property) — «OG:».

Подключение Open Graph к WordPress без плагинов

Код размещаем в файле функций активной темы (functions.php) или в функциональном плагине, в который вы выносите весь функционал, чтобы не потерять его при смене темы.

// Поддержка Open Graph в WordPress

function add_opengraph_doctype( $output ) {
    return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');

function insert_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 = "URL дефолтного изображения";
        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] ) . '" />';
    }
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

В результате на страницах всех записей будут выводиться основные метаданные Open Graph:

• og:title;
• og:type;
• og:url;
• og:site_name;
• og:image.

А также fb:admins, в котором нужно указать ваш Facebook ID. Есть несколько способов определения своего ID, самый простой — навести курсор мыши на вашу аватарку Facebook, в системной строке браузера увидим fbid. Это и есть Facebook ID.

Отдельно стоит остановиться на og:image. В качестве изображения будет установлена миниатюра текущей записи. В случае ее отсутствия будет выводиться дефолтное изображение, ссылку на которое задается в переменной $default_image.

Как проверить правильность подключения Open Graph

⚡️ Присоединяйтесь к моему телеграм-каналу! Рассказываю о своих рабочих буднях на фрилансе и делюсь полезными материалами по веб‑разработке.

Можно воспользоваться дебаггером Open Graph на Facebook for developers и протестировать видимость публикаций краулерами Facebook.