Домой Без рубрики Как добавить Rich Snippets для обзоров и рейтингов без какого-либо плагина? Структурированная...

Как добавить Rich Snippets для обзоров и рейтингов без какого-либо плагина? Структурированная разметка микроданных Google Schema.org

389
0

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

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

Прежде чем мы начнем, давайте разберемся, что такое 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 по умолчанию предусмотрена возможность просмотра структурированных данных. Посмотрите на диаграммы ниже.

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

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

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

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

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

  • Включение Rich Snippets для обзоров и рейтингов
  • Структурированные данные для обзора
  • Структурированные данные для рейтинга
  • Генератор рейтинговых схем
  • Схема создатель для «Обзор» schema.org микроданных
  • богатый фрагмент обзора генератора
  • Google богатый фрагмент для обзора
  • инструмент предварительного просмотра богатых фрагментов
  • богатый фрагмент для сообщения в блоге WordPress
  • Рецепт для богатого фрагмента сайта
ЧИТАТЬ ТАКЖЕ:  Github: Как создать репозиторий Github, создать запрос на извлечение и объединить?

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

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

Google Schema.org Просмотрите фрагмент кода

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.com/go/genesis целевых = _blank> itemprop = имя> <сильный> Genesis WordPress Theme Framework Обзор STRONG> промежуток> о> промежуток>
     < p > < / p >
     < strong > Описание : STRONG> itemprop = «описание»> Один из лучших Рамочная тема WordPress , который мы используем на Crunchify . ком . По умолчанию поставляется с Google 's богатая схема . Фрагмент орг микроданных . < / span >
     < span itemprop = автор itemscope ItemType = http://schema.org/Person> <сильный> Автор: STRONG> < span itemprop = name > App Shah < / span > < / span >
     < span itemprop = reviewRating itemscope itemtype = http://schema.org/Rating > < strong > Рейтинг : < / strong > < span itemprop = ratingValue > 5 < / span > из < span itemprop = bestRating > 5 < / span > < / span >
     < span itemprop = издатель 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/

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

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

На Crunchify мы используем ниже CSS. Просто добавьте приведенный ниже код в файл style.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 — рейтинг {
переполнение : скрытый ;
поле — снизу : 35 пикселей ;
граница — радиус : 3 пикселя ;
коробка — тень : 0 0 2px 0 RGBA (0, 0, 0,. 12), 0 2px 2px 0 RGBA (0, 0, 0, 24) . ;
размер шрифта : 16 пикселей ;
цвет : # 333;
набивка : 30px 60px 5 пикселей ;
фон : #fff;
граница — слева : 2px твердый # 157BDA;
}
, crunchify — рейтинг : раньше {
содержание : «Рейтинг» ! важно ;
размер шрифта : 16 пикселей ;
текст — преобразование : прописные буквы ;
цвет : #fff;
плавать : слева ;
поле : 2px 15px 15px 0 ;
фон : # 157BDA;
набивка : 0px 20 пикселей ;
граница — радиус : 30 пикселей ;
}

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

Просто добавьте выше CSS-контент под вашей страницы в

ЭТО ИНТЕРЕСНО