микроразметка schema org что это
Schema.org своими руками: настраиваем микроразметку без программиста
Программисты сейчас обиделись, а не надо. Они же попробуют справиться без вас, а потом придут к вам же с просьбой починить все, что поломалось в процессе. Шутка. Почти.
Рассказываем о словаре и синтаксисе микроразметки, собрали несколько плагинов и инструментов для создания и проверки разметки, разобрали по шагам один из плагинов.
Рассказываем о том, зачем нужна разметка Schema.org, что она из себя представляет и как ее создавать без знания кода.
Зачем нужна микроразметка
Schema.org — стандарт семантической разметки данных, который помогает поисковикам лучше понимать данные, представленные на сайте. Например, с помощью разметки можно явно указать поисковым роботам, что на странице site.ru/product_page1 находится товар, и передать основные параметры: название, цену, артикул, производителя и т.д. На основе этих данных поисковики формируют расширенные сниппеты в поисковой выдаче.
Кроме Schema.org есть другие виды микроразметок. У них разные назначения, поэтому вкратце приведем свойства основных видов, чтобы не путать:
Разница между словарем и синтаксисом
Словарь — это набор классов и свойств, которые описывают тип содержимого страницы и передают ключевую информацию. Словарь можно сравнить с языком — например, английским. Schema.org, Open Graph, Dublin Core — все это словари.
Синтаксис — это способ указания сущностей и свойств словаря в html-коде страниц сайтов. Если словарь — это английский язык, то синтаксис можно сравнить с латиницей.
Варианты синтаксиса, которые применяются для разметки Schema.org:
Подробнее о том, какой синтаксис лучше, поговорим чуть позже.
Чем различаются сайты с разметкой и без нее
Сайты с реализованной микроразметкой видно по сниппетам на странице поисковой выдачи. Вот пример: в выдаче два сниппета с одного и того же сайта, первый — с микроразметкой, второй — без нее.
А так выглядит сниппет страницы с афишей кинофильмов, если на странице есть микроразметка:
С помощью микроразметки в сниппетах страниц товаров отображаются цены:
И еще один пример: в первом сниппете реализована микроразметка хлебных крошек, а во втором такой разметки нет:
Больше информации о разметке Schema.org, а также перечень поддерживаемых сущностей — в справке Яндекса.
А здесь — виды расширенных результатов поиска в Google (отображаются для сайтов с реализованной микроразметкой).
Что говорят поисковики
Яндекс и Google советуют вебмастерам и оптимизаторам внедрять микроразметку. Основная мотивация: внедрение микроразметки улучшает сниппет визуально, а также повышает качество поиска (поисковые роботы лучше понимают содержимое сайта, на страницах которого реализована семантическая разметка данных).
Модуль SEO в системе Promopult: все инструменты для улучшения качества сайта и поискового продвижения. Полный комплекс работ — с нами вы не упустите ни одной мелочи. Чек-листы, подсказки, прозрачная отчетность и рекомендации профессионалов. Гарантии, оплата работ в рассрочку. (С разметкой тоже поможем).
Чем еще полезна микроразметка
Микроразметка выгодно выделяет ваш сниппет в поисковой выдаче на фоне конкурентов (если у них разметки нет или реализовано меньше фич). Даже если вы показались в выдаче ниже конкурентов, вы можете получить столько же кликов, а то и больше: ваш сниппет занимает больше места, содержит больше полезной информации для пользователя.
И тут срабатывает такая цепочка: привлекательный сниппет → больше пользователей кликают и переходят на сайт → улучшаются поведенческие факторы → вы ранжируетесь лучше и поднимаетесь в выдаче.
Также микроразметку используют собственные сервисы поисковиков — например, страница с реализованной разметкой может попасть в колдунщики на поисковой выдаче (при этом сам сайт не обязательно должен быть в ТОПе выдачи).
Словарь Schema.org
Словарь микроразметки состоит из сущностей (например, Продукт) и свойств, которые описывают параметры сущности (SKU, цена, наличие и т.д.).
Весь список сущностей и документация — на официальном сайте schema.org.
На скриншоте — часть сущностей (слева) и свойств сущности Thing (в правой части скриншота)
Рассказывать о всех сущностях не будем, приведем примеры самых популярных:
Оптимальный синтаксис
Мы уже упоминали о том, что для Schema.org подходят четыре вида синтаксиса:
Первые три имеют ряд недостатков и теряют популярность, а последний (JSON-LD) — используется все чаще.
Google рекомендует использовать именно JSON-LD — он более простой и компактный, в отличие от RDFa, микроформатов и других синтаксисов.
Но есть проблема: Яндекс пока не поддерживает синтаксис JSON-LD на поиске (хотя использует его в Яндекс.Почте). Поэтому, если вы продвигаетесь в Рунете (а скорей всего так и есть), вам этот синтаксис нет смысла использовать. В таком случае ваш выбор — микроданные или RDFa (микроформаты тоже вариант, но их используют не так часто — этот синтаксис имеет ряд ограничений и устарел по сравнению с другими стандартами).
Если ваш продукт или бизнес направлен на западный сегмент интернета и Google для вас в приоритете — используйте JSON-LD.
JSON-LD
Теперь о деталях. Поговорим о том, как выглядит синтаксис и какие правила в нем действуют.
JSON-LD в базовом виде выглядит так:
Вот как выглядит разметка
Обратите внимание! Наличие микроразметки не гарантирует того, что в поиске будет выводиться расширенный сниппет со всеми данными, указанными в разметке. Тем не менее, поисковые роботы все равно будут учитывать переданные данные и смогут лучше понимать содержимое страницы.
Как делать разметку JSON-LD
Ручная разметка в JSON-LD (да и в любом другом синтаксисе) — рутинная задача, отнимает много времени и всегда остается риск допустить ошибку. Упростить задачу можно с помощью генераторов JSON-LD, вот несколько популярных:
Проверка валидности разметки
При создании микроразметки важно, чтобы синтаксис был правильным и без ошибок. Даже если вы генерируете JSON-LD с помощью специальных плагинов или сервисов, не спешите загружать код на сайт, сначала проверьте его на валидность.
Для проверки кода используйте валидаторы от поисковиков:
Куда вставлять JSON-LD?
Если код валиден (валидатор не нашел ошибок) — можете смело добавлять разметку на сайт. Для этого код нужно вставить между тегами и на целевой странице.
Микроданные
В микроданных используется язык разметке HTML (в JSON-LD — JavaScript). Работать с этим синтаксисом сложнее — код разметки нужно прописывать в теле контента.
В основе микроданных — три атрибута:
Вот как это выглядит:
Прописывать такой код вручную — довольно трудоемкая и рутинная задача.
Сервисы для генерации микроданных
Хорошая новость в том, что для микроданных также существуют специальные сервисы-генераторы:
Сгенерируйте код и проверьте его на наличие ошибок (теми же сервисами).
Внедряем микроразметку самостоятельно и без знания кода
Покажем вам простой способ, как быстро и без единой строчки кода подключить микроразметку.
Автоматическая разметка страниц с помощью Маркера данных
Google разработал специальный инструмент для максимально простого внедрения микроразметки — Маркер данных.
Чем удобен инструмент:
Как пользоваться
Переходим в Маркер данных и выбираем подтвержденный ресурс;
Роботы Google просканируют страницы сайта и учтут заданную микроразметку.
Как изменить или убрать микроразметку
Когда робот Google снова просканирует страницы сайта, разметка перестанет учитываться и в поисковой выдаче будут отображаться обычные сниппеты.
Обратите внимание! Маркер передает данные только для робота Google. Если вы продвигаетесь в Яндексе, вам все равно придется добавлять код микроразметки на страницы. К счастью, для этого по-прежнему не обязательно знание кода.
Сайт на CMS? Используйте плагины
Рассмотрим самую популярную CMS в Рунете — Вордпресс. Для Вордпресс есть несколько решений, которые помогут просто и быстро внедрить микроразметку. Вот обзор плагинов, подходящих для этой задачи:
Настройка микроразметки в плагине Schema: пошаговая инструкция
Установите плагин и кликните по разделу Schema, который появится в боковом меню админпанели. Перейдите в раздел Settings → General. Выберите тип сайта и загрузите логотип.
Сохраните изменения и перейдите на вторую вкладку — Knowledge Graph. Здесь вам нужно указать, кого представляет сайт — выберите Person, если это личный сайт, или Organization (если продвигаете сайт компании).
Перейдите на вкладку Schemas. Выберите из выпадающих списков страницы «О себе» и «Контакты». Если хотите подключить разметку хедера и футера, хлебных крошек и других элементов страниц сайта — поставьте галочки напротив соответствующих параметров.
Также можно настроить автоматическое удаление микроразметки, если будет удален плагин Schema. Для этого перейдите на вкладку Advanced и поставьте галочку напротив «Delete Data on Uninstall».
Попробуйте проверить разметку в валидаторе Google (на всякий случай). Плагин работает корректно, поэтому ошибок не должно быть — смело загружайте код на сайт.
Примерно так же строится работа с другими плагинами для Вордпресс. Главное преимущество — вам не нужно разбираться в синтаксисе и прописывать все параметры вручную.
Выжимка
Если у вас сайт на Вордпресс — поставьте плагины для микроразметки и используйте их. Если сайт на другой CMS — поищите аналоги, скорей всего они есть и вам не нужно будет прописывать микроразметку вручную.
Как настроить микроразметку Schema.org без помощи программиста
Спойлер: все намного проще, чем кажется
Поисковые роботы научились неплохо определять тип контента на сайте. Но до полного понимания еще далеко. Из-за этого сниппеты страниц в результатах поиска порой выглядят не так привлекательно, как могли бы.
Улучшить ситуацию помогает микроразметка Schema.org. Рассказываем, что это, зачем и как самостоятельно внедрить, если вы не программист.
Что такое микроразметка Schema.org и зачем она нужна?
В 2011 году поисковики Google, Yahoo!, Bing и Яндекс объединились для работы над совместной инициативой — единым словарем метаданных Schema.org. Цель — улучшить понимание поисковиками данных на сайте и повысить релевантность поисковой выдачи.
Словарь Schema.org не следует путать с другими словарями семантической разметки:
Словарь — это своеобразный язык разметки, со своими сущностями и свойствами. Но все эти свойства и сущности нужно как-то передать поисковику. Для этого используется разные виды синтаксиса:
О синтаксисе для словаря Schema.org мы поговорим ниже. Главное сейчас четко понимать, что нельзя ставить в один ряд, скажем, Schema.org и JSON-LD или Schema.org и микроданные (это примерно как сравнивать латиницу с английским языком). Часто в публикациях на тему микроразметки допускают ошибки, из-за чего возникает путаница.
Отличить сайт с микроразметкой и без нее можно по виду сниппета в результатах поиска. Например, вот две страницы одного и того же сайта: на первой есть микроразметка рейтинга и отзывов, на второй — нет.
Вот еще пример — здесь размечена афиша кинофильмов:
А здесь — цены товаров/услуг:
В этом сниппете (вверху) размечены «хлебные крошки», а ниже — нет:
Яндекс и Google рекомендуют внедрять микроразметку. Но мотивируют это исключительно повышением качества поиска и улучшением внешнего вида сниппета. О прямом влиянии на результаты поиска не говорят — но косвенное влияние есть.
Визуальное улучшение сниппета повышает его кликабельность. И даже если сайт занимает более низкую позицию, чем конкуренты, вы можете получить не меньше (а то и больше) кликов. В итоге вы добьетесь роста позиций путем улучшения поведенческих факторов.
Микроразметка также помогает передавать данные в собственные сервисы поисковиков — и появляться в разных колдунщиках в результатах поиска.
Модуль SEO в системе Promopult: все инструменты для улучшения качества сайта и поискового продвижения. Полный комплекс работ — с нами вы не упустите ни одной мелочи. Чек-листы, подсказки, прозрачная отчетность и рекомендации профессионалов. Гарантии, оплата работ в рассрочку.
Структура словаря Schema.org
В словаре Schema.org описаны сотни сущностей (самая общая — Thing). У сущностей есть свойства. Например, у Thing — свойства image (изображение), URL (ссылка), name (название элемента) и др.
Помимо сущности Thing есть другие — вот полный список.
Фрагмент списка сущностей и свойства сущности Thing
Вот примеры сущностей и их свойств:
Для описания сущностей и свойств используются разные варианты синтаксиса.
Синтаксис для словаря Schema.org
RDFa, микроформаты и микроданные для разметки Schema.org используются все реже — в отличие JSON-LD. Именно JSON-LD рекомендован Google для микроразметки данных, ведь он более простой и компактный, чем другие форматы.
Проблема в том, что синтаксис JSON-LD пока не распознается Яндексом. Поэтому для продвижения проектов в Рунете JSON-LD не подходит — здесь разметку делают с помощью микроданных или RDFa (реже — микроформатов). Если же вы ориентируетесь на страны, где в приоритете Google, однозначно используйте JSON-LD.
Синтаксис JSON-LD
Базовая конструкция микроразметки JSON-LD (она не изменяется):
Внутри этой конструкции заключен код, который и передает роботу информацию о типе размеченных данных:
Важно понимать, что описание сущностей и свойств — не гарантия, что вы получите расширенный сниппет со всеми описанными данными. Но в любом случае их учтет робот поисковика, что поможет ему лучше понять содержимое страницы.
JSON-LD вручную прописывать трудоемко. Кроме того, при это возникает высокий риск ошибки. Поэтому используйте один из генераторов кода JSON-LD:
После того как вы сконструируете код, не спешите его сразу добавлять на сайт. Вначале он должен пройти проверку на ошибки (валидацию).
Синтаксис Microdata (микроданные)
Если в JSON-LD используется JavaScript, то в Microdata — HTML. Внедрить разметку на основе Microdata сложнее — код прописывается в контенте (между тегами и
Как использовать микроразметку Schema.org: руководство для чайников
Вы знаете, что такое schema.org, но никак не можете внедрить ее на свой сайт? Вы прочитали кучу статей по теме, но ни одна из них не дала вам четкого руководства к действию? И вроде бы все понятно, но коды все-равно не работают?
Если вы оставляли подобные комментарии и вообще вышеописанная ситуация – это про вас, не расстраивайтесь. Мы поможем вам разобраться. В данном материале мы не будем отсылать вас на сайт schema.org со словами «Там все подробно написано, читайте». Вместо этого мы постараемся в максимально доступной форме (и с наглядными примерами) объяснить вам, как использовать эту пресловутую микроразметку и какой код куда нужно вписывать.
Что такое Schema.org?
Достаточно подробно о том, что такое микроразметка Schema.org, мы писали в одной из наших прошлых статей. А если коротко, то Schema.org – это словарь семантической разметки данных, поддерживаемый всеми ведущими поисковыми системами. Ее цель – помогать поисковым роботам лучше понимать содержание страницы и, тем самым, улучшать результаты выдачи.
Куда что нужно вписывать?
Ну а теперь давайте разбираться, какие коды и куда нужно вписывать. Обратимся к конкретному примеру. Вот так выглядит микроразметка, описывающая фильм «Аватар»:
Здесь мы видим три атрибута, и их вы должны будете неизменно использовать в каждой своей микроразметке:
Примечание. Вышеприведенный скриншот был сделан на сайте ruschema.org – проект перевода schema.org, развивающийся силами добровольцев. На данный момент переведен не весь сайт. Поучаствовать в переводе может любой желающий.
Помимо этих трех атрибутов в коде присутствуют еще и теги. Рассмотрим на другом примере, тип объекта – Person (Человек):
Как это сделать на практике?
Заходим на ruschema.org в раздел «Схемы». Выбираем нужный объект. Допустим, Book (Книга). Смотрим, какие свойства мы хотим указать. И начинаем собирать код.
У вас должно получиться примерно следующее:
Проверить правильность проставления микроразметки можно в специальных сервисах от Google и от Yandex.
Несколько примеров сниппетов и кодов
Для облегчения вашей задачи мы перечислим несколько примеров сниппетов и готовых кодов к ним. Вам остается только вписать свою информацию:
Video: Название видео
– HTML-код видео. Берется с видеохостинга:
Берем бананы, снимаем с них кожуру. Перемалываем в блендере и добавляем туда муку»
Phone: Номер телефона – 206-555-1234
Важная информация
Если вы используете авторство Google, и в поиске уже отображается ваша фотография, не используйте микроразметку Schema.org, поскольку авторство после этого может нарушиться.
Пример 1. При описании видеообъекта (videoObject), фотография автора полностью заменяется на скриншот из видео (thumbnail), а информация об авторе перемещается в самый низ сниппета. В некоторых случаях, авторство удаляется полностью.
Пример 2. При описании объекта отзыв (review), происходит то же самое – фото автора исчезает и появляется информация о том, кому принадлежит данный отзыв (обзор).
Какой из сниппетов показывает лучший CTR, к сожалению, неизвестно. Но эта информация важна, и ее нужно было донести.
В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров
Микроразметка schema.org
Schema.org – микроразметка, позволяющая структурировать данные на сайте для поисковых систем. С ее помощью поисковые системы понимают, какие данные взять для показа расширенного сниппета.
Schema.org – микроразметка, позволяющая структурировать данные на сайте для поисковых систем. С ее помощью поисковые системы понимают, какие данные взять для показа расширенного сниппета.
Сниппет – это краткая информация, которая показывается в поисковой выдаче. Для расширенного сниппета используются данные, размеченные микроразметкой.
Пример сайта без микроразметки Schema.org:
Сайт с микроразметкой:
Так видит размеченные данные поисковой робот
Микроразметка Shema.org внедряется на уровне HTML кода. Ознакомиться с полным описанием микроразметки schema.org можно на официальном сайте.
Зачем нужна микроразметка Schema.org
Структура данных schema.org нужна для SEO оптимизации. Результат после ее добавления вы можете не увидеть, но в выдаче поисковой системы сайт будет выглядеть лучше, что напрямую влияет на поведение пользователей.
А еще, при поиске определенного товара по ключевым запросам, Яндекс или Google может предложить ваш товар на своих площадках и сервисах с указанием свойств, которые вы разметили.
Какие данные можно разметить с помощью schema.org
Schema.org включает в себя большой набор объектов и их свойств. Сейчас их уже больше сотни.
Микроразметкой Schema.org можно разметить:
Типы разметки данных Schema.org
Любое свойство разметить по-разному. Например, название товара можно разными способами:
название товара
Ссылку на товар можно описать способами:
Как правильно разметить шапку сайта (Schema.org WPHeader)
Допустим, у нас есть такая шапка:
Шапка с микроразметкой:
Для WPHeader предусмотрено множество свойств. Ознакомиться c ними и добавить их вы сможете самостоятельно, просмотрев страницу о объекте.
Примеры разметки меню (SiteNavigationElement)
Главное меню без разметки:
Главное меню с микроразметкой:
Пример разметки хлебных крошек (Breadcrumbs)
Хлебные крошки без микроразметки:
Хлебные крошки c микроразметкой:
Другие примеры можно посмотреть на официальном сайте schema.org.
Как разметить последний элемент хлебных крошек (breadcrumbs)
Последний элемент размечать нужно ссылкой, через тег без атрибута href :
Пример разметки организации (Organization и LocalBusiness)
Объект Organization – более крупная организация, частью которой является объект LocalBusiness, если есть. Пример Organization – школа, НПО, корпорация. и др.
Объект LocalBusiness – филиал объекта Organization. Обычно LocalBusiness – это ресторан, ресторан сети ресторанов, филиал банка, клуб, боулинг и др.
Рекомендуем размечать юр. адрес типом Organization, остальные филиалы – через LocalBusiness. Объекты не должны быть вложены в друг друга (!), как может показаться изначально.
Организация без микроразметки (Organization):
Организация с микроразметкой (Organization):
Филиал без микроразметки (LocalBusiness):
Филиал с микроразметкой (LocalBusiness):
Какие поля обязательные, как учитывает адреса и организации Яндекс можно посмотреть на официальном сайте Яндекса.
Пример разметки списка товаров (Products list)
Список товаров без микроразметки:
Список товаров с микроразметкой:
Рекомендуем указывать только основную информацию о товаре. По желанию, можно вставить свойство отзывов, рейтинг для списка товаров.
Для Google не допускается разметка списка товаров при наличии детальной страницы (написано в документации). Поэтому, размечайте список только если ссылка на отдельную страницу товара отсутствует. Если детальная страница товара есть, размечайте только её.
Пример разметки товара (Product → Offer)
Товар без микроразметки:
Товар с микроразметкой:
Пример подробной микроразметки товаров:
Каждый товар имеет свои особенности: где-то отсутствуют отзывы или нет названия бренда и т.д. Поэтому не всегда удается разметить товар подробно, но валидатор google будет это помечать.
Какие поля обязательные и как учитывает товары и цены Яндекс можно посмотреть на официальном сайте Яндекса.
Используемые свойства
| Свойство или объект | Описание свойства |
|---|---|
| http://schema.org/Product | Указывается для начала разметки товара |
| http://schema.org/Offer | Указывается для начала разметки свойств товара |
Пример разметки услуги (Product → AggregateOffer)
Бывают случаи, когда на сайте предлагают не товар, а услуги. Часто услуги не имеют точной цены и представлены «от» или в виде диапазона. Для этого случая можно использовать свойство AggregateOffer вместо обычного Offer. Примеры отображения с ценой «от» можно увидеть в нашей статье 7 способов привлечь внимание в поиске.
Услуга без микроразметки:
Услуга с микроразметкой:
Пример разметки списка статей блога (Blog)
Список статей без микроразметки:
Список статей с микроразметкой:
Как правильно разметить статью блога (Article, NewsArticle или BlogPosting)
Чем отличается тип Article, NewsArticle и BlogPostiing?
Типы используют практически одинаковые свойства и передают основные параметры (заголовок, тело статьи, дата публикации). Если поменять тип BlogPosting на Article ничего не изменится.
Статья без микроразметки:
В разметке ниже, замените общий объект Article на NewsArticle или на BlogPosting, валидность сохранится. Это универсальная разметка.
Статья с микроразметкой:
Как правильно разметить научную работу (CreativeWork)
Под научной работой можно понимать разные виды работы: реферат, книга, диссертация, курсовая и т.д.
Научная работа без микроразметки:
Научная работа с микроразметкой:
Какие поля обязательные и как учитывает научную работу Яндекс можно посмотреть на официальном сайте Яндекса.