Open Graph Facebook для WordPress

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

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

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Крым, Белогорский район, с. Зуя
Тел: +7(978)1176627 http://samartsy.ru/

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

Метатеги Open Graph

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

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

  • <meta property="og:locale" content="ru_RU" /> — локализация страниц. Если у вас страницы не только на русском языке, нужно добавить еще один метатег, например:
    <meta property="og:locale" content="ua_UA" />
  • <meta property="og:site_name" content="" /> — название сайта.
    <meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
  • <meta property="og:see_also" content="" /> — УРЛ сайта.
    <meta property="og:see_also" content="<?php echo home_url(); ?>" />
  • <meta property="og:type" content="article" /> — здесь немного по сложнее, в документации Open Graph Facebook я нашел только три подходящих объектов для страниц:
    1. website — для главной страницы.
    2. article — для записи.
    3. object — для рубрики, вложений, теги и т.д
    4. Еще есть объекты profile, book которые Я не стал применять.
  • <meta property="og:title" content="" /> — заголовок страницы сайта.
    <meta property="og:title" content="<?php wp_title( '|', true, 'right' ); ?>" />
  • <meta property="og:url" content="" /> — УРЛ текущей страницы сайта выводится следующим кодом.
    <meta property="og:url" content="<?php echo home_url(); echo $_SERVER["REQUEST_URI"] ?>" />
  • <meta property="fb:app_id" content="" /> — это самый сложный момент, во первых должен быть аккаунт Facebook, во вторых нужно создать app на сайте Facebook для того что бы получить id.
Создать app на сайте Facebook для того что бы получить id
Создать app на сайте Facebook
  • <meta property="og:image" content="" /> — прикрепленное изображение к записи или странице, например миниатюра.
    <meta property="og:image" content="<?php the_post_thumbnail(); ?>" />

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

    if(!has_post_thumbnail( $post->ID )) {
    echo '<meta property="og:image" content="ссылка на логотип сайта"/>'
  • <meta property="og:description" content="" /> — описание записи или страницы.
  • <meta property="article:published_time" content="" /> — дата публикации записи, страницы.
    <meta property="article:published_time" content="' . get_the_date( 'c' ) . '" />
  • <meta property="article:modified_time" content="" /> — дата модификации записи, страницы.
    <meta property="article:modified_time" content="' . get_the_modified_date( 'c' ) . '" />
  • <meta property="og:updated_time" content="" /> — дата обновления записи, страницы.
    <meta property="og:updated_time" content="' . get_the_modified_date( 'c' ) . '" />

Все даты должны быть в международном стандарте ISO 8601, такая дата выводится латинской буквой “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>

В functions.php добавить код:

/**
 * Получает первые 140 символов из содержания для описания метатег og:description
 */
function cutString($string, $maxlen) {
    $len = (mb_strlen($string) > $maxlen)? mb_strripos(mb_substr($string, 0, $maxlen), ' ') : $maxlen;
    $cutStr = mb_substr($string, 0, $len);
    return (mb_strlen($string) > $maxlen)? $cutStr.' ...' : $cutStr;
}
К началу

Заключение

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

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