Микроразметка: что это, какие бывают типы и что она даёт сайту

Что такое микроразметка?

Откройте поиск и введите «рецепт шоколадного печенья». Часть результатов выглядит как обычные синие ссылки с парой строк, а часть как маленькая карточка с фотографией, временем готовки и оценкой. Разница между ними почти всегда в микроразметке: страницы с карточкой сообщили поисковику, где у них время, а где рейтинг.

Технически это дополнительные теги и атрибуты в HTML, которые не меняют вид страницы для человека. Робот читает их как подписи к содержимому: вот это название, вот это цена, вот это дата. Русскоязычные вебмастера чаще говорят «микроразметка», а в англоязычных текстах это называется structured data, то есть структурированные данные.

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

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

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

Как поисковик читает разметку: словарь и синтаксис

У разметки две части, и их полезно не путать. Словарь описывает, какие бывают типы объектов и какие у них свойства, а синтаксис определяет, как записать это в код. Главный словарь называется Schema.org: его объявили вместе Google, Bing и Yahoo, и сегодня он содержит несколько сотен типов, от статьи до организации.

Записать словарь можно тремя способами. Руководство Schema.org называет Microdata, RDFa и JSON-LD. Microdata вплетает атрибуты прямо в видимую вёрстку: блок помечают через itemscope, тип берут из словаря через itemtype, а отдельные значения подписывают через itemprop. Неудобство в том, что помечать приходится каждый элемент по отдельности.

Руководство Schema.org показывает это на странице о фильме «Аватар». Сначала блок с описанием фильма заворачивают в div с атрибутом itemscope, затем тип Movie берут из словаря через itemtype, и после этого название, режиссёр и жанр подписывают через itemprop в обычных тегах span, которые не меняют вид страницы. Поисковик теперь знает не просто текст, а фильм с режиссёром.

JSON-LD устроен иначе: все данные лежат одним блоком в теге script, а видимый текст остаётся нетронутым. Google прямо рекомендует этот формат, если позволяет устройство сайта, потому что его легче внедрять и поддерживать. Заодно поисковик понимает JSON-LD, который добавлен на страницу скриптом или виджетом CMS. Яндекс формат не навязывает: его алгоритмы не отдают предпочтения какому-то одному виду, хотя Schema.org он советует как более современный и полный стандарт.

На практике выбор простой. Если сайт на конструкторе или CMS и разметку можно вставить блоком в шаблон, берите JSON-LD. Если шаблон уже размечен микроданными, не переписывайте его без причины: поисковики читают оба формата.

Какие типы разметки бывают?

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

Хлебные крошки выглядят скромно, но заметны в выдаче: по данным Rush Analytics, сниппеты с ними повышают кликабельность на 10-15%. Это оценка агентства без гарантий, поэтому проверяйте её на собственной статистике кликов.

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

Отдельный случай, это Open Graph. Он отвечает за превью ссылки в мессенджерах и соцсетях и к поисковой выдаче отношения почти не имеет. Протокол задаёт четыре обязательных свойства: og:title, og:type, og:image и og:url, и все они пишутся метатегами в head страницы. Благодаря им ссылка в ВКонтакте, Telegram или WhatsApp показывает заголовок и картинку вместо серого квадрата.

Для магазинов у разметки есть ещё одна роль. В курсе Яндекса про поиск и товары сказано, что через разметку можно передавать сведения о товарах напрямую, без фидов: роботы сразу добавляют предложения в базу, и товары начинают показываться в Поиске. Магазину без выгрузки это короткий путь на витрину.

Для событий и вакансий разметка работает особенно наглядно. Платформа билетов Eventbrite проставила тип Event на основные страницы поиска мероприятий и через две-три недели увидела изменения в выдаче: в первый месяц годовой прирост трафика из Google на страницы событий оказался примерно вдвое выше обычного.

Индийский Monster действовал похоже с вакансиями. Команда запустила тип JobPosting сначала как пилот, а потом разметила все вакансии в стране, и органический трафик на страницы вакансий вырос на 94%. Обе истории объединяет масштаб: разметка сработала, потому что шла из шаблона сразу на все страницы одного типа.

Не всё, что описано в Schema.org, доходит до выдачи. Яндекс прямо пишет, что поддерживает не все типы этого словаря, поэтому перед работой сверьтесь со списком обрабатываемых типов в его справке и не размечайте то, что поиск всё равно не использует.

Что разметка даёт сайту на деле?

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

Японская платформа рецептов Rakuten Recipe, у которой больше 15 миллионов пользователей в месяц, размечала рецепты давно и расширяла категории. Когда команда довела разметку вместе с Google, она внедрила её через CMS за две недели. Трафик из поисковиков на страницы рецептов вырос в 2,7 раза, а сессии стали длиннее в 1,5 раза.

Индонезийский видеосервис Vidio разметил видеокаталог типом VideoObject и упёрся в технический барьер: формат файлов M3U8 плохо читается роботом Google, и сервису пришлось делать для него стабильные адреса. Результат за год такой: каталог вырос примерно на 30%, а показы видео в Google выросли втрое, клики почти вдвое.

Свои цифры называет и сам Google. В обзоре структурированных данных он пишет, что Rotten Tomatoes добавил разметку на 100 000 страниц и получил на 25% больше кликов на размеченных страницах. Food Network перевёл 80% страниц на разметку, и визиты выросли на 35%.

Третий пример из обзора структурированных данных у Google относится к Nestlé: страницы с расширенными результатами получают на 82% больше кликов, чем без них. Все три компании сравнивают размеченные страницы с неразмеченными, поэтому цифры стоит читать как порядок величины и не принимать за обещание для вашего сайта.

Чтобы понять, что разметка даст именно вам, сравните в Search Console кликабельность размеченных страниц с неразмеченными одного типа за одинаковый срок. Два десятка карточек товара с рейтингом и два десятка без него уже покажут порядок эффекта, а сезонность не помешает, если взять один период.

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

Заметим и то, чего у разметки нет. Прямого ранжирующего эффекта она не обещает, и в Яндексе это сказано открытым текстом. Её роль в том, чтобы сделать уже найденную страницу понятнее и привлекательнее.

Почему сниппета может не быть?

Первое разочарование у всех одинаковое: разметка проходит проверку, а в выдаче ничего не меняется. У Яндекса причина записана в справке: данные должны быть корректно размечены, проиндексированы и промодерированы, и только потом сниппет появляется, обычно примерно через две недели. Если разметка верна, но модератор отклонил данные, в Вебмастере придёт сообщение с причиной.

У Google другая история, и она хорошо показывает, как быстро условия меняются. Разметка FAQPage, которую охотно ставили на коммерческие страницы, теперь даёт расширенный результат только известным авторитетным сайтам государственных и медицинских организаций. Для остальных такая разметка ничего не ломает, но и сниппета не даст. Сам блок вопросов и ответов при этом стоит оставить на странице: читателю он полезен независимо от того, показывает ли его поиск в расширенном виде.

Есть и успокаивающая деталь. Если Яндекс не поддерживает какой-то вид разметки или в ней ошибки, он просто пропускает её: робот всё равно проиндексирует страницу, и на показ в поиске это не повлияет. Опасно здесь только ложное ожидание, а не сама разметка.

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

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

С чего начать у себя?

Руководитель небольшой компании или контент-менеджер справится без разработчика, если не пытаться размечать всё сразу. Эксперт Практикума Руслан Посевкин советует именно так:

Не стоит пытаться разметить всю страницу сразу

Руслан Посевкин, Frontend Engineer, в материале Яндекс Практикума

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

• Выберите тип страниц, у которых больше всего показов: карточки товаров, статьи или страница контактов.
• Найдите нужный тип в Schema.org и выпишите свойства, значения которых у вас уже есть на странице.
• Добавьте разметку блоком JSON-LD в шаблон или в нужные поля CMS.
• Проверьте результат валидатором и исправьте ошибки раньше предупреждений.
• Подождите около двух недель для Яндекса и посмотрите отчёты Вебмастера и Search Console.

В материале Практикума разметка начинается с блока контактов вымышленной компании. Для него берут словарь Organization, а адрес, телефон и почту помечают свойствами address, telephone и email. Автор добавляет полезную привычку: после проверки специально сломать разметку и посмотреть, что подскажет валидатор.

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

Когда контакты заработают, переходите к хлебным крошкам и карточкам товаров, а материалы блога подключайте последними. Подробности о том, как публиковать такие страницы и какой формат выбирать, есть в руководстве по SEO и в статье про вёрстку.

Частые вопросы