Как добавить звездочки рейтинга в сниппет Гугла

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

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

Его цель не только задержать читателей на сайте и повысить количество просматриваемых страниц, но и усилить доверие к вашему сайту и лично к вам (если сайт авторский).

Что может заинтересовать посетителя и задержать его на сайте?

1. Контент:

  • Интересные статьи.
  • Удобные сервисы по теме сайта.
  • Тематические изображения и видео в статьях.

2. Доверие к автору и сайту:

  • Информация о сайте и авторе – страница автора.
  • Возможность связаться с автором – форма для контактов, email или телефон.

3. Поощрение активности пользователей:

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

4. Красивый дизайн и удобный в использовании сайт.

Сегодня я расскажу о том, как добавить на сайт простой "звездный" рейтинг постов без использования сложных и тяжелых плагинов. Кроме того, наш рейтинг будет содержать микроразметку для рейтинга, а это значит, что его звезды будут отображаться в ПВ (поисковой выдаче) Google и привлекать внимание к сниппету сайта. Вот так:
Рейтинг в сниппете

А шансов на то, что пользователь кликнет на сниппет со звездами намного больше, так что с их помощью мы сможем увеличить СТР (кликабельность) страниц в выдаче.

Наличие рейтинга на сайте, также, может помочь ему попасть в РСЯ (рекламная сеть Яндекса) – ее модераторы всегда обращают внимание на дополнительные сервисы ресурса.

Как правило, рейтинги создают при помощи плагина WP-PostRatings.
Не буду спорить, плагин этот очень функциональный и позволяет реализовать самые разные рейтинги, но при этом, он:

  1. Сильно тормозит загрузку сайта.
  2. Конфликтует со многими другими плагинами, например плагином увеличения изображений по клику, который также работает на технологии Ajax.

Всех этих недостатков лишен скрипт рейтинга, который я предлагаю вам.

Итак, переходим к созданию звездного рейтинга:

↓ Скачать скрипт рейтинга сайтов можно по ссылке ниже

Уже скачали 164 раз(а)

Открыть ↓

После распаковки архива, вы получите папку ratings и файлы:
- functions.php,
- footer.php,
- single.php и
- style.css.

Папку ratings нужно добавить в папку с вашей темой.
А код из файлов functions.php, footer.php, single.php и style.css перенести, соответственно, в файлы functions.php, footer.php, single.php и style.css вашей темы.

В functions.php и footer.php – в начало файла, в style.css – в конец файла.
В single.php после тега

<?php the_content(); ?>

Обратите внимание! В footer мы подключаем скрипт rating.js и jquery-библиотеку jquery.min.js.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/rating/rating.js"></script>

Одна из версий jquery-библиотеки уже может присутствовать на вашем сайте, поэтому, прежде, чем ее подключить, посмотрите HTML код страницы сайта (вызвать контекстное меню правой клавишей мыши и найти в нем пункт "Исходный код страницы" или "Просмотр кода страницы").

Если найдете в коде что-то похожее на jquery.min.js, тогда подключите только скрипт rating.js. И, только, если рейтинг не заработает с вашей jquery-библиотекой, можно подключить версию 1.8.2.

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

Если после этого звездочки не появятся, проверьте правильность пути к папке ratings для скриптов и изображению со звездами в файле style.css.

Вот, что должно получиться:

Как добавить звездочки рейтинга в сниппет гугла

Как я написала выше, скрипт рейтинга имеет микроразметку для рейтинга.
Для того, чтобы страница с добавленным рейтингом была размечена корректно, в ее код нужно добавить параметры itemscope itemtype="http://schema.org/Article", указывающий на тип контента (в нашем случае - Статья). Это нужно для того, чтобы указать, к чему именно относится наш рейтинг.

Если этого не сделать, то при проверке, валидатор выдаст вам ошибку "Не указан объект отзыва" - рейтинг ведь не может существовать сам по себе, он всегда относится к одному из элементов сайта.

Добавить эти параметры можно к любому тегу, который расположен в файле single.php выше кода

<?php if ( have_posts() )

Вот так:

<div itemscope itemtype="http://schema.org/Article">

Также, нужно добавить к тегу H1 параметр itemprop="headline", вот так:

<h1 itemprop="headline"><?php the_title(); ?></h1>

Другие теги микроразметки для статей можно посмотреть на http://schema.org/Article и добавить те, которые вам нужны.

После этого пост, с добавленным к нему рейтингом, можно проверить в валидаторе микроразметки:

Google - https://developers.google.com/structured-data/testing-tool/ и
Яндекса - http://webmaster.yandex.ua/microtest.xml.

Напоследок, предлагаю посмотреть вебинар по выводу сайтов из АГС при помощи контента, создающего добавочную стоимость.

Продолжение следует :), чтобы не пропустить новую статью, подпишитесь на получение обновлений сайта ».

Как улучшить поведенческие факторы при помощи контента, создающего добавочную ценность:

Хотите получать сообщения о скидочных акциях,
новых постах и темах для wordpress?
  1. Здравствуйте! Почему данный материал в выдаче Google выдается без звездочек?

    • Если вы спрашиваете об этой статье, то в ней нет рейтинга :), поэтому он никак не может присутствовать в поисковой выдаче.

      К тому же, отображение сниппета в выдаче зависит от ПС - как она посчитает нужным, так и покажет. Мы можем только добавить нужный контент, а что из него выберет для показа ПС, зависит только от нее.

  2. Людмила добрый день. Спасибо за статью очень интересно. Пожалуй задам вопрос по теме. Как с помощью микроразметки создать изображение в поиске , как у вас на картинке ?

    • Добавить параметр itemprop="image" к тегу картинки. Но, это не гарантирует того, что картинка появится в поиске.

  3. Здравствуйте, а как почистить кэш плагина кэширования?

    • Зависит от того, какой плагин. В нем должна быть кнопка - Очистить кэш.

  4. Здравствуйте, А где разместить код в шаблоне Cooking Secrets? А то выдает ошибку:
    ОШИБКА: невозможно определить принадлежность данных полей. Возможны две причины: эти поля некорректно размещены, либо указан лишний атрибут itemprop

  5. Что-то глюкануло и сайт вообще пропал. Пришлось все обратно вычищать.

    • По видимому, вы что то нарушили в шаблоне.
      Нужно аккуратней :).

  6. Здравствуйте! Спасибо за работу!
    Но вот проблема, отображается почему то криво, все сделал правильно, причину вроде нашел, у вас не обозначен класс для 1 и так далее до 5, и он берет из шаблона фон у списка, вот скриншот
    https://yadi.sk/i/eniKPMsZjPjLk - это после голосования
    вот до голосования при наведении - https://yadi.sk/i/cKz5xnZNjPjQc

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

      В этом случае стили нужно править по месту. Не зная, что у вас в шаблоне со стилями, помочь вам трудно.

  7. У меня возникает проблема со вставкой кода в functions.php , сразу сайт становится недоступен.

    • Попробуйте вставить в нижнюю часть файла.

  8. Спасибо!
    У меня все получилось ровненько и красиво.

  9. Уже с трёх почтовых ящиков подписался чтобы получить заветный код, приходит один и тот же код для разблокировки, но он недействителен почему то.

    • Исправили в письме.
      Хотела выслать Вам код на почту, но ваш почтовый сервер не принимает почту.

      Поэтому, придется вам подписаться еще раз.

      • Людмила добрый день. Еще потревожу вас по поводу рейтинга . Все получилось , но нет возможности голосовать . Звезды появились, цвет меняют при наведении, а голосовать нет возможности. Где я мог ошибиться ?

        • Возможно, с подключением js.

  10. Людмила, добрый день!
    Вчера по неосмотрительности удалил письмо с кодом рейтинга. Пытался вспомнить - не получается. Подписался еще раз, потом еще. Письма так и нет. Может как-то сможете помочь в данной ситуации?
    С уважением!

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

  11. Разобрался. У меня создан дочерняя тема. В таком случае подключить файл rating.php необходимо через функцию. В functions.php дочерние темы необходимо прописать
    require_once( get_stylesheet_directory() . '/ratings/rating.php'); Остальное согласно статье.

  12. Здравствуйте! По неосторожности потерял письмо с кодом доступа к 5-ти звездочкам снипета. Уже 7-й раз подписываюсь и не приходит никаких писем. :(

  13. Не работает, вот результат: http://pix.my/MDnLBRDg

    • Значит, что то не так сделали.

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

  14. Вечер добрый! Было бы круто не под wp такой рейтинг?
    Есть статические сайты на php и html, как бы туда впихнуть? Через MySQL?
    Спасибо)

    • Этот рейтинг можно поставить на любой сайт, работающий на PHP.

  15. Здравствуйте, не выходит, пробовал вставлять код functions в начало и конец одна и та же ошибка, сайт проподает. В чем может быть причина.

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

Для того чтобы снять блок и увидеть скрытый контент или ссылку на закачку, подпишитесь на обновления блога.

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 196
Отзывов 4381