Статьи

Главная › Новости

Рейтинг статьи в виде звезд без плагина для расширенного сниппета

Опубликовано: 01.09.2018

Добрый день, друзья!

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

Сегодня публикую второй материал по данной теме, вслед за первым, где мы сделали рейтинг статьи в виде звезд для сайта на WordPress с помощью плагина Wp-PostRatigns.

Сегодня я покажу реализацию рейтинга без плагина, который имеет следующий вид.

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

Почему я отказался от плагина

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

У меня на блоге без плагина реализованы следующие решения:

Скрипт увеличения изображений по клику; Комментарии от Cackle; Раскрывающийся спойлер для скрытия текста.

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

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

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

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

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

к содержанию ↑

Рейтинг со звездами без плагина

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

Папку, находящуюся в архиве мы загружаем на хостинг в папку с шаблоном, чтобы реализовать такой путь: site.ru/wp-content/themes/название темы/ratings.

Далее нужно подгрузить php файл из загруженной папки. Для этого в файл шаблона functions.php добавляем следующую строчку.

require_once ( 'ratings/rating.php' ) ;

Затем подгружаем скрипт из этой же папки. Копируем следующую строку в файл footer.php перед закрывающим тегом body, чтобы скрипт грузился в самом конце.

<script src = "<?php bloginfo('stylesheet_directory'); ?>/ratings/rating.js" > </script>

Можно разместить его и в секции head сайта, но я такой вариант не люблю, так как он делает шапку сайта объемной и сайт становится грузиться медленнее.

Дальше необходимо подгрузить стили оформления. Для этого выводим путь к файлу стилей в файше шаблона header.php в секции head.

< link rel = "stylesheet" href = " <?php bloginfo ( 'stylesheet_directory' ) ; ?> /ratings/rating.css" >

Можно избавиться от лишней строчки кода в области head сайта, не добавляя строку для вывода стилей рейтинга. Для этого откройте файл ratings.css в папке, которую скачали ранее, скопируйте с него все стили и разместите их в общем файле стилей шаблона оформления.

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

Заметьте, что в 2х последних кодах имеются php функции, которые автоматически определяют путь к папке с вашим шаблоном. Если вдруг у вас не будет данный код работать (можно посмотреть сгенерированный путь в исходном коде страницы), то придется прописать полный путь к файлам уже в готовом виде.

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

После этого рейтинг будет полностью работать и вы увидите большие иконки.

При наведении на иконки они будут становиться зеленым цветом, что обозначает текущую иконку для выбора оценки.

После оценки сразу без перезагрузки страницы выставится рейтинг и иконки станут оранжевыми. Без оценок все иконки имеют светло-серый цвет.

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

Кстати, добавляется комбинированный вариант с использованием микрроданных и языка RDFa. Было бы лучше, если бы использовалось что-то одно, но с таким комбинированием разметка работает и отображается в выдаче поиска google, что нам и нужно от данного рейтинга.

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

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

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

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

Убрал выделения жирным надписей в рейтинге, так как это совершенно не нужно. С точки зрения красоты это прибавляет эффект, но в оптимизации никакого плюса не дает, а наоборот - только хуже; Избавился от правила "display:none" в исходном php коде скрипта, который скрывает микроразметку рейтинга от пользователей. Это неправильно, ведь поисковые системы разметку видят, а от пользователей она скрыта. а, как гласят правила поисковиков "содержимое для поисковых роботов и посетителей не должно отличаться". Поэтому, данное скрытие я убрал.

Последним шагом проверяем работу рейтинга в сниппете гугла.

к содержанию ↑

Проверка структурированных данных в google

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

Если рейтинг отображаться будет, то все сделали правильно.

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

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

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

Все, ждите материал. Будем делать наш ресурс лучше. До связи.

С уважением, Константин Хмелев!

P.S. Это важно. Если у вас на сайте не встроена микроразметка от schema.org и страница не выделена соответствующим тегом (schema.org/Article), как объект отзыва, то при проверке работы данной реализации рейтинга в инструментах структурированных данных Google и валидаторе Яндекса, вам будет выдавать ошибки, что не указан объект отзыва. Это связано с тем, что рейтинг будет стоять сам по себе, не принадлежа ни одному из элементов сайта.

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