Метатеги и микроформаты для сниппетов

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

Отчасти это может быть связанно с тем, что эффект от их использования не так очевиден. В этой статье речь пойдет о нескольких простых и наглядных "фичах", которые могут быть применены на практически любом сайте — это разметка для сниппетов. Сниппет — это превью странички в поисковиках и соц. сетях, и чаще всего, именно глядя на сниппет пользователь принимает решение о переходе на страницу.

Сниппеты в поисковиках

Про то, как сделать хороший сниппет с точки зрения SEO информации довольно много, на этом я не стану останавливаться. Первым делом я бы рекомендовал добавить разметку для "хлебных крошек", которая позволит отображать их вместо ссылки в сниппете. Это и более читаемо и более удобно пользователям — получить сразу ссылки на родительские разделы.

Если не вдаваться в технические подробности, то самый простой способ завернуть крошки в семантику для Drupal — это модуль Path Breadcrumbs. Данная возможность включается в настройках, поддерживает два стандарта разметки и работает на любых крошках, даже если они сделаны другим модулем.

Еще один способ, более хардкорный — это темизация вывода крошек в файле templates.php темы сайта. К контейнеру и элементам крошек необходимо добавить специальные атрибуты (документация). Пример для стандарта RDF:

/**
 * Overrides theme_breadcrumb().
 * Put Breadcrumbs in a ul li structure with RDF markup.
 */
function THEMENAME_breadcrumb($variables) {
  $breadcrumb = $variables['breadcrumb'];
  $output = '';

  if (!empty($breadcrumb) && count($breadcrumb) > 1) {
    $output .= '<h2 class="element-invisible">' . t('You are here') . '</h2>';
    $output .= '<ul class="breadcrumbs clearfix" xmlns:v="http://rdf.data-vocabulary.org/#">';

    foreach ($breadcrumb as $breadcrumb_item) {
      $output .= '<li typeof="v:Breadcrumb">' . $breadcrumb_item . '</li>';
    }

    $output .= '</ul>';
  }

  // Add RDF properties to links
  $output = preg_replace('/(<a href[^<>]+)>/is', '\\1 rel="v:url" property="v:title">', $output);

  return $output;
}

Пример сниппета в Google

Так же не вижу причин не передать в сниппет информацию об авторстве, если таковая присутствует на страничке.

Отображение автора пока заявлено только Google, и для этого нужен профиль Google+. При этом, либо почтовый ящик автора должен быть на том же домене, что и сайт, либо потребуется добавить немного дополнительной разметки на странички. С первым вариантом все просто, но если он не подходит, то вот пример реализации второго, в файле templates.php темы сайта:

/**
 * Overrides theme_preprocess_node().
 */
function THEMENAME_preprocess_node(&$variables) {
  $author = '<span rel="sioc:has_creator"><a href="GOOGLEPLUSURL?rel=author" title="View user profile on Google+" typeof="sioc:UserAccount" property="foaf:name">USERNAME</a></span>';
  $date = '<span>' . $variables['date'] . '</span>';
  $variables['submitted'] =  t('Submitted by !username on !datetime',
    array(
      '!username' => $author,
      '!datetime' => $date,
    ));
}

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

Сниппет в социальных сетях

Представлению сайтов в соц. сетях вообще редко уделяется внимание... Соц. сетей много, у каждой свои особенности формирования сниппета, но общий принцип примерно такой же, как в поисковиках: когда пользователь делится ссылкой на сайт, соц. сеть переходит по ней и ищет необходимую информацию. И тут мы можем помочь сетям получить правильные данные. Это делается с помощью метатегов. Заголовок и описание обычно неплохо определяются автоматически, даже в базовой поставке Drupal 7 есть модуль RDF, который добавляет кое-какую семантику.

Если вас не устраивает стандартные настройки семантической разметки в Drupal, то их можно частично переопределить модулем Metatag. Этот модуль так же позволяет указать значения других тегов, например пути к картинкам-превьюшкам для различных стандартов разметки:

Управление → Конфигурация → Поиск и метаданные → Мета-тег → Содержимое → Переопределить
(Administration → Configuration → Search and metadata → Metatag → Node → Override)

В полях Изображение для разделов Open Graph, Twitter Card и Расширенный указать путь к картинке, например:

[site:url]sites/default/files/[node:field-image:file]

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

Пример сниппета в Google+

Пример сниппета в VK

Если вы используете для отображения социальных кнопок модуль Yandex.Share with Counters, то в последних версиях путь к картинке передается в атрибутах к ссылкам, но так как не все соц. сети его принимают, указать путь в метатегах все равно стоит.

Итог

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

А какие метатеги и микроформаты используете вы?