Ко всем материалам
#Веб-разработка#SEO

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

5765 
 

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

Что такое микроразметка и зачем она нужна

Микроразметка нужна для поисковиков. Google и «Яндекс», которые лучше понимают содержание сайтов, если указать им куда «смотреть». Например, что на странице находится товар определенного бренда, у которого есть характеристики, cтоимость, рейтинг.

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

Пример микроразметки. Сущность «AggregateRating» указывает на наличие рейтинга у компании

Стандарт семантической разметки данных называется Schema.org. Он появился более в 2011 году с подачи поисковиков Google, Yahoo и Microsoft. Все современные поисковики ее поддерживают, включая «Яндекс».

Одно из преимущество микроразметки — расширенный сниппет. Она делает карточку сайта более заметной, что в теории может повысить количество кликов. Правда, не факт, что поисковик выдаст сниппет, но робот в любом случае считает его данные. Подробнее — в статье «Как сделать расширенные сниппеты в выдаче „Яндекса“ и Google».

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

Карточки, которые получили расширенный сниппет в выдаче Google из-за наличия разметки

Микроразметка прямо не влияет на выдачу, но более структурированные описания сайтов могут подниматься выше. Например, вот как «Яндекс» использует данные из разметки:

  • Для товаров, медиа, рецептов, организаций формируются специальные сниппеты.

  • Для вопросов и ответов поиск выделяет лучшие ответы.

  • Изображения и видео с разметкой лучше предоставляются в поиске.

В Google разметка позволяет более точнее анализировать данные сайта и открывает особые функции.

Полный гайд по микроразметке Schema.org: как сделать, проверить и разместить Читайте также: Поведенческие факторы: накрутить или улучшить сайт

Какие виды микроразметки бывают

Schema.org — не единственный стандарт микроразметки. Кроме него, существует другие:

  • Microformats. Открытый стандарт, который появился в 2007 году. Изначально был простым, но сейчас с ним взаимодействовать не так эффективно, как с Schema.org.

  • The Open Graph protocol. Разметка для соцсетей, чтобы правильно считывать данные из шапок статей во время репоста в ленту.

  • «Дублинское ядро». Разметка для электронных библиотек и документов.

  • FOAF. Используется для нетворкинга в интернете и поиске связей между людьми.

Далее будем только Schema.org, как наиболее популярный. У него четыре вида синтаксиса (микроданные, RDF, микроформаты, JSON-LD), но нас интересуют только два:

  • Микроданные. Работает на HTML. Принцип строится на создании «контейнеров» и помещении в них данных.

  • JSON-LD. Работает на JavaScript. Принцип написания — давать команды словарю. Содержит меньше строчек кода, рекомендован Google и виден только поисковым роботам.

Важно: Schema.org — это словарь, а, например, JSON-LD — это ситаксис. Синтаксис — это набор тегов и правил для обращения к словарю. У каждого синтаксиса он свой.

Google рекомендует использовать JSON-LD, но «Яндекс» его не поддерживает. Валидацию в обоих поисковиках проходят оба, поэтому для сайтов лучше ставить .

Как сделать и вставить микроразметку на сайт

Микроразметка создается тегами с помощью дополнительных атрибутов. Чтобы использовать микроразметку знать код не обязательно. В помощь — маркеры, сервисы и плагины.

Маркеры данных от Google

У Google есть «Мастер разметки структурированных данных». В нем вы указываете сайт или HTML-код, выбираете сущность и прописываете данные. После — выгружаете готовый код и вставляете в шапку сайта.

Плюсы:

  • Можно загрузить ссылку на сайт и разметить теги прямо на ней.

  • Простая визуализация и интуитивно понятный интерфейс.

  • Код можно выгрузить в микроданных или JSON-LD.

Минусы:

  • Ограниченное число сущностей.

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

Микроразметка статьи в «Маркере данных»

Кроме «Мастера» существует инструмент «Маркер» с расширенным функционалом. Для его использование нужно подключить свой сайт к сервису Google Search Console, внедрение кода будет происходить автоматически.

Плагины для CMS

Если ваш сайт работает на WordPress, «Битриксе» или «Тильде», то для вас уже подготовлены удобные плагины или инструкции:

Полный гайд по микроразметке Schema.org: как сделать, проверить и разместить Читайте также: Самые популярные CMS в Рунете

Ручной способ

Готовая микроразметка в шапку страницы внутри тегов <head> </head>. Полный список всех атрибутов и сущностей есть на сайте Schema.org. В JSON-LD для сущностей используют команды @contex, @type, а свойства указывается через кавычки.

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

Каркас для микроразметки JSON-LD

Набирать код в JSON-LD вручную не обязательно, есть генераторы:

  • Schema Markup Generator. Бесплатный конструктор, набор сущностей ограничен.

  • Schema App. Платный конструктор, поддерживает все сущности.

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

Конструктор микроразметки в JSON-LD

В микроданных (microdata) сущности указывают через команду itemscope, а itemtype и itemprop помогают определить тип и значение.

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

Каркас для микроданных (microdata) в Schema

Если в случае JSON-LD прописывать вручную код не обязательно, то для микроданных (microdata) нормальных конструкторов и сервисов нет — вам придется писать код самостоятельно, либо обратиться к верстальщику. Найти специалиста поможет сервис Workspace — сделайте техническое задание, бесплатно разместите его в разделе «Задачи» и выбирайте исполнителей по откликам.

Как проверить микроразметку

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

Используйте валидаторы:

  • Schema Markup Validator. Рекомендованный сервис от Google для проверки кода или сайта с микроданными (microdata) или JSON-LD. Показывает структурность данных.

  • Валидатор микроразметки. Сервис от «Яндекса» для проверки кода или сайта с микроданными (microdata). Умеет показывать структуру списком.

  • Онлайн валидатор JSON. Простой сервис для быстрой проверки кода на JSON-LD.

Как проверять код? Загрузите сайт или код, нажмите тест и проверьте результат. В случае обнаружение ошибки валидатор подскажет, в чем проблема и на какой строчке. Например, на скриншоте ниже не указан тип данных, чтобы это исправить, нужно поставить сущность «отель» или «организация».

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

Проверка микроразметки с помощью валидатора

Примеры микроразметки

Разберем основные типы сущностей и код.

Микроразметка для компаний

Микроразметка указывает на адрес и контактную информацию организации. Посмотреть полный список можно на стра разметку для комнаты в отеле на странице Hotel и в подробном гайде Markup for Hotels.

Пример в микроданных (microdata) Schema.org. Можно использовать общий тип «Organization», либо указать точную сферу деятельности. Используем, например, отель. Обратите внимание на атрибут address и его вариации — это может быть Locality (город), Region (область), Country (страна). Также можно добавить координаты с помощью атрибута «geo».

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

Микроразметка в микроданных (microdata) Schema.org для организаций

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

Микроразметка в JSON-LD для организаций

Микроразметка для товаров и услуг в онлайн-магазинов

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

Пример в микроданных (microdata) Schema.org. Полезные атрибуты:

  • aggregateRating — указывает рейтинг товара

  • offers — указывает на продажу товара

  • priceCurrency и price — показывает тип валюты и стоимость

  • availability — говорит о наличии товара. Например, In Stock (в наличии), Out Of Stock (нет в наличии). Есть еще другие варианты: Online Only, Pre-order, Sold out и т. д.

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

Разметка в микроданных (microdata) Schema.org для товара

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

Разметка в JSON-LD для товара

Микроразметка для рецептов и кулинарных сайтов

Разметка по shema.org помогает поисковым работам выделиль ключую информацию о рецепте — ингредиенты, количество калорий, время приготовления.

Пример в микроданных (microdata) Schema.org. Атрибуты prepTime, cookTime и totalTime покажут время на готовку — данные ставятся в формате AM и PT. Описание можно сделать через recipeInstructions или HowToStep.

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

Микроразметка для рецепта в микроданных (microdata)

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

Микроразметка для рецепта в JSON-LD

Микроразметка для статей и публикаций на сайт

Атрибуты указывают на название статьи, автора статьи, дату публикации. Подробнее об этой разметке и полный список атрибутов смотрите в разделе Article.

Пример в микроданных (microdata) Schema.org. Наиболее часто используют Article, как универсальный тип данных. Кроме него существует:

  • NewsArticle. Для новостных и обновляемых публикаций.

  • BlogPosting. Для публикаций в блог.

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

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

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

Пример разметки статей в JSON-LD

Микроразметка для хлебных крошек

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

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

Выдача «хлебных крошек» с микроразметкой и без нее

Посмотреть атрибуты можно на странице BreadcrumbList, а в нашей статье «Все о „хлебных крошках“» рассказываем, как их делать.

Пример в микроданных (microdata) Schema.org.

Указываем тип «BreadcrumbList» и далее через ListItem ставим позицию, название и ссылку на подраздел сайта.

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

Микроразметка (microdata) хлебных крошек в Schema.org

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

Микроразметка хлебных крошек в JSON-LD

Микроразметка для отзывов и рейтингов

Наличие отзывов и их содержание часто напрямую влияет на решение о покупке. Исследование AliExpress показало, что каждая пятая покупка в интернете была совершенно именно из-за отзывов. Микроразметка поможет поисковым роботам найти рейтинги, дату публикации и авторов отзывов. Полный список атрибутов — в разделе Review на сайте schema.org.

Пример в микроданных (microdata) Schema.org. На примере ниже размечен автор, дата публикации и «тело» комментария. Обратите внимание на атрибут reviewRating (Rating): он позволяет выставить оценку, указов диапазон и общее колличество отзывов.

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

Микрораазметка (microdata) отзыва в Schema.org

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

Микроразметка отзыва в JSON-LD

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

Посмотреть все атрибуты можно в разделе FAQPage. Также существует QAPage, где ответы или отзывы опубликованы от лица пользователей. Также обратите внимание на HowTo — ее атрибуты позволяют разметить шаги в инструкции.

Пример в микроданных (microdata) Schema.org. Количество ответов может быть любым, но вряд-ли стоит добавлять более десяти. За формирование вопросов и ответов отвечает связка mainEntity + acceptedAnswer.

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

FAQ-микроразметка может выводиться как расширенный сниппет в Google

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

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

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

Разметка FAQ в JSON-LD

Микроразметка для мероприятия

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

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

Разметка показывает дату, место и цену мероприятия, выводится первой в сниппете

Пример в микроданных (microdata) Schema.org. Уникальная черта микроразметки для событий — указание даты начала и конца мероприятия. В остальном используются атрибута Place и Offers, которые мы приводили в примерах для организаций и товаров. Полный список атрибутов — в Event.

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

Микроразметка (microdata) для сайта мероприятия

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

Микроразметка для сайта мероприятия в JSON-LD

Микроразметка для изображений

Помогает проиндексировать картинки, изображения и иллюстрации.

Пример в микроданных (microdata) Schema.org. За разметку картинок отвечает ImageObject. Он позволяет быстрее выводить их в поиске, а еще добавлять спецификацию фотографий по выдержке, формату, дате, локации и т.д.

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

Микроразметка (microdata) картинок в Schema.org

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

Микроразметка изображений в JSON-LD

Микроразметка для видео

За разметку видеороликов отвечает VideoObject. В Google микроразметка может дать расширенный сниппет, если указать ключевые моменты ролика через атрибуты Clip или SeekToAction.

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

Микроразметка видеоролика с ключевыми моментами

В «Яндексе» есть возможность выводить плеер в поиск атрибутом embedUrl. Правда, он доступен только для хостингов, у которых более 500 роликов.

Пример в микроданных (microdata) Schema.org.

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

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

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

Микроразметка видео в JSON-LD

Главное

Основные тезисы материала:

  1. Микроразметка позволяет поисковым роботам эффективней проверять страницы и создавать расширенные сниппеты.

  2. Schema.org — это словарь, который содержит описание всех сущностей в микроразметке.

  3. Существует несколько видов синтаксиса Schema.org, самые популярные — микроданные (microdata) и JSON-LD.

  4. Google и «Яндекс» поддерживают любой синтаксис Schema.org, но для Google лучше размечать через JSON-LD, а для «Яндекс» — через микроданные (microdata).

  5. Используйте сервисы и плагины для автоматического создания кода в JSON-LD.

  6. Для создания кода в микроданных (microdata) используйте ручной метод или ищете специалистов через сервис Workspace.

  7. Проверяйте микроразметку через валидаторы перед публикацией. Наличие одной ошибки делает нечитабельным весь код для поисковых роботов.

Разместить

Вакансии

Смотреть все
Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
Спасибо! Подписка успешно оформлена

Подписка

Отлично! Мы отправили письмо на указанный вами электронный ящик с инструкцией по подтверждению.

Если письмо с подтвержением вашего e-mail не будет получено в течение 10 минут, пожалуйста, проверьте папку СПАМ в соответствующем почтовом ящике.

5786

Похожие статьи