Микроразметка и рейтинг материалов на Drupal 7 с fivestar

Многие видели в поисковой выдаче гугл около некоторых сниппетов (результаты выдачи) звездочки рейтинга. Во многом мелочь, а внимание на себя обращает, а это в свою очередь и CRT повышает, что весьма немаловажно.

В данной статье мы разберем как добавить такие звездочки сайту созданному на Drupal 7.

1. Добавляем возможность оценки страниц пользователями

Для того, чтобы был рейтинг, нужно его откуда то брать. Для этой задачи будем использовать модуль fivestar (если у Вас раньше не был установлен модуль voting API, то устанавливаем его себе сразу тоже, поскольку без него fivestar не работает).

Скачиваем его и устанавливаем себе на сайт.

После идем на страницу редактирования полей типа материала, которому мы будем добавлять звездочки, в нашем случае это Article (ваш_сайт /admin/structure/types/manage/article/fields). Там создаем новое поле типа «Fivestar рейтинг» и виджет выбираем «Оценивать при просмотре».

Далее в настройках поля при сохранении проставляем следующие галочки, чтобы все корректно работало:

После того, как мы создали поле, переходим на вкладку управление отображением и настраиваем поле оценки по своему усмотрению (чтобы все нормально работало когда мы будем добавлять микроразметку звездочки должны быть без текста).

Не забываем сохранить изменения.

На этом этапе у нас уже появятся звездочки, но они все еще не будут активны. Чтобы дать возможность пользователям оценивать материалы переходим в пользователи/права доступа, находим fivestar и ставим соответствующие галочки.

Все, мы добавили возможность оценки материалов пользователями при помощи fivestar и на страницах типа материала Article у нас появилось следующее поле:

Теперь пришло время сообщить об этом гуглу и вывести наши звездочки в поисковую выдачу.

2. Добавляем микроразметку

Существует достаточно большое количество стандартов микроразметки. Самым признанным среди них является schema.org, поддерживаемый практически всеми популярными поисковыми системами мира. В статье мы рассмотрим простейший пример микроразметки сайта.

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

Именно schema.org мы будем использовать для получения долгожданных звездочек в сниппете (результаты поисковой выдачи) сайта в гугл.

Разметка самой статьи

Итак, в первую очередь нам необходимо определиться с чем мы имеем дело. В нашем случае это статья. Потому, будем использовать разметку типа Article.

Полный перечень типов разметки можно посмотреть тут.

Работа по микроразметке материала будет проводиться в соответствующем файле tpl.php нашей темы (sites/all/themes/моя_тема). В нашем случае это page--article.tpl.php.

Для того, чтобы определить какая часть страницы собственно является статьей необходимо тегу, в который вложено все содержимое статьи добавить атрибуты itemscope и itemtype, все крайне просто. В моем случае это:

<section class="mainContent" itemscope itemtype="http://schema.org/Article">

Теперь же, используя itemprop внутри этого тега можно сделать разметку чуть более подробной. Давайте зададим название статьи, дату и собственно содержимое статьи:

<h1 class="articleTitle" itemprop="name"><?php print drupal_get_title(); ?></h1>
<meta itemprop="datePublished" content="<?php echo format_date($node->created, 'custom', 'Y-m-d'); ?>" />
<div  itemprop="articleBody">
  <?php
    $field = field_get_items('node', $node, 'body');
    $body = field_view_value('node', $node, 'body', $field[0]);
    $output = render($body);
    print $output;
  ?>
</div>

Как вы могли заметить, для выделения даты мы использовали тег мета. Им мы можем воспользоваться для микроразметки материалов, которые не должны выводиться на страницу. Для этого достаточно в его атрибут content вывести необходимое нам содержимое.

И обратите внимание, дата должна соответствовать стандарту ISO, потому мы для обозначения даты статьи и использовали не ту дату, что выводится на сайте, а использовали тег мета в который вывели правильный формат даты.

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

<?php print render($page['content']); ?>

Добавляем микроразметку рейтинга статьи

После того как разметили наш тип материала, пришло время добавить и сами звездочки, для этого внутри тега

<section class="mainContent" itemscope itemtype="http://schema.org/Article">

Нужно добавить еще немного кода:

<div class="microRating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
  <?php
    $votes = fivestar_get_votes('node',$node->nid);
    $stars = variable_get('fivestar_stars_'. $node->type, 5);
    define('average', 'average');
    define('value', 'value');
    $average_stars = round(($votes['average']['value'] * $stars) / 100, 1);
  ?>
  <p>Оценок: <span itemprop="ratingCount"><?php print $votes['count']['value'];?></span>
  (средняя <span itemprop="ratingValue"><?php print $average_stars; ?></span>
  из <span itemprop="bestRating">5</span>)</p>
</div>

Так мы сначала извлекаем значения из модуля fivestar, а далее размечаем их используя :

itemprop="ratingCount" для обозначения количества оценок
itemprop="ratingValue" — сама оценка
itemprop="bestRating" — максимальное значение рейтинга

Для их вывода вполне можно использовать теги мета, но это уже по вашему желанию.

Ошибка, когда валидатор микроразметки гугл не понимает к чему относится рейтинг, возникает если мы что-то напортачили и вынесли код отвечающий за рейтинг статьи за пределы тега с itemtype="http://schema.org/Article".

стоимость разработки сайта на битрикс.

Вот собственно и все. В итоге должно выйти что-то вроде:

Полезные советы

Для статей существует множество свойств, которыми мы можем их разметить. Автор, категория и тд. С полным перечнем свойств статьи можно ознакомиться тут.

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

После определения разметки в вебмастере гугл в сниппетах сайта в течение пары дней начнут появляться звездочки.

Проверить, что все верно сделано можно сразу воспользовавшись специальным сервисом гугл для проверки микроразметки.

Поскольку гугл развивается и у него вечно появляются новые примочки в последнее время при минимальной микроразметке статьи можно увидеть следующую картину:

Пример того, как с этим можно бороться привожу ниже, на примере темизации шаблона node.tpl.php (подробнее о нем можно почитать тут)

Ниже приведен пример полного кода шаблона node--article.tpl.php взятый с одного из рабочих сайтов:

<?php
 
// View full node.
if (!$teaser) {
 
  //выводим дополнительные элементы
  $h1 = '<h1 itemprop="name">' . drupal_get_title() . '</h1>';
  $date = '<p class="date">' . format_date($node->created, 'custom', 'j.m.y') . '</p><meta itemprop="datePublished" content="' . format_date($node->created, 'custom', 'Y-m-d') . '" />';
  $social = '<div class="social"><script type="text/javascript" src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js" charset="utf-8"></script><script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8"></script><div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter,viber,whatsapp"></div></div>';
 
  //делаем обертку ноде
  print '<div class="node-blog" itemscope itemtype="http://schema.org/Article">';
 
  //темизируем ноду
  print '<div class="titleGroup">' . $h1 . $date . $social . '</div>';
  $content['body']['#prefix'] = '<div itemprop="articleBody">';
 
  //сделаем микроразметку для звезд
  $votes = fivestar_get_votes('node', $node->nid);
  $stars = variable_get('fivestar_stars_' . $node->type, 5);
  define('average', 'average');
  define('value', 'value');
  $average_stars = round(($votes['average']['value'] * $stars) / 100, 1);
 
  $votes_html = '<div class="microRating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
  <meta itemprop="ratingCount" content="' . $votes['count']['value'] . '" />
  <meta itemprop="ratingValue" content="' . $average_stars . '" />
  <meta itemprop="bestRating" content="5" />
  </div>';
 
  //выведем дополнительные элементы для полноценной микроразметки
  global $base_url;
  $advanced_microrazmeka = '<meta itemprop="author" content="' . $node->name . '" />'
      . '<meta itemprop="headline" content="' . drupal_get_title() . '" />'
      . '<div style="display:none;" itemprop="image" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="url" content="' . file_create_url($node->field_image['und'][0]['uri']) . '" /><meta itemprop="height" content="400" /><meta itemprop="width" content="600" /></div>'
      . '<meta itemprop="name" content="' . $node->name . '" />'
      . '<div style="display:none;" itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="' . variable_get('site_name') . '" /><div itemprop="logo" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="url" content="' . $base_url . '/sites/all/themes/mytheme/css/image/logo.png"" /><meta itemprop="height" content="100" /><meta itemprop="width" content="200" /></div></div>'
      . '<meta itemprop="dateModified" content="' . format_date($node->changed, 'custom', 'Y-m-d') . '" />'
      . '<meta itemprop="mainEntityOfPage" content="' . $base_url . request_uri() . '" />';
 
  $content['body']['#suffix'] = '</div>' . $votes_html . $advanced_microrazmeka . $social;
 
 
 
  //dpm($content);
  print render($content);
 
  //закрываем обертку ноды
  print '</div>';
}

Результат работы:

Блог Vaden Pro