Как добавить расширенные сниппеты для обзоров и оценок без каких-либо плагинов? Разметка микроданных Google Structured Schema.org

Опубликовано: 2020-04-21
Как добавить расширенные сниппеты для обзоров и оценок без каких-либо плагинов? Разметка Google Structured Schema.org

Вы когда-нибудь задумывались how and why Google показывает рейтинг для некоторых специальных обзоров на странице результатов поиска Google (SERP)?

В этом уроке мы собираемся обсудить, как add rich snippet для обзора / рейтинга в форме schema.org , чтобы Google мог понять детали вашего обзора и показать его на странице поиска.

Crunchify - темы Genesis - Страница Google подходит для расширенных результатов

Оформить заказ в реальном времени: https://crunchify.me/2VAUkTK. Ссылка на расширенный сниппет.

Прежде чем мы начнем, давайте разберемся, что такое schema.org?

Схема — это тип microdata , упрощающий поисковым системам Google или Bing анализ и более effectively интерпретацию информации на страницах вашего блога. Идея состоит в том, чтобы помочь поисковым системам понять все данные в structured format , чтобы поисковая система также показывала эти релевантные данные результатов конечным пользователям на основе поисковых запросов.

Давайте начнем:

Пункт 1) Как добавить структурированные данные в свой блог в виде schema.org?

В Crunchify мы используем Genesis Framework, и он по умолчанию поставляется со всеми форматами schema.org microdata . Он выводит микроданные в код вашего сайта. Мне не нужно ничего добавлять, и в этом вся прелесть Genesis Framework, за исключением параметра « Review metadata », который мы собираемся discuss below .

Пункт 2) Как проверить структурированные данные вашего сайта?

Google Search Console по умолчанию предоставляет возможность просмотра структурированных данных. Взгляните на приведенные ниже диаграммы.

Консоль поиска Google — Отчет о структурированных данных — Crunchify
Проверьте все типы структурированных данных Schema.org в Google Search Console.

Чтобы увидеть эти данные, вам нужно добавить свой сайт/блог в Search Console. После того как вы подтвердите подлинность своего сайта, вы сможете сразу увидеть данные OR подождите неделю, пока эти данные будут сгенерированы automatically .

Пункт 3. Как проверить, являются ли ваши структурированные данные действительными или имеют какие-либо проблемы?

  • В дополнительном последнем столбце приведенной выше диаграммы « Items with Errors » Google также предоставляет дополнительный инструмент под названием «Инструмент тестирования структурированных данных».
  • Просто зайдите туда и нажмите « Fetch URL ».
  • Укажите URL-адрес и нажмите FETCH & VALIDATE .
  • С правой стороны вы должны увидеть результат проверки schema.org.
  • В случае сбоя и плохой schema.org — вы должны увидеть сообщение КРАСНОГО цвета.
Советы по инструменту тестирования структурированных данных Google
Результат теста структурированных данных для Crunchify Post

Expand above Review section и вы сможете увидеть все подробные микроданные для вашего обзора. Вы могли бы проверить это самостоятельно. Here is a URL.

Этот учебник будет работать, если у вас есть какие-либо из следующих вопросов:

  • Включение расширенных сниппетов для отзывов и оценок
  • Структурированные данные для проверки
  • Структурированные данные для рейтинга
  • Генератор схемы совокупного рейтинга
  • Создатель схемы для микроданных «Обзор» schema.org
  • генератор обзоров расширенных сниппетов
  • расширенный фрагмент Google для обзора
  • инструмент предварительного просмотра расширенных фрагментов
  • расширенный фрагмент для поста в блоге WordPress
  • рецепт сайта с расширенными сниппетами
Crunchify – генезис – просмотрите детали схемы фрагментов

Шаг 4. Давайте добавим сниппет Review Schema.org

Вот код HTML, который вам нужно поместить в панель редактирования сообщения в разделе TEXT section .

1
2
3
4
5
6
7
8
9
10
< div class = "crunchify-rating" itemscope itemtype = "http://schema.org/Review" >
     < span itemprop = "itemReviewed" itemscope itemtype = "http://schema.org/Thing" style = "font-size: 14px;" > < a itemprop = "url" href = "https://crunchify.me/genesis" target = "_blank" > < span itemprop = "name" > < strong > Genesis WordPress Theme Framework Review < / strong > < / span > < / a > < / span >
     < p > < / p >
     < strong > Description : < / strong > < span itemprop = "description" > One of the best WordPress Theme Framework which we use on Crunchify . com . Default comes with Google ' s rich schema . org snippet microdata . < / span >
     < span itemprop = "author" itemscope itemtype = "http://schema.org/Person" > < strong > Written by : < / strong > < span itemprop = "name" > App Shah < / span > < / span >
     < span itemprop = "reviewRating" itemscope itemtype = "http://schema.org/Rating" > < strong > Rating : < / strong > < span itemprop = "ratingValue" > 5 < / span > out of < span itemprop = "bestRating" > 5 < / span > < / span >
     < span itemprop = "publisher" itemscope itemtype = "http://schema.org/Organization" >
         < meta itemprop = "name" content = "Crunchify, LLC." / >
     < / span >
< / div >

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

URL-адрес с примером живого обзора: https://crunchify.com/crunchify-co-moved-to-genesis-framework-thesis-vs-genesis/

Genesis Framework Review от Crunchify — лучшая тема для микроданных schema.org

Вот и все. После того, как вы добавите приведенный выше код в свое сообщение в блоге, снова вернитесь к Google Structured Data Validation tool и проверьте URL своего сообщения :). Обновление публикации в поисковой выдаче на основе алгоритма обхода может занять до week .

Какой CSS мы используем в Crunchify?

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
. crunchify - rating {
overflow : hidden ;
margin - bottom : 35px ;
border - radius : 3px ;
box - shadow : 0 0 2px 0 rgba ( 0 , 0 , 0 , . 12 ) , 0 2px 2px 0 rgba ( 0 , 0 , 0 , . 24 ) ;
font - size : 16px ;
color : #333;
padding : 30px 60px 5px ;
background : #fff;
border - left : 2px solid #157BDA;
}
. crunchify - rating : before {
content : "Rating" ! important ;
font - size : 16px ;
text - transform : uppercase ;
color : #fff;
float : left ;
margin : 2px 15px 15px 0 ;
background : #157BDA;
padding : 0px 20px ;
border - radius : 30px ;
}

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

Просто добавьте CSS-контент выше в <head> вашей страницы под HTML-тегом <style amp-custom> .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
   < head >
     . . .
     <style amp-custom>
      /* any custom styles go here. */
.crunchify-rating {
overflow : hidden ;
margin-bottom : 35px ;
border-radius : 3px ;
box-shadow : 0 0 2px 0 rgba ( 0,0,0,.12 ) , 0 2px 2px 0 rgba ( 0,0,0,.24 ) ;
font-size : 16px ;
color : #333 ;
padding : 30px 60px 5px ;
background : #fff ;
border-left : 2px solid #157BDA ;
}
.crunchify-rating:before {
content : "Rating" !important ;
font-size : 16px ;
text-transform : uppercase ;
color : #fff ;
float : left ;
margin : 2px 15px 15px 0 ;
background : #157BDA ;
padding : 0px 20px ;
border-radius : 30px ;
}
     </style>
     . . .
   < / head >

Позвольте мне знать, если у вас есть еще вопросы.

Не забудьте получить копию Genesis Framework.

Счастливый блог.