Что такое Open Graph и как его подключить к WordPress

Что такое Open Graph и как его подключить к WordPress

19 декабря 2016 1 069 2

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

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

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

Оптимизация сайта под социальные сети (англ. 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 традиционно существует два способа подключения: с помощью плагина и ручное подключение с помощью фильтров и экшенов.

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

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

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

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

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

2. Подключение 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 = "http://example.com/image.jpg";
		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] ) . '"/>';
	}
	echo "
	";
}
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.

Иван Данилин
Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

  ПОДПИСАТЬСЯ

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

Добавить комментарий
Разгоните свой WordPress

Выбираем быстрый и надежный хостинг для своих сайтов

Подробнее