Микроразметка сайта — полное руководство

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

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

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

Попробуем разобрать на примере то, как это работает. На странице категории «Телевизоры» нашего интернет-магазина есть возможность оставить оценку каждому товару и средняя оценка составляет 4,6 из 5 по данным 496 оценок. Также минимальная цена 1 835 руб, а максимальная 4 999 999 руб. В случае, если мы не разместим все это в микроразметке поисковая система проигнорирует существование рейтинга, минимальной и максимальной цены, для неё это будет всего-лишь ничего не значащий текст.

Зато есть мы разместим микроразметку, то поисковая система Google всё это возьмет и выведет в сниппете страницы, что сделает наш сниппет в поиске намного привлекательнее конкурентов!

Что говорят поисковые системы

Представители поисковых систем, в частности Джон Мюллер из Google успели рассказать много полезностей во время публичных встреч и трансляций с вебмастерами. Далее - идет та информация, что мы знаем от них.

1. Для чего используется микроразметка

Google использует микроразметку для решения трёх задач:

1. Формирования расширенных сниппетов, которые не влияют на ранжирование сайта, но могут улучшить ранжирование за счет роста CTR;
2. Формирования колдунщиков, которые увеличивают видимость сайта;
3. Определения релевантности, то есть помощи в определении по каким запросам должна ранжироваться страница.

Примерно так выглядит расширенный сниппет на основе микроразметки:

Это колдунщик, который сформировался благодаря данным из микроразметки:

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

2. Использовать микроразметку всё ещё нужно

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

Использовать микроразметку по-прежнему важно, даже несмотря на прогресс Google в распознавании контента.

3. Новая микроразметка проходит тесты

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

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

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

Что поддерживают поисковые системы

Прежде чем разбирать конкретные типы микроразметки, стоит сначала понять как она работает.

Ваш сайт по-сути является группой связанных между собой страниц, на каждой из которых размещён какой-то контент: текст, изображения, видео. Соответствующие этому контенту сущности (статья, товар, рецепт, видео) можно найти в одном их специальных словарей, которые используют поисковые системы: Schema.org, Microformats и Data-Vocabilary. Чтобы сказать поисковой системе о наличии у нас на странице сущности из словаря, мы можем использовать один из используемых ей форматов разметки: JSON-LD, Microdata, RDFa.

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

Чтож, давайте разберём словари и форматы подробнее.

Словари

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

Словарь / Schema.org

Самый популярный словарь в интернете, он чаще всего используется на сайтах. Официальный сайт — schema.org. Словарь имеет разделение на основные сущности и в них уже есть много дочерних сущностей, в которых могут указываться дополнительные полезные данные.

Основные сущности словаря:

• Action (действие);
• BioChemEntity (биохимия);
• CreativeWork (творческая работа) - среди дочерних элементов тут есть статьи, новости, книги, фильмы, музыка и т.п.;
• Event (событие) - любые офлайн-события: концерты, экскурсии и скидки в магазинах;
• Intangible (всё нематериальное) - все то что есть у вас на сайте и не имеет материальной подоплёки: хлебные крошки, пункт меню, бренд и т.п.;
• MedicalEntity (медучреждение);
• Organization (компания) - данные о компаниях из раличных сфер и их физических представительствах (LocalBusiness);
• Person (человек);
• Place (место);
• Product (товар) - информация о товаре и его ценовых предложениях;
• Taxon (группа существ).

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

Словарь / microformats.org

Этот словарь иногда попадается на сайтах, можно даже сказать что он тоже популярен. Официальный сайт — microformats.org. Основные сущности в нем примерно те же, что и у предыдущего словаря:

• hAtom (статья с датой);
• hCalendar (событие);
• hCard (люди, компании, контакты);
• hListing (список товаров или услуг);
• hMedia (сведения о медиа-контенте);
• hProduct (товары);
• hRecipe (рецепты);
• hReview (отзыв или оценка);
• hReview-aggregate (отзывы и оценки);
• adr (адрес местонахождения);
• Geo (географические координаты).

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

Словарь / data-vocabulary.org

Ранее это был довольно популярный словарь микроразметки. Но после пришествия Schema.org (его идейного наследника) он становился все менее популярным и теперь не поддерживается поисковыми системами! Официальный сайт - data-vocabulary.org.

Самое интересное, что данный формат всё ещё иногда встречается на сайтах. Но, увы, смысла в такой микроразметке точно нет.

Форматы

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

Форматы / JSON-LD

JSON-LD или JavaScript Object Notation for Linked Data - формат описания контента с помощью связанных объектов. То есть разметка осуществляется с помощью объекта в скрипте, что максимально просто в реализации. Данный формат не полностью поддерживается Яндексом, поэтому подойдет не для всех сайтов и не для всех типов сущностей (только для хлебных крошек и ответов на вопросы). Официальный сайт - json-ld.org.

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

Форматы / RDFa

RDFa или Resource Description Framework in Attributes - среда описания данных с помощью атрибутов. По-сути это специальные атрибуты, которые мы указываем HTML-тегам и тем самым размечаем контент. Данный формат можно внедрить не только в HTML, но и в XHTML и в XML. Основной сайт - rdfa.info.

Форматы / Microdata

Микроданные размечаются аналогично RDFa, но немного проще и значительно популярнее, а также имеет наибольшую поддержку в Яндексе (а пототому формат идеально подходит для продвижения в этой поисковой системе). Тоже можно внедрить в HTML, XHTML и XML. Сайт — html.spec.whatwg.org/multipage.

Форматы / Сводка

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

Как видно, наиболее перспективными форматами являются JSON-LD (постепенно его поддержка в Яндексе растет, а значит скоро он будет самым популярным благодаря своей простоте) и Microdata (это самый популярный формат микроразметки в рунете). А вот RDFa может постигнуть судьба словаря Data-Vocabilary, то есть поддержка рано или поздно прекратится.

Кстати, если у вас на сайте реализованы AMP-версии страниц, то помните что у HTML и связанной с ней AMP должна быть одна и та же микроразметка. А если быть точнее, то одни и те же сущности, но размеченные в любом поддерживаемом Google формате. Например, JSON-LD в HTML и Microdata в AMP.

Эффективные сущности словаря

Если у вас есть контент, который соответствует одной из эффективных сущностей словаря, то обязательно внедряйте эти сущности.

Organization — для Яндекса

Для Яндекса вы можете указать данные о компании в формате Microdata. Желательно не дублировать данные и разместить их только на одной из страниц (например, на главной или на странице контактов). В результате в сниппете страницы появится контактная информация: адрес, телефон и время работы.

Organization / LocalBusiness — для Google

Разместив на одной из страниц сайта микроразметку Organization или LocalBusiness, вы позволите Google сформировать панель знаний для вашей компании. Она выводится справа от результатов поиска, когда вашу компанию ищут по названию или адресу сайта.

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

BreadcrumbList — для Яндекса

Если на сайте у вас имеются хлебные крошки (цепочка ссылок, которая сообщает где вы расположены в структуре сайта), то вы можете разметить её и вместо локального адреса страницы в сниппете с высокой вероятностью начнут отображаться хлебные крошки. Причем, для этого элемента Яндекс поддерживает даже формат JSON-LD, а не только Microdata.

BreadcrumbList — для Google

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

Здесь есть небольшой лайфхак. Вы можете использовать хлебные крошки и для главной страницы! Для этого укажите первым элементом саму главную страницу, а вторым якорную ссылку на главной странице (тот же адрес, но с # на конце).

Sitelinks Search Box — для Google

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

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

Recipe — для Яндекса

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

Recipe — для Google

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

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

Event — для Google

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

По зверениям Google микроразметку событий следует использовать только в случае, если событие имеет физическое местоположение. Если это не так, то Google может применить к вашему сайту штрафные санкции. По моим заверениям, такого вообще ни разу не было, а единственная санкция которая возможна - это снятие расширенных сниппетов данного типа микроразметки для всего сайта. Согласитесь, санкцией не назовешь. Только не рассказывайте ребятам из Google какие санкции дает Яндекс за накрутку поведенческих факторов..

Product — для Яндекса

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

Не думаю что это дает какой-то невероятный рост кликабельности сниппета, но все равно приятно.

Product — для Google

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

FAQPage — для Google

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

Очень советую заканчивать каждый ответ в микроразметке рекомендацией перейти на сайт чтобы узнать подробнее. В противном случае расширенный сниппет с ответами может снизить количество переходов на ваш сайт.

Свойство AggregateRating — для Google

Именно используя свойство AggregateRating мы и получаем желтые звездочки в сниппетах Google. Это свойство совместимо с разными сущностями микроразметки, например: Product, Recipe, Article, Event или Service. В нём нам нужно указать как минимум среднюю оценку и количество оценок, на основе которого она сформирована.

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

Использование эмодзи — для Google

Чтобы ещё сильнее выделить сниппет, очень рекомендую использовать эмодзи. Про использование эмодзи есть отдельная подробная статья. Если коротко, то не рекомендую использовать все подряд символы, а только те, которые существуют уже давно и поддерживаются на всех устройствах пользователей (их список).

Совмещение сущностей — для Google

На одной странице не обязательно должна быть только одна сущность разметки. Со всеми сущностями отлично сочетаются те же хлебные крошки. Также, вы можете разместить на одной странице SaleEvent и Product (со свойствами AggregateOffer и AggregateRating). В результате получится такой ультимативный сниппет:

Ещё один удачный пример совмещения сущностей - это Organization (со свойством AggregateRating) и FAQPage:

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

Open Graph — это микроразметка сайта, на основе которой формируются сниппеты во всех популярных социальных сетях и мессенджерах. Официальный сайт — ogp.me.

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

Причем тут соцсети? А при том, что эту микроразметку может использовать и Яндекс! В данном примере заголовок сниппета сформирован как раз на основе данных из поля Title микроразметки Open Graph:

Это подтверждает и надпись «Не найдено: гайд», значит в теге Title и контенте такого слова не обнаружено.

Популярные ошибки при реализации

Разберем популярные ошибки, которые многие допускают при реализации микроразметки на сайте.

1. Откровенный спам

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

Если перейти на сайт банка в примере, то на странице нет ни самого рейтинга, ни возможности оставить оценку. Не надо так.

2. Не соответствующая контенту микроразметка

Иногда встречается проблема, когда на сайте указана информация не соответствующая тому, что указано в микроразметке.

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

3. Копипаст с конкурентов

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

В данном примере Apple IPhone предлагается купить по какой-то неоправданно низкой цене. Любой здравомыслящий человек поймет что новый IPhone за такие деньги не купишь, это либо старая модель, либо битая модель, либо ворованная. А рейтинг 5 из 5 на основе одной оценки пользователя вообще ни о чем не говорит (разве что о том, что страницу редко посещают).

4. Несовместимые сущности

Не размещайте все подряд сущности на странице, ведь некоторые из них могут не сочетаться. При этом поисковая система выберет только один тип микроразметки для отображения в поиске (а приоритет им нельзя задать).

В примере Organization никак не сочетается с Product, а также c CreditCard. И какую из этих сущностей выберет поисковая система остается только гадать.. Хотя чаще всего это бывает Product.

4. Упущен этап сканирования

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

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

Полезные инструменты

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

1. Google Data Highlighter

Этот инструмент был ещё в старой версии Google Search Console и до сих пор не обзавелся новой версией, но всё ещё отлично работает. Он позволяет показать Google на примере одной страницы где брать данные разметки и по аналогии заставить Google собирать данные с остальных похожих страниц сайта. В коде сайта при этом вообще ничего менять не нужно.

Где найти — google.com/webmasters/tools/data-highlighter.

2. Rich Result Test

Этот сервис принадлежит Google и позволяет посмотреть какой расширенный сниппет получит ваша страница на основе микроразметки. Можно проверить как уже существующую страницу, так и часть её HTML, содержащую разметку. Но, по опыту, его результаты часто отличаются от того что выходит в Google.

Где найти — search.google.com/test/rich-results.

3. Validator Schema.org

Валидатор микроразметки от словаря Sсhema.org. Ранее это был валидатор Google, но позже они подарили его словарю и соответственно сменился адрес. Он классный и находит все поддерживаемые Google типы микроразметке, но работает с регулярными выражениями. Это значит, что если у вас в коде где-то в HTML-комментарии и других не обрабатываемых блоках выводиться текст микроразметки, то данный валидатор его посчитает за корректную микроразметку (что конечно же является его ошибкой).

Где найти — validator.schema.org.

4. Яндекс.Вебмастер

Если все предыдущие сервисы были в основном для Google, то у Яндекса есть свой сервис проверки микроразметки. Он находится прямо в Яндекс.Вебмастере. Если вы продвигаетесь не только в Google, но и в Яндексе, то обязательно проверяйте свою микроразметку на валидность через этот сервис, ведь правила проверки у поисковых систем сильно отличаются.

Где найти — webmaster.yandex.ru/tools/microtest.

5. Screaming Frog SEO Spider

Один из наилучших инструментов для SEO-специалиста, по которому у меня даже есть отдельный курс. Инструмент позволяет обойти весь сайт и разом обнаружить сущности микроразметки на всех страницах, а также проверить валидность разметки по правилам Google.

Где найти — screamingfrog.co.uk/seo-spider (платный).

6. Google Search Console

Последний инструмент в списке, но один из первых по значимости. В Search Console вы можете проверить как действительно Google увидит микроразметку на вашем сайте, а также сможете отправить страницу на переобход поисковым роботом.

Где найти — search.google.com/search-console. Если в Search Console у вас на странице не отображается микроразметка, то скорее всего Google её также не видит.

Кстати, у поисковых систем отличная документация по микроразметке, так что если хотите посмотреть примеры кода микоразметки не просто на скриншотах, то вам сюда: документация Яндекса, документация Google.

Ответы на популярные вопросы