Всем привет, последнее время в чатах опять бурно обсуждается вопрос микроразметки:
- Как сделать звезды в снипете?
- Schema или микроформаты?
- Как разметить F.A.Q. на странице?
- А шо правда могут ручник дать если не то разметить?
- Дайте плагин для WP!!
Расскажу, как сделали мы для своего сайта в Essay нише
Кто или что надо для того чтобы это сделать?
Верстальщик или минимальные знания HTML, доступ к коду страницы, руки, пара онлайн инструментов, schema.org, 1 час времени.
И так, наша страница содержит отзывы наших клиентов, а также блок F.A.Q.
Разметка Блока ❓F.A.Q.❓
По простому разметка для человека, выглядит вот так:
Вопрос: Можете ли вы супер быстро написать моё эссе?
Ответ: Ага.
То есть, есть вопрос, есть ответ. — важно!
Вот точно также — только добавляются разные теги. Осторожно КОД!
<span itemprop=»mainEntity» itemscope=»» itemtype=»https://schema.org/Question»><details><summary>
<dt class=»s-15question» itemprop=»name»>
<span class=»h—sm»>❓ТУТ ВОПРОС❓</span></dt></summary><dd class=»s-15answer» itemprop=»acceptedAnswer» itemscope=»» itemtype=»https://schema.org/Answer»>
<span itemprop=»text» class=»p—md»>❗️ТУТ ВАШ ОТВЕТ❗️</span>
</dd></details></span>
Покажите верстальщику, он поймёт.
Разметка звёзд ⭐️⭐️⭐️⭐️⭐️
Здесь следует добавить, что по началу у нас на странице стояла разметка от schema.org, local business, в которой также есть разметка отзывов ggregateRating, но она не работала, в снипете ничего не отображалось.
Есть два типа показа рейтинга на страницах:
Первый, когда вы позволяете оставлять голос пользователям сайта, посредством нажатия на звездочку.
У нас не так, поэтому я думаю и не работал вывод через schema.org.
Второй, когда вы выводите на страницу рейтинг вашей услуги, кол-во отзывов. Это наш случай.
Если вы просто выводите рейтинг услуги или товара, на страницу без возможности оставлять голос прям со страницы.
Тогда лучше используйте метод микроформатов — hreview-aggregate.
Полное название — «Микроформаты сводных обзоров»
Как сделали мы👇
И так на странице у нас есть блок с отзывами, где есть 2 куска текста:
Не обязательный текст для красоты:
«Наш рейтинг, такой то, бла бла бла»
❗️Нужный текст:
«Average rating for 9999 reviews: 4.9/5)»
Далее мы разметили эти 2 куска текста таким образом:
<div class=»sb-9rt-b hreview-aggregate»><p class=»p—sm rating»>Тут у нас красивый текст, у вас может не быть, это не важно<span class=»item»>about our <span class=»fn»>Название услуги — Essay Service, тоже не обязательно</span>
</span>
И вот конкретно разметка самого важного:
(Average rating for <span class=»count»>общее количество отзывов — 99999</span> reviews: <span class=»average»>средняя оценка — 4.9</span>/<span class=»best»>5</span>)
И вуаля, мы получили заветный снипет использовав 2 простых метода.
Живой пример:
1. Разметка F.A.Q. — onlinecasinohex.ca/online-casinos/spartan-slots/
2. Разметка для звёзд. — essayhave.com/essay-writing-service.html
Вывод Перешлите данный пост верстальщику, покажите, что именно дало звезды в снипете, а что дало блоки и поставьте заветное ТЗ с описанием — «СДЕЛАТЬ ТАКЖЕ».
Полезные ссылки:
https://search.google.com/structured-data/testing-tool/
https://developers.google.com/search/docs/data-types/faqpage
https://schema.org/docs/schemas.html