Микроразметка Schema.org: что это, как реализовать, примеры

Основы микроразметки Schema.org

• Что такое микроразметка сайта?
  Микроразметка сайта — это способ показать поисковым системам важные элементы на вашем сайте. Также это способ создать расширенные сниппеты на поиске и получить больше кликов, увеличить CTR на поиске и, соответственно, улучшить позиции на поисковой выдаче.
  
  
• Что такое Schema.org?
  Schema.org — это словарь, с помощью которого можно размечать страницы, чтобы они были понятны поисковым системам Google, Яндекс, Mail.ru, DuckDuckGo, Bing, Rambler.
  
  
• Есть ли Schema.org на русском?
  Да, есть. Находится перевод проекта по адресу ruschema.org.
  
  
• Как проверить микроразметку на сайте?
  Для этого существуют валидаторы микроразметки.
  
  
• Как проверить есть ли на сайте микроразметка?
  Достаточно ввести URL сайта в один из валидаторов микроразметки и вы увидите есть ли на сайте микроразметка.
  
  
• Рекомендации Google по применению микроразметки
  Большое количество рекомендаций по работе со структурированными данными от Google вы можете найти здесь с примерами.
  
  
• Какую микроразметку использовать для своего сайта?
  Изучите статью о том, какие бывают виды микроразметок. Так вам будет проще какой вид микроразметки использовать на сайте.
  
  
• Генератор микроразметки Google
  На самом деле он называется мастером разметки структурированных данных от Google.
  
  
• Как влияет разметка Schema на индексацию Google?
  Никак не влияет на индексацию.
  

Как проверить "правильность" микроразметки Schema.org?

Для проверки валидации ("правильности") микроразметки предназначены специальные сервисы, которые были разработаны поисковыми системами. Мы будем в данной статье проверять микроразметку для поисковой системы Yandex и Google.

Вот ссылки на два сервиса проверки валидации микроразметки Schema.org:

• Валидатор микроразметки от Google
• Валидатор микроразметки от Yandex
• Проверка наличия расширенных сниппетов в Google

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

Как пользоваться валидаторами микроразметки?

Во-первых: чтобы использовать данные сервисы валидации Вам нет необходимости регистрироваться. Просто зайти по ссылкам выше сразу можете пользоваться. Сейчас буквально пару слов о каждом из валидаторов.

Итак, начнем с валидатора от Google. Страница выглядит следующим образом:


Есть два варианта проверки валидации страницы:

1. С помощью прямой вставки HTML кода
2. С помощью вставки URL адреса страницы, которую необходимо проверить

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

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

После проверки в валидаторе Google появится слева код Вашей HTML страницы, а справа — какая микроразметка там присутствует и есть ли там ошибки:


С валидатором Google я думаю все понятно. Перейдем к валидатору от Yandex.

Когда Вы зайдете на сайт с валидатором микроразметки от Yandex, Вы увидите несколько иную картину, но смысл там остается тот же:


Здесь интерфейс немного проще и опять же есть два варианта проверки Вашего HTML кода: с помощью вставки исходного кода страницы, либо с помощью вставки лишь URL необходимой страницы.

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


Валидатор Yandex и Google будут давать Вам рекомендации сразу на русском языке. Но и этого бывает мало, потому что у всех ошибки разные и зависят от конкретного контекста страницы и HTML структуры.

Где проверять свою микроразметку Вы сейчас знаете. Поэтому немедленно перейдите на свой сайт, скопируйте URL ссылку первой же статьи и проверьте ее на валидацию.

Очень много ошибок? Не волнуйтесь, все можно исправить. Главное разобраться в этом постепенно исправить все ошибки.

Шаг 1. Что необходимо разметить на странице?

Словарь микроразметки Schema.org очень большой. Здесь можно найти формат разметки практически любого типа записей. В прошлой статье я приводил основной список форматов, которые поддерживаются данная микроразметка: адреса и организации, видео, программы, рефераты, изображения, статьи, фильмы и так далее.

Поэтому первым шагом необходимо определиться с основным шаблоном и правильно его подготовить. А у же потом переносит на реальный сайт.

В данной статье я покажу как сделать пример для сайта, под управлением CMS WordPress. А на данной CMS чаще всего создают блоги. Поэтому будем писать разметку для такого типа страниц, как "Статья".

Далее нам необходимо определить, какую сущность из словаря мы будем использовать. На официальном ресурсе Schema.org есть следующая структура: Article. Но внутри нее есть подструктуры, которые мы можем использовать. Спускаясь все глубже по подструктурам я нашел следующий тип: BlogPosting. Он является частным вариантом сущности Article. И он отлично подходит для разметки записей на блогах.

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


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


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

 

Шаг 2. Формируем шаблон микроразметки

Что именно будем размечать стало понятно. Осталось собрать правильную структуру.

Основная суть микроразметки (технически): добавить к необходимым тегам дополнительные атрибуты. Иногда добавить дополнительные теги для структуры.

ВАЖНО: Google постоянно вносит изменения и оставил «звездочки» только для страниц с продуктами. Есть сайты, которые это обходят, но все же желательно размечать так, как этого требует Schema.org. Поэтому сейчас код был изменен и «звездочки» на поиске можно сделать только в сущности Product. Это больше относится к таким услугам и товарам, но не к обычным статьям.

Без прелюдий перейдем сразу к делу. После многочисленных попыток сделать микроразметку Schema.org валидной для Google и Яндекса получилась следующая структура:

HTML КОД

1. <!-- Используем тип "BlogPosting" -->
2. <div itemscope="" itemtype="http://schema.org/BlogPosting">
3. <!-- Ссылка на статью -->
4. <linkitemprop="mainEntityOfPage" itemscope="" href="Ссылка на статью">
5. <!-- Данные о сайте: лого, телефон, адрес, название -->
6. <divitemprop="publisher" itemscope="" itemtype="https://schema.org/Organization">
7. <divitemprop="logo" itemscope="" itemtype="https://schema.org/ImageObject">
8. <imgalt="Лого sitehere.ru"itemprop="image url"data-src="https://sitehere.ru/favicons/favicon-160x160.png"class="lazyload"src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><imgalt="Лого sitehere.ru"itemprop="image url"src="https://sitehere.ru/favicons/favicon-160x160.png"/></noscript>
9. <metaitemprop="width"content="160">
10. <metaitemprop="height"content="160">
11. </div>
12. <metaitemprop="telephone"content="-">
13. <metaitemprop="address"content="Россия">
14. <metaitemprop="name"content="sitehere.ru">
15. </div>
16. <!-- Дата публикации статьи -->
17. <metaitemprop="datePublished"content="2016-01-24">
18. <!-- Дата последнего изменения статьи -->
19. <metaitemprop="dateModified"content="2016-01-24">
20. <!-- Автор статьи -->
21. <spanitemprop="author" itemscope="" itemtype="http://schema.org/Person">
22. <spanitemprop="name">Юрий Немец</span>
23. </span>
24. <!-- Тело статьи -->
25. <divitemprop="articleBody">
26. <!-- Заголовок статьи -->
27. <h1itemprop="headline">Заголовок</h1>
28. <!-- Главное изображение статьи -->
29. <spanitemprop="image" itemscope="" itemtype="https://schema.org/ImageObject">
30. <imgitemprop="image url"alt="Описание картинки"width="500"height="280"data-src="https://sitehere.ru/wp-content/uploads/2016/01/microrazmetka-schema-org.png"class="lazyload"src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><imgitemprop="image url"alt="Описание картинки"width="500"height="280"src="https://sitehere.ru/wp-content/uploads/2016/01/microrazmetka-schema-org.png"/></noscript>
31. <metaitemprop="width"content="500">
32. <metaitemprop="height"content="280">
33. </span>
34. <p>Основной текст статьи.</p>
35. </div>
36. </div>

Так выглядит обычная статья без сторонних дополнений. Код получился действительно немаленький. Сейчас поясню буквально по строкам и расскажу где какие присутствуют нюансы:

• Строка 1: объявляем тип контента, который будет размечен.
• Строка 5: здесь указываем URL адрес страницы, на которой сейчас находится пользователь, то есть адрес текущей статьи.
• Строка с 8 по 18: небольшая подструктура, в которой необходимо указать более подробно сведения о сайте: логотип (адрес до изображения и его размеры), телефон, адрес и название компании (сайта).
  • Строка 9 по 13: еще одна подструктура с выводом изображения, то есть логотипа. Все изображения, которые необходимы для микроразметки необходимо выводить именно в такой структуре, где помимо адреса до изображения в meta-тегах еще указывается информация о его размерах.
  • Строка 14: указываем телефон, если он есть.
  • Строка 15: реальный адрес, если работаете в офисе, например.
  • Строка 16: здесь пишем название компании.
• Строка 21: дата публикации статьи. Здесь будьте очень внимательны, потому что ее указывать необходимо в специальном формате: "ГОД-МЕСЯЦ-ДЕНЬ". И обязательно разделитель должен быть знак "—".
• Строка 24: дата последнего изменения статьи, чтобы подсказать поисковику какую из статей необходимо переиндексировать, если она была изменена в последнее время. Здесь также действуют правила из предыдущего пункта.
• Строка с 27 по 29: указываем в специальной подструктуре информацию об авторе статьи.
• Строка 32 по 45: основная контентная часть Вашей статьи, внутри которой необходимо отметить несколько элементов:
  • Строка 35: заголовок Вашей статьи. Его помечаем следующим образом, добавляя к тегу заголовка свойство — itemprop="headline";
  • Строка 38 по 42: как Вы уже видели ранее, здесь располагается подструктура с изображением. Но в данном случае здесь мы указываем на главное изображение в статье;

Сейчас прошу не пугаться большого описания и самого HTML кода. Я старался все прокомментировать, чтобы Вы видели из чего состоит обычная статья и какие атрибуты необходимо прописать.

Если Вы разобрались в структуре микроразметки Schema.org для статьи, то проделали уже 80% работы. Осталось малость, но эта "малость" требует технических знаний. Потому что сейчас необходимо перенести данную структуру на реальный работающий сайт.

Есть вариант сделать проще с помощью мастера разметки структурированных данных от Google.

Когда попадете туда — увидите следующее:


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

Чтобы разметить, необходимо либо ввести URL страницы, либо вставить HTML этой же страницы.

Мы введем адрес одной из статей сайта и на его примере покажу как разметить:


Вы попадете на страницу, где справа будут указаны элементы, которые необходимо пометить на странице слева.

Делается очень просто — вам лишь необходимо выделить элемент слева и затем выбрать к чему он относится.

Когда закончите, необходимо кликнуть справа вверху по кнопке «Создать HTML». Вас перенаправит на страницу с готовым HTML кодом и разметкой для вставки на сайт:


Есть 2 варианта внедрения этой разметки на свой сайт:

• JSON-LD: необходимо лишь вставить между тегами head сгенерированный тег script;
• Микроданные: в этом случае необходимо найти на сайте аналогичные элементы в своей HTML структуре и разметить их, как в сгенерированном HTML.

В CMS, таких как WordPress, OpenCart и других все делается с помощью плагинов, не вручную. Ниже посмотрим с помощью каких плагинов.

 

Шаг 3. Внедряем микроразметку Schema.org на реальный сайт

Многие используют различные CMS. Поэтому нет уникального кода, который бы работал сразу на любом сайте. Но у Вас есть код микроразметки, который получился у меня в ходе многочисленных поисков. Вам останется постепенно внедрить данную разметку на своем сайте. И сейчас я дам советы, которые помогут Вам в этом:

1. Начинайте разметку с основных структур. То есть для начала разметьте основную сущность, внутри которой находятся все остальные элементы. Поэтому сначала необходимо найти блок, в котором содержится все: изображение, автор, дата и так далее;
2. Далее займитесь разметкой блока "Organization". Потому что он не меняется динамически. Его необходимо один раз сделать и поместить внутрь сущности "BlogPosting". Данный блок затем скройте с помощью CSS стилей.
3. Затем необходимо разметить дату публикации и дату последнего изменения. Сделать это несложно. В каждой CMS есть своя функция, которая отвечает за это. Так как это мета-теги, то скрывать ничего не нужно. Например в WordPress дата публикации и дата изменения выводятся следующим образом:
   • PHP КОД
     1. the_time('o-m-d'); // дата публикации статьи
     2. the_modified_date('o-m-d'); // дата изменения статьи
     Вам лишь необходимо разместить это в соответствующих мета-тегах.
4. Далее отметьте подструктуру "articleBody". Именно внутри нее Вам необходимо будет указать заголовок и главное изображение статьи.
5. И последним шагом исправьте разметку главного изображения в статье. Так как это, чаще всего, сделать технически сложнее всего, то оставьте данный элемент на концовку.

После внедрения обязательно проверьте с помощью валидаторов на отсутствие ошибок.

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


Кликаете в правом верхнем углу по кнопке «Предварительный просмотр» и попадаете на странице предпросмотра:


Микроразметка FAQ от Schema.org
Как увеличить CTR на поиске за 15 минут?

Очень легко, нужно лишь добавить микроразметку FAQ в свою статью и отправить на переиндексацию в Google.

Вот пример статьи, где я добавил микроразметку:


Как добавить такую микроразметку?

Очень легко, достаточно в исходный код страницы вставить следующий JSON внутри тегов script:

1. <scripttype="application/ld+json">
2. {
3. "@context": "https://schema.org",
4. "@type": "FAQPage",
5. "mainEntity": [
6. {
7. "@type": "Question",
8. "name": "Что такое микроразметка сайта?",
9. "acceptedAnswer": {
10. "@type": "Answer",
11. "text": "Микроразметка сайта — это способ показать поисковым системам важные элементы на вашем сайте. Также это способ создать расширенные сниппеты на поиске и получить больше кликов, увеличить CTR на поиске и, соответственно, улучшить позиции на поисковой выдаче."
12. }
13. }
14. , {
15. "@type": "Question",
16. "name": "Что такое Schema.org?",
17. "acceptedAnswer": {
18. "@type": "Answer",
19. "text": "Schema.org — это словарь, с помощью которого можно размечать страницы, чтобы они были понятны поисковым системам Google, Яндекс, Mail.ru, DuckDuckGo, Bing, Rambler."
20. }
21. }
22. , {
23. "@type": "Question",
24. "name": "Есть ли Schema.org на русском?",
25. "acceptedAnswer": {
26. "@type": "Answer",
27. "text": "Да, есть. Находится перевод проекта по адресу ruschema.org."
28. }
29. }
30. , {
31. "@type": "Question",
32. "name": "Каким образом проверить корректность настройки микроразметки?",
33. "acceptedAnswer": {
34. "@type": "Answer",
35. "text": "Корректность настройки микроразметки проверяется с помощью валидаторов (ссылки внутри статьи)."
36. }
37. }
38. ]
39. }
40. </script>

Еще несколько советов по использованию:

Используйте 4 пункта, тогда будут показываться все 4 вопроса. Если напишете больше 4 вопросов, то последний пункт будет скрыт под элемент «Развернуть».

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

Если все сделали правильно, то достаточно буквально 15-30 минут и вы увидите в поиске в сниппете микроразметку.

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

Ошибки микроразметки Schema.org
Рассмотрим самые популярные ошибки при добавлении микроразметки Schema.

• Необходимо указать значение для поля itemReviewed
  Здесь нужно понимать для чего нужно свойство itemReviewed.
  
  Это свойство, которое отдельно без сущности существовать не может. Сущностью для свойства может быть AggregateRating и Review.
  
  Это обязательное свойство для данных сущностей, поэтому его указать, иначе звездочки на поиске не появятся.
  
  
• Необходимо указать значение для поля item
  Это свойство используется в сущностях DataFeedItem и ListItem.
  
  Например, вы хотите разметить «хлебные крошки» (BreadCrubms). Внутри элементов списка необходимо использовать для ссылок данное свойство:
  
  1. <ol itemscope="" itemtype="http://schema.org/BreadcrumbList">
  2. <liitemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
  3. <aitemprop="item"href="https://primer.com/ssylka1"data-wpel-link="external"target="_blank"rel="nofollow">
  4. <spanitemprop="name">SEO</span></a>
  5. <metaitemprop="position"content="1">
  6. </li>
  7. <liitemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
  8. <aitemprop="item"href="https://primer.com/ssylka1/vssylka2"data-wpel-link="external"target="_blank"rel="nofollow">
  9. <spanitemprop="name">Внутренняя перелинковка</span></a>
  10. <metaitemprop="position"content="2">
  11. </li>
  12. </ol>
• Необходимо указать значение для поля url
  Это поле используется во многих сущностях. Если вы видите такую ошибку на валидаторе, то вам необходимо указать это поле внутри вашей сущности. Для каждой CMS вывод ссылки на новость отличается.
  
  
• Необходимо указать значение для поля image
  Это может быть URL или сущность ImageObject.
  
  Если это ImageObject, то нужно вводить гораздо больше значений:
  
  1. <div itemscope="" itemtype="http://schema.org/ImageObject">
  2. <h2itemprop="name">Название изображения</h2>
  3. <imgalt="Описание"itemprop="contentUrl"data-src="image.jpg"class="lazyload"src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><imgsrc="image.jpg"alt="Описание"itemprop="contentUrl"/></noscript>
  4. Автор <spanitemprop="author">Юрий Немец</span>
  5. Фотография сделана
  6. <spanitemprop="contentLocation">Россия, Москва</span>
  7. Дата загрузки:
  8. <metaitemprop="datePublished"content="2020-12-22">22 декабря, 2020
  9. <spanitemprop="description">Подробное описание изображения.</span>
  10. </div>
  Самое важное поле — это URL.
  
  
• Для id указан недопустимый url
  Ошибка чаще всего возникает с сущностью BreadcrumbList когда не задан URL, а используется текстовое описание.
  
  Внимательно изучите сущность itemListElement, потому что она используется для BreadCrumbs.
  
  
• Необходимо указать значение для поля itemListElement
  Это ошибка при разметке «хлебных крошек» на сайте. Если хотите сделать последний элемент списка неактивным (без ссылки), то он должен быть не BreadcrumbList элементом. Пример ниже:
  
  1. <ul itemscope="" itemtype="http://schema.org/BreadcrumbList">
  2. <liitemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
  3. <aitemprop="item"href="https://sitehere.ru"data-wpel-link="internal"><spanitemprop="name">Главная</span></a>
  4. <metaitemprop="position"content="1">
  5. </li>
  6. <li>
  7. <spanclass="current">Онлайн маркетинг</span>
  8. </li>
  9. </ul>

 

Частозадаваемые вопросы по микроразметке Schema.org

• Itemprop что это?
  Itemprop — это свойство сущности для разметки подробных сведений об этой сущности.
  
  На примере: есть сущность для разметки фильма. У фильма есть много свойств: название, режиссер, жанр. Чтобы указать в микроразметке каждое свойство — необходимо в соответствующем атрибуте itemprop задать ему значение.
  
  1. <div itemscope="" itemtype="http://schema.org/Movie">
  2. <h1itemprop="name">Плохие парни навсегда</h1>
  3. <metaitemprop="dateCreated"content="2020-01-16">
  4. <imgitemprop="image"data-src="https://st.kp.yandex.net/images/film_big/472386.jpg"class="lazyload"src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><imgsrc="https://st.kp.yandex.net/images/film_big/472386.jpg"itemprop="image"></noscript>
  5. <span>Режиссер:
  6. <spanitemprop="director">Адиль Эль Арби</span>
  7. (род. 30 июня 1988 г.)
  8. </span>
  9. <spanitemprop="genre">Комедия</span>
  10. <divitemprop="trailer" itemscope="" itemtype="http://schema.org/VideoObject">
  11. <ahref=""target="_blank"rel="nofollow"data-wpel-link="external"><spanitemprop="name">Трейлер "Плохие парни навсегда"</span></a>
  12. <divitemprop="description">Бёрнетт рассорился с напарником, оставил службу в полиции Майами и занялся…</div>
  13. <imgitemprop="thumbnailUrl"data-src="https://st.kp.yandex.net/images/film_big/472386.jpg"class="lazyload"src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><imgsrc="https://st.kp.yandex.net/images/film_big/472386.jpg"itemprop="thumbnailUrl"></noscript>
  14. <metaitemprop="uploadDate"content="2019-10-25">
  15. </div>
  16. </div>
  
  Обратите внимание, что нужно разметить и сам фильм и трейлер, либо информацию о трейлере совсем не вводить.
  
  
• Как узнать тип микроразметки в Гугл?
  Введите в любой из валидаторов микроразметки URL сайта и узнаете тип микроразметки (сущности). Если хотите узнать вид микроразметки, то изучите следующую статью.
  
  
• Как разместить URL сайта в Schema.org?
  Все зависит от того, какую сущность микроразметки вы используете.
  
  Например, если используете сущность BlogPosting (на русском эта же сущность), то используйте следующий код:
  
  1. <linkitemprop="mainEntityOfPage" itemscope="" href="Ссылка на статью">
  
  
• Каким образом можно проверить корректность настройки микроразметки?
  Корректность настройки микроразметки проверяется с помощью валидаторов.
  
  
• Плагины внедрения микроразметки для CMS
  Для WordPress: Schema, Schema — All In One Schema Rich Snippets, Schema & Structured Data for WP & AMP, WP SEO Structured Data Schema, а также Yoast SEO.
  
  Для OpenCart: SEO Structured Data — Rich Snippets — Microdata.
  
  Для Joomla: Google Structured Data.
  
  Для Битрикс: Микроразметка Schema.org, Микроразметка Schema.org в один клик.
  
  После внедрения любого плагина обязательно проверяйте свои страницы с помощью валидаторов.
  
  
• Как выбрать тип Schema.org?
  Рекомендую зайти на следующую страницу — структурированные данные от Google. Слева выбрать тот материал, который вам нравится и затем разметить в соотвествии с рекомендациями.
  
  
• Как исправить ошибку микроданных в Google?
  Чтобы исправить ошибку — необходимо хорошо разобраться в сущности, которую вы размечаете.
  
  Чаще ошибка связана не с микроразметкой Schema, а именно с незнанием технической части сайта или CMS. Задать свой вопрос вы можете в комментариях ниже.
  
  
• Каким разметить номер телефона с помощью Schema.org?
  Есть свойство Telephone. Важно понимать, что это лишь свойство, оно должно быть внутри сущности, например, внутри сущности Organization.
  
  
• Как создать микроразметку для Яндекса онлайн?
  Для Яндекс и для Google можно создать шаблон микроразметки с помощью генератора.
  
  
• Валидатор не видит разметку
  • 1-я ситуация: ваш сайт недоступен робот и он не может проверить;
  • 2-я ситуация: страница размечена неверно. Вы не соблюдали правила разметки сущности.
  Скорее всего у вас вторая ситуация и вам необходимо очень внимательно изучить сущность, которую размечаете. Если проблемы остаются — задайте их в комментариях.
  
  
• Плагин проверки микроразметки в браузере Chrome
  Расширение называется Structured Data Testing Tool.
  
  
• Как добавить микроразметку для сайтов на Wix? (Schema.org)
  На самом деле это актуально для любого конструктора.
  
  Для начала вам необходимо сформировать скрипт в формате JSON-LD через этот генератор.
  
  Затем скопировать этот скрипт, перейти в раздел редактирование сайта. Там выбрать «Настройки», далее «Коды аналитики». Выбираем справа вверху «Новый инструмент», далее «Новый код».
  
  Вставляем скопированный скрипт в формате JSON-LD.
  
  Осталось сохранить и проверить на валидаторе правильность разметки.
  
  
• Как добавить микроразметку для сайтов на Tilda? (Schema.org)
  Генерируем скрипт в формате JSON-LD, как в ответе на предыдущий вопрос про Wix.
  
  На Тильде заходим в «Настройки страницы», затем «Дополнительно» и далее «HTML код для зоны». Кликаем «Edit code» (редактировать код).
  
  Вставляем скопированный код и сохраняем.

Вывод
Многие, возможно, начнут возмущаться, что нет готового решения, которого все так ждали. Все хотят волшебную таблетку: "скопировал->вставил". Такого не будет, если Вы хотите реальных и ощутимых результатов. У Вас индивидуальный шаблон, у которого своя собственная структура. Поэтому наберитесь терпения и разберетесь в том, как устроена микроразметка Schema.org.

Что касается технической части, то скажу вот что: либо отдайте это дело профессионалу, либо самостоятельно разберитесь в том, что я описал в данной статье.

Успехов!

Автор - Юрий Немец

 

Здесь и далее потерялись пробелы. И лучше бы такой код обернуть в code - для наглядности

 

Я как раз сегодня изучала инфу по микроразметке. У меня внедрено Recipe Schema, 8 предупреждений и 1 инструкция, что в гугл вебмастере является тоже предупреждением.
Конкретно по кулинарной разметке описано у гугла https://developers.google.com/search/docs/data-types/recipe?hl=ru#item_list
у него примеры на микроразметку и в нем скрипт, я так поняла микроразметка JSON-LD

Это генератор микроразметки
https://technicalseo.com/tools/schema-markup-generator/

Чтобы не править шаблон можно использовать микроразметку JSON-LD , это делается с помощью скриптов, для вордпресса есть плагины
что это такое описано тут https://texterra.ru/blog/chto-takoe-format-json-ld-i-pochemu-on-luchshe-schema-org.html
https://site-analyzer.ru/articles/json-ld-markup-implementation-for-articles/
т.е. надо писать небольшой скрипт, который вставляется в <head>
также генерировать микроразметку можно на языке PHP
Т.е. надо изучить эту тему подробнее и попробовать или самим написать скрипт или заказать его. А может искать какой-то другой вариант.

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

 

Попробовала несколько плагинов для ВП, из опробованных вот этот самый полный. Все поля на месте. Валидатор Гугла не увидел ни одной ошибки или предупреждения.
Есть один момент - видео. Если его в рецепте нет, то получается, что заполнять связанные с видео поля не надо. Но тогда в валидаторе 1 предупреждение.

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

 

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

 

Она не полная. Там только основные поля, при отсутствии которых Гугл помечает их как ошибки, и нет полей, которые в случае отсутствия помечаются как предупреждения. В другой теме я писала, от 20 мая в Гугл серч консоль появилось письмо с сообщением о невозможности формирования расширенных сниппетов из-за этих предупреждений. Как вероятность, это могло стать причиной понижения в выдаче или, как у меня, выброса из карусели.

 

Полагаю, что нужные поля можно добавить в шаблон. Или нет?

 

кто б помог это сделать((

 

Можно, но кто бы это сделал?
На самом деле все хуже. Валидатор, ссылка на который выше в этой теме, предназначен для проверки простых рецептов без пошаговых фото. А Гугл, добавив в Серч консоли пункт "Пошаговые рецепты" и разметку для них ввел еще более расширенную.
Прогнала тот же рецепт через валидатор в Гугл серч панели и получила еще больше предупреждений.

Т.е. к каждый шаг должен размечаться вот так:



Это все не ошибки, это предупреждения. И чито с ними делать?

MAzZY, если эти все добавить в шаблон, не будет это грузить сайт? Как этому отнесется Яндекс?

 

Грузить не будет - с чего бы? Это ж просто текстовые теги в коде страницы. Ну, если мы не говорим про плагин, который дёргает все эти поля из базы. Там немного нагрузка подрастёт, но кэш это нивелирует.
Про Яндекс меня нет смысла спрашивать. Я в нём не работаю и никак с ним не связан Знаю только, что он довольно вольно иногда интерпретирует стандарты.
Вообще, это всё надо познавать на опыте.

Мы же говорим о настиной теме? Она теперь вряд ли поможет. По моим сведениям, она отошла от этих дел (но это не точно). Так что надо искать того, кто стал бы поддерживать её темы. Или, как минимум, внёс необходимые изменения.
Про другие темы и говорить нечего.
У меня сейчас нет под рукой ни одного её кулинарного шаблона, даже посмотреть не могу. Да и со временем не оч. Пока ничего сказать не могу.

 

Привет всем. По микроразметке будет обновление всех тем - по хлебным крошкам уже готово + изменение в ингредиентах под Яндекс.
По Гуглу сейчас еще читаю, оно недавнее

Я добавлю в шорткоды HowToSection и HowToStep, но автоматически в большинстве шаблонов это не добавить скорее всего. Значит, придется размечать вручную.
В принципе, я анализирую кулинарные сайты Ирины, но можете в личку еще несколько скинуть. Авось, что придумается.

 

Какой Ирины? Если Куклы в бантиках, то у нее сейчас на кулинарных мало именно поискового трафика. Я говорю про два ее наиболее известных в узком круга сайта.

 

А я про трафик вообще не говорю. Я пишу про оформление статей с возможностью автоматизации микроразметки.

 

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

 

Считаю важным отметить, что разметка не гарантия трафика, а один из множества факторов.

 

Конечно. Но нельзя отрицать, что разметка тоже влияет на трафик. Например, Toriya писала, что из-за ошибок в микроразметке Гугл убрал ее сайт из карусели (а это сказывается на посещаемости).

 

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

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