микроразметка меню schema org

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

В статье показан рабочий пример микроразметки Schema.org для простого одноуровневого и сложного многоуровневого (вложенного) меню сайта. Приведённый в статье код Вы можете использовать как образец для своего сайта.

Код проверен валидатором структурированных данных Google и валидатором микроразметки Яндекс.

Микроразметка меню сайта нужна обязательно, если Вы хотите показывать структуру основных категорий меню в результатах выдачи поисковых систем. Обратите внимание, что речь идёт не о так называемых «быстрых ссылках», а именно о структуре сайта. Этот блок показывается в результатах поиска сразу после description.

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

Для обоих случаев будут приведены образцы HTML кода с готовой микроразметкой, которые Вы можете использовать в качестве образцов для своего сайта. Обращаем Ваше внимание, что приведённые образцы не привязаны к реализации микроразметки меню Schema.org для конкретной CMS.

Заказать реализацию микроразметки для Вашего сайта можно в студии WebMouse. Стоимость зависит от особенностей сайта.

Микроразметка простого меню Schema.org

С разметкой одноуровневого меню проблем обычно не возникает ни у кого. Исключение, пожалуй, составляют неопытные вебмастера, которые ранее не применяли данный вид микроразметки. Если у Вас мало опыта, то приведённый ниже пример HTML кода Вам пригодится в качестве примера.

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

В зависимости от структуры конкретного сайта, состав тегов в коде меню будет разным. В приведённом примере пришлось дополнительно задействовать мета-тег для указания имени пункта. Это особенность нашего сайта, с которого и взят пример. У Вас может быть по-другому.

Скопируйте наш пример микроразметки простого меню и вставьте в онлайн-валидатор Яндекс или Google для проверки.

Микроразметка многоуровневого меню Schema.org

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

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

Если Вы сравните этот код с HTML простого меню то увидите следующую разницу: если пункт имеет подпункты, то все подпункты обёрнуты в

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

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

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

Источник

Микроразметка 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 будет это помечать.

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

Используемые свойства

Пример разметки услуги (Product → AggregateOffer)

Бывают случаи, когда на сайте предлагают не товар, а услуги. Часто услуги не имеют точной цены и представлены «от» или в виде диапазона. Для этого случая можно использовать свойство AggregateOffer вместо обычного Offer. Примеры отображения с ценой «от» можно увидеть в нашей статье 7 способов привлечь внимание в поиске.

Услуга без микроразметки:

Услуга с микроразметкой:

Пример разметки списка статей блога (Blog)

Список статей без микроразметки:

Список статей с микроразметкой:

Как правильно разметить статью блога (Article, NewsArticle или BlogPosting)

Чем отличается тип Article, NewsArticle и BlogPostiing?

Типы используют практически одинаковые свойства и передают основные параметры (заголовок, тело статьи, дата публикации). Если поменять тип BlogPosting на Article ничего не изменится.

Статья без микроразметки:

В разметке ниже, замените общий объект Article на NewsArticle или на BlogPosting, валидность сохранится. Это универсальная разметка.

Статья с микроразметкой:

Как правильно разметить научную работу (CreativeWork)

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

Научная работа без микроразметки:

Научная работа с микроразметкой:

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

Источник

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 — поищите аналоги, скорей всего они есть и вам не нужно будет прописывать микроразметку вручную.

Источник

Nikon D810

Микроразметка Schema.org: полное руководство

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

Единый стандарт schema.org появился еще в 2011 году по инициативе трех крупнейших поисковых систем — Google, Microsoft, Yahoo. Позже новую схему поддержали и гиганты интернет-поиска, включая отечественный «Яндекс».

В 2021 году семантическую разметку Schema.org используют более 10 миллионов сайтов: как для разметки веб-страниц, так и сообщений электронной почты. Многие известные сервисы, такие как Google, Microsoft, Pinterest, Yandex, используют словари Schema.org для улучшения пользовательского опыта.

Пример семантической разметки schema.org для хедера сайта

Schema.org создавалась для улучшения качества поисковой выдачи. Микроразметка делается тегами, включающими дополнительные атрибуты. Они дают возможность вручную указывать метаданные, подсказывая роботам поисковых систем, что именно находится на выбранной веб-странице.

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

Устройство schema.org

По своей структуре schema.org — это словарь семантической разметки. Он включает в себя множество классов, которые используются для того, чтобы указывать контентное содержимое веб-страницы. Словарь включает в себя подробное указание свойств для каждого класса. Синтаксис — второй обязательный элемент микроразметки. Можно сказать, что словарь — подобие языка программирования, а синтаксис — метод его использования.

Синтаксис — метод указания свойств и других данных словаря. Указание этих данных происходит непосредственно в коде веб-страницы.

Кроме Schema.org существуют и другие словари, например Open Graph, который одно время был самым популярным в Рунете. Продолжались разработки иных словарей: Microdata, RDFa, FOAF, DUBLIN CORE.

К 2021 году образовалась существенная путаница из нескольких словарей, в которых используется разный синтаксис.

Для разметки Schema.org могут применяться несколько вариантов синтакиса: от микроданных до JSON-LD, который активно рекомендует Google.

Разные словари / синтаксисы семантической разметки

Главные атрибуты schema.org

Семантическая разметка schema.org базируется на трех главных атрибутах:

Типы данных

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

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

Немного о тегах

Если вы знакомы с HTML, то никаких сложностей с тегами не возникнет. Для начинающих вебмастеров отметим — в коде семантической разметки schema.org используются стандартные HTML-теги:

— для хранения дополнительной информации.

Теперь посмотрим, как использовать эти теги при создании кода.

Как разметить данные вручную на примере фильма

Допустим, у нас есть веб-страница, рассказывающая о фильме «Оно». На ней, кроме описания кино, присутствует и ссылка на трейлер. Открываем schema.org и находим нужный нам тип данных — movie. Там вы найдете все необходимые атрибуты, относящиеся к описанию фильма.

Примерно так может выглядеть код страницы без семантической разметки:

Все корректно. Но нам нужно показать поисковому роботу, какая именно часть веб-страницы относится к тизеру фильма “Оно”. Делается это при помощи атрибута itemscope:

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

Как установить микроразметку schema.org на свой сайт

Переходим к более востребованным на коммерческих страницах схемам: статьям, отзывам, товарам, хлебным крошкам.

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

Для статей чаще всего используется тип данных Article. Для новостных статей — NewsArticle. Для блоговых статей — BlogPosting.

Скорее всего, вам подойдет универсальный тип Article. Обратите внимание на атрибуты — они выделены жирным):

Один из самых популярных заменителей молочного жира – пальмовое масло. Без него российская пищевая промышленность полностью остановится в течение 1-2 дней. По данным экспертных отчетов, пальмовое масло задействуют более 90% российских производителей. Используют его и молочные производства — для снижения стоимости конечного продукта. Технический растительный жир применяется при производстве молока, творога, сливочного масла и других изделий, в которых его быть вообще не должно.

Полный список атрибутов для типа данных articleдоступен на сайте schema.org.

Сниппет страницы с типом данных «NewsArticle»

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

Наличие схемы article на странице — сигнал для попадания в блок Главных новостей. Также в новостной блок могут попадать и AMP-страницы.

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

Хлебные крошки особенно актуальны для коммерческих сайтов. Для их внедрения необходимо задействовать тип данных BreadcrumbList. Обратите внимание: хлебные крошки описывают вложенные веб-страницы, поэтому разумнее использовать ul-тег.

Для примера рассмотрим разметку хлебных крошек интернет-магазина. Жирным выделены атрибуты:

Пример сниппета содержащего хлебные крошки

Полный список атрибутов хлебных крошек доступен на schema.org.

Микроразметка товаров в интернет-магазине

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

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

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

Если микроданные не подходят — допустимо использовать Resource Description Framework (RDF). Этот формат понимает как Google, так и Яндекс.

Рассмотрим схему для описания одного товара на примере зеркальной камеры Nikon D810:

Источник