Микроразметка Schema.org как угодить Google и Yandex одновременно?

Микроразметка Schema.org

Любая страница сайта состоит из HTML тегов. Как правило, HTML теги сообщают браузеру как отобразить информацию, которая находится внутри тега. Таким же образом микроразметка Schema.org сообщает поисковым системам где находится та или иная важная информация на странице.

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

  • Проверка позиций сайта

Содержание

  • Основы микроразметки Schema.org
  • Как проверить правильность микроразметки Schema.org?
  • Как пользоваться валидаторами микроразметки?
  • Шаг 1. Что необходимо разметить на странице?
  • Шаг 2. Формируем шаблон микроразметки
  • Шаг 3. Внедряем микроразметку Schema.org на реальный сайт
  • Микроразметка FAQ (повышаем CTR)
  • Ошибки микроразметки Schema.org
  • Частозадаваемые вопросы по микроразметке Schema.org

Если Вы еще не встречались раньше с микроразметкой и слышите об этом впервые, тогда перед прочтением данной статьи изучите следующую:

  • Виды микроразметки сайта

Чтобы быть в курсе последних лайфхаков по SEO и знать, как продвигать сайты в 2020 году подпишитесь на личный Telegram канал.

Много о микроразметке Schema.org писать в данной статье не буду, потому что мы подробно все рассмотрели в прошлой статье.

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

С помощью правильной микроразметки 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?

    Никак не влияет на индексацию.

Не растут позиции сайта?

Закажите разбор сайта по SEO с консультацией

Посмотреть стоимость

Сделайте аудит сайта самостоятельно с помощью сервиса

Перейти на сервис

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

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

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

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

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

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

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

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

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

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

Валидатор микроразметки Google

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

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

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

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

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

Валидная микроразметка Schema.org

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

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

Валидатор микроразметки Yandex

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

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

Правильная Schema.org

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

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

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

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

Что нужно разметить микроразметкой Schema.org

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

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

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

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

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

Свойства сущности Schema.org

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

Наглядный пример микроразметки Schema.org

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

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

Формируем шаблон микроразметки

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

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

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

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

HTML КОД Лого timewebhosting.ru Юрий Немец Описание картинки

Основной текст статьи.

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

  • Строка 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 этой же страницы.

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

Пометка данных Schema.org

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

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

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

Готовая микроразметка Schema.org на мастере разметки структурированных данных Google

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

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

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

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

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

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

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

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

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

Предварительный просмотр микроразметки Schema.org

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

Пример микроразметки рецептов Schema.org

Позиции сайта ‘зависли’ и не идут в ТОП?

Закажите разбор сайта по SEO с консультацией

Посмотреть стоимость

Сделайте аудит сайта самостоятельно с помощью сервиса

Перейти на сервис

Микроразметка FAQ от Schema.org

Как увеличить CTR на поиске за 15 минут?

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

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

FAQ микроразметка в статье

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

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

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

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

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

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

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

Ошибки микроразметки Schema.org

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

  • Необходимо указать значение для поля itemReviewed

    Здесь нужно понимать для чего нужно свойство itemReviewed.

    Это свойство, которое отдельно без сущности существовать не может. Сущностью для свойства может быть AggregateRating и Review.

    Это обязательное свойство для данных сущностей, поэтому его указать, иначе звездочки на поиске не появятся.

  • Необходимо указать значение для поля item

    Это свойство используется в сущностях DataFeedItem и ListItem.

    Например, вы хотите разметить хлебные крошки (BreadCrubms). Внутри элементов списка необходимо использовать для ссылок данное свойство:

    1. SEO
    2. Внутренняя перелинковка
  • Необходимо указать значение для поля url

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

  • Необходимо указать значение для поля image

    Это может быть URL или сущность ImageObject.

    Если это ImageObject, то нужно вводить гораздо больше значений:

    Название изображения

    Описание Автор Юрий Немец Фотография сделана Россия, Москва Дата загрузки: 22 декабря, 2020 Подробное описание изображения.

    Самое важное поле это URL.

  • Для id указан недопустимый url

    Ошибка чаще всего возникает с сущностью BreadcrumbList когда не задан URL, а используется текстовое описание.

    Внимательно изучите сущность itemListElement, потому что она используется для BreadCrumbs.

  • Необходимо указать значение для поля itemListElement

    Это ошибка при разметке хлебных крошек на сайте. Если хотите сделать последний элемент списка неактивным (без ссылки), то он должен быть не BreadcrumbList элементом. Пример ниже:

    • Главная
    • Онлайн маркетинг

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

  • Itemprop что это?

    Itemprop это свойство сущности для разметки подробных сведений об этой сущности.

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

    Режиссер: Адиль Эль Арби (род. 30 июня 1988 г.) Комедия Трейлер ‘Плохие парни навсегда’ Бёрнетт рассорился с напарником, оставил службу в полиции Майами и занялся…

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

  • Как узнать тип микроразметки в Гугл?

    Введите в любой из валидаторов микроразметки URL сайта и узнаете тип микроразметки (сущности). Если хотите узнать вид микроразметки, то изучите следующую статью.

  • Как разместить URL сайта в Schema.org?

    Все зависит от того, какую сущность микроразметки вы используете.

    Например, если используете сущность BlogPosting (на русском эта же сущность), то используйте следующий код:

  • Каким образом можно проверить корректность настройки микроразметки?

    Корректность настройки микроразметки проверяется с помощью валидаторов.

  • Плагины внедрения микроразметки для 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.

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

Успехов!

С Уважением, Юрий Немец

,Описание картинки

Основной текст статьи.

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: