Open Graph Facebook для WordPress

Facebook крупнейшая социальная сеть во всем мире. Open Graph даёт возможность правильно предоставить содержание сайта для социальной сети Facebook. В этой статье я поделюсь тем как сделать разметку RDFa Open Graph Facebook для сайта WordPress.

Оглавление:
  1. Метатеги Open Graph
  2. Заключение

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

Метатеги Open Graph

Для чего еще применить Open Graph Facebook решать Вам, вот что предлагает Яндекс, остальное можно узнать на сайте Facebook.

Теперь разберем все пункты meta property по порядку.

og:locale локализация для русскоязычных страниц. Если у вас страницы только на русском языке ничего больше выдумывать не надо, просто копируем и вставляем метатег. Если на нескольких языках, нужно добавить еще метатег, например, property="og:locale:alternate" content="ua_UA"

og:site_name должен содержать название сайта, просто вставляем следующий код.

<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />

og:see_also URL сайта, так же ничего хитрого просто вставляем код.

<meta property="og:see_also" content="<?php echo home_url(); ?>" />

og:type здесь немного по сложнее, в документации Open Graph Facebook я нашел только три подходящих объектов для страниц:

  1. website
  2. article
  3. object

Еще есть объекты profile, book которые Я не стал применять.

Первый объект website для главной страницы, второй объект article для записи, и третий объект object для объектов таких как; рубрика, страница с изображением и т.д.

og:title заголовок страницы сайта. В любой теме WordPress код уже есть, его нужно скопировать и вставить.

<meta property="og:title" content="<?php wp_title( '|', true, 'right' ); ?>" />

og:url URL страницы сайта выводится следующим кодом:

<meta property="og:url" content="<?php echo home_url(); echo $_SERVER["REQUEST_URI"] ?>" />

fb:app_id — это самый сложный момент, во первых должен быть аккаунт Facebook, во вторых нужно создать app на сайте Facebook для того что бы получить id.

Создать app на сайте Facebook для того что бы получить id
Создать app на сайте Facebook

og:image прикрепленное изображение к записи или странице, например миниатюра.

<meta property="og:image" content="<?php the_post_thumbnail(); ?>" />

Если для записи нет миниатюры, используем логотип сайта

if(!has_post_thumbnail( $post->ID )) {
echo '<meta property="og:image" content="ссылка на логотип сайта"/>'

og:description описание записи или страницы с публикацией. Как это сделать без плагина написано на странице сайта sauron.org.ua.

article:published_time дата публикации записи, страницы.

article:modified_time дата модификации записи, страницы.

og:updated_time дата обновления записи, страницы.

Все даты должны быть в международном стандарте ISO 8601, в WordPress такая дата выводится латинской буквой “c”. Дата модификации и дата обновления естественно совпадают.

Полностью код в header.php должен быть такой:

<html class="no-js" lang="ru-RU" 
      prefix="og: http://ogp.me/ns# 
      fb: http://ogp.me/ns/fb# 
      article: http://ogp.me/ns/article#"> // префикс
<head>
     <meta property="og:locale" content="ru_RU" /> // основная локация
     <meta property="og:locale:alternate" content="ua_UA"/> // если есть другая
     <meta property="og:site_name" content="<?php bloginfo('name'); ?>" /> // название сайта
     <meta property="og:see_also" content="<?php echo home_url(); ?>" /> // URL сайта
     <meta property="og:type" content="
<?php 
if (is_home()) echo 'website'; // объект для главной страницы
else 
if (is_single())
   echo 'article'; // объект для записи
else 
   echo 'object'; // объект для всех остальных страниц 

?>" />
     <meta property="og:title" content="<?php wp_title( '|', true, 'right' ); ?>" /> // заголовок
     <meta property="og:url" content="<?php echo home_url(); echo $_SERVER["REQUEST_URI"] ?>" /> // URL страницы
     <meta property="fb:app_id" content="" /> // id app
<?php 
if(!has_post_thumbnail( $post->ID )) 
{
echo '<meta property="og:image" content="ссылка на логотип" />'; // логотип
}
else 
{
echo '<meta property="og:image" content="' . the_post_thumbnail() . '" />'; // миниатюра
}
?>
<?php 
  if (is_single() || is_page() ) : if (have_posts() ) : while (have_posts() ) : the_post(); ?>
     <meta property="og:description" content="<?php echo cutString(get_the_excerpt(), 140); ?>" />
<?php endwhile; endif; elseif (is_home() ): ?>
     <meta property="og:description" content="<?php bloginfo('description'); ?>" />
<?php endif; ?>
<?php
  if(is_single() || is_page()) { // проверяем запись и страница с публикацией

echo '<meta property="article:published_time" content="' . get_the_date( 'c' ) . '" />';
echo '<meta property="article:modified_time" content="' . get_the_modified_date( 'c' ) . '" />';
echo '<meta property="og:updated_time" content="' . get_the_modified_date( 'c' ) . '" />';
} 
?>
</head>
к меню ↑

Заключение

Метатеги Open Graph Facebook для сайта WordPress ни кому не помешают. Если для Вас все это очень сложно, проще будет установить плагин Yoast SEO, там все есть кроме id. Или плагин WP Facebook Open Graph protocol, в общем выбор есть.

htmlhook.ru | Скрипты для веб-приложений