Что такое разметка JSON-LD и почему она лучше для schema.org
Все владельцы сайтов знают, что schema.org — нужная и полезная штука. Но далеко не все внедряют микроразметку. Если вы понимаете, как пользоваться schema.org, но не решаетесь размечать страницы из-за сложности процесса, эта статья для вас. Существует эффективная и простая в использовании альтернатива — это формат JSON-LD. Почему этот формат лучше schema.org? Подробности ниже.
Что такое JSON-LD
JSON-LD — это способ передачи связанных данных (Linked Data, LD) с помощью текстового формата JSON (JavaScript Object Notation). Формат JSON-LD разработал Консорциум Всемирной паутины (W3C). Использование текстового формата JSON позволяет людям легко читать и писать документы, размеченные с помощью JSON-LD. Страницы с разметкой JSON-LD облегчают структурирование данных машинами и распознавание понятий, что для владельцев сайтов важно в контексте поискового продвижения.
На практике использование формата JSON-LD улучшает представленность сайта в поисковой выдаче. Вы получаете расширенные сниппеты, которые привлекают внимание пользователей и повышают кликабельность ссылок. В частности, с помощью JSON-LD можно размечать данные для графа знаний, отображать в SERP поиск по сайту и делать разметку событий.
JSON-LD позволяет владельцу сайта поместить информацию в контекст, который определяется указанием объектов и описанием их свойств. Иными словами, JSON-LD связывает данные в Сети. При этом для указания объектов можно использовать семантику schema.org, а JSON-LD применять в качестве метода передачи данных.
Вы сможете эффективно использовать JSON-LD, только если уже пользуетесь микроразметкой schema.org или имеете о ней представление.
Кстати, еще в середине 2013 года schema.org включила JSON-LD в список форматов, рекомендованных для разметки страниц. В рекомендации сказано, что JSON-LD позитивно влияет на распространение структурированных данных в Сети.
Данные, размеченные с помощью JSON-LD, распознаются поисковыми системами. Это облегчает индексирование и повышает видимость сайта в поиске благодаря расширенным сниппетам. При этом JSON-LD совместим со schema.org, что позволяет владельцу сайта пользоваться семантикой этой системы.
Крупнейшая поисковая система мира Google оценила возможности JSON-LD. В середине 2014 года поисковик рекомендовал использовать этот формат для разметки данных о датах концертов музыкальных коллективов. Google включает эти сведения в граф знаний. Также Google рекомендует использовать JSON-LD для отображения номеров телефонов организаций в поисковой выдаче. Наконец, Google советует использовать JSON-LD для разметки страниц, анонсирующих или описывающих какие-либо события и мероприятия: конференции, представления и т. п. С помощью разметки в Knowledge Graph попадают данные об авторе публикаций и издателе (организации).
Если schema.org и JSON-LD совместимы, зачем изучать новый формат? Тут все понятно: JSON-LD намного проще использовать, поэтому вы можете внедрить его быстрее.
Почему JSON-LD лучше schema.org
Ответ на этот вопрос содержится в разнице между микроразметкой schema.org и форматом JSON-LD. Разметка schema.org указывается в виде HTML-кода в теле странице. Например, она может выглядеть так:
Как отмечалось выше, код необходимо вставить в тег
Формат микроразметки JSON-LD: что это такое
Синтаксис, примеры использования, полезные инструменты и способы валидации
Для лучшего понимания поисковыми роботами структуры и сущности контента на сайте используется микроразметка. Результат ее внедрения — улучшение внешнего вида сниппетов в результатах поиска и как следствие повышение их кликабельности.
Сравните, какая ссылка информативнее и привлекательнее для пользователя:
В статье рассказываем о формате разметки JSON-LD — в чем его преимущества и какие инструменты помогут его внедрить, даже если вы не разбираетесь в программировании.
Почему стоит использовать JSON-LD
Внедряют микроразметку с помощью разных видов синтаксиса (то есть способов размечать данные в коде HTML-страницы):
JSON-LD («JavaScript Object Notation for Linked Data») — дословно «объектная нотация JavaScript для связанных данных». Формат разработан в 2010 году консорциумом W3C для упрощения передачи связанных данных, в частности, дает возможность размечать страницы с помощью словаря Schema.org. Работает на базе текстового формата JSON.
О том, чем отличается словарь семантической разметки (например, Schema.org) от ее синтаксиса (например, JSON-LD), а также как настроить микроразметку Schema.org без помощи программиста, мы писали здесь.
JSON-LD отличается рядом преимуществ по сравнению с HTML-разметкой:
Яндекс пока не поддерживает JSON-LD (исключение — Яндекс.Почта) — в отличие от Google, который прекрасно воспринимает этот формат. Но страницы с JSON-LD проходят валидацию и в Яндексе, и в Google.
Модуль SEO в системе Promopult: все инструменты для улучшения качества сайта и продвижения в поисковиках. Полный комплекс работ — с нами вы не упустите ни одной мелочи. Чек-листы, подсказки, прозрачная отчетность и рекомендации профессионалов.
Синтаксис JSON-LD
Базовая конструкция разметки JSON-LD (неизменяемая):
Эта конструкция сообщает браузеру, что будет обращение к JavaScript, содержащему JSON-LD.
Синтаксис JSON-LD и JSON идентичен. Разница лишь в том, что в JSON-LD есть так называемые зарезервированные ключи, которые позволяют задать контекст описания или связать объекты. Так, ключ @context указывает на словарь объектов, а @type — на тип сущности. Всего таких ключей 13 — все они описаны на официальном сайте W3.org.
«@context»: «http://schema.org», // данные описываются с помощью словаря schema.org
«@type»: «Article», // тип сущности — статья (полный перечень типов — по ссылке)
После зарезервированных ключей указываются пары Атрибут (Property) / Значение (Value). Синтаксис такой:
Атрибуты зависят от типа сущности. Например, при описании статей будут одни атрибуты, сервиса бронирования билетов — другие, товара — третьи. Каждое значение имеет строго определенный формат данных, указанный в словаре Schema.org.
Разберем микроразметку JSON-LD на примере рецепта блюда:
В результатах поиска сниппет с подобной разметкой выглядит так:
Как видите, наличие атрибутов в микроразметке — не гарантия, что все они появятся в сниппете. Тем не менее они точно будут учтены поисковой системой при определении релевантности страницы поисковому запросу и могут положительно влиять на ранжирование.
Перед внедрением микроразметки советуем ознакомиться с рекомендациями по использованию структурированных данных от Google.
Полезные инструменты для работы с JSON-LD
Перед тем как внедрять микроразметку на основе JSON-LD, желательно разобраться с синтаксисом, чтобы понимать общую логику. Но вручную прописывать код трудоемко.
Для ускорения работы используйте один из генераторов:
После того как вы сгенерировали скрипт, не спешите размещать его на сайте. Сначала пройдите валидацию:
Обратите внимание, что Google не гарантирует показ расширенного сниппета в результатах поиска даже в том случае, когда инструмент проверки не нашел ошибок на страницах с микроразметкой.
Если вы внедрили микроразметку, успешно прошли проверку, но расширенного сниппета в выдаче все равно нет, возможно, дело в следующем:
Больше причин, по которым расширенный сниппет не отображается в Google, мы разобрали тут.
Если ваш сайт работает на одной из популярных CMS, для создания JSON-LD разметки можно использовать плагины.
В дальнейшем можно отслеживать проблемы на страницах с микроразметкой в специальных отчетах Google Search Console в разделе «Улучшения»:
В этом разделе будут отображаться отчеты о страницах с типами расширенных результатов, которые Google обнаружил на вашем сайте. Важный момент — этот тип должен поддерживаться Google. Возможные типы: строки навигации, мероприятие, вакансии, рецепт и другие. Полный список поддерживаемых типов расширенных результатов — здесь.
Заключение
JSON-LD — это только один из способов микроразметки. Поисковики понимают и другие форматы, поэтому, если на вашем сайте уже внедрена микроразметка и в поиске отображаются расширенные сниппеты, не стоит проводить лишнюю работу и переходить на JSON-LD.
JSON-LD выгодно использовать, когда у вас вообще нет микроразметки, при этом основная аудитория переходит на сайт из Google. Если же аудитория равномерно распределяется между Яндекс и Google, то лучше выбрать другие способы передачи данных, поскольку Яндекс пока не поддерживает JSON-LD. Также возможен вариант одновременного внедрения JSON-LD и разметки на базе HTML. Это не навредит сайту, но если Яндекс начнет понимать JSON-LD, вы сможете отказаться от громоздкой HTML-разметки.
Создание семантических сайтов с помощью веб-компонентов и JSON-LD
С ростом популярности веб-компонентов и связанных библиотек вроде Polymer, польовательские элементы стали привлекательным способом создания UI. Изначальная инкапсуляция пользовательских элементов делает их особенно полезными в создании независимых виджетов.
В то время как некоторые виджеты самодостаточны, многие из них полагаются на внешние данные для предоставления контента пользователю, например текущий прогноз для виджета погоды или адрес компании для виджета карты.
В Polymer пользовательские элементы декларативные, то есть они импортируются в проект, их очень просто подключить и настроить прямо в HTML, то есть передавать данные через атрибуты.
Было бы здорово избежать повтора и быть уверенными в согласованности данных повторно используя те же сниппеты для разных виджетов, а так же информируя поисковые системы и других потребителей о содержимом на странице. Мы можем достичь этого используя стандарт schema.org и JSON-LD формат для наших данных.
Заполнение компонентов структурированными данными
Обычно JSON достаточно удобный способ передачи данных в конкретный виджет. С растущей поддержкой JSON-LD, мы можем повторно использовать одни и те же структуры данных для UI, поисковых систем и других потребителей структурированных данных о точном значении содержимого страницы.
Комбинируя веб-компоненты с JSON-LD бы можем создать четко определённую архитектуру приложения:
Пример
Давайте рассмотрим следующий пример — страница с перечнем адресов некоторых офисов Google: http://polymerlabs.github.io/structured-data-web-components/demo/combined-demo.html
Страница состоит из двух виджетов: карта с точками для каждого офиса и выпадающий список с адресами. Важно, что оба виджета представляют те же данные пользователю, и что страница доступна для поисковых систем.
Здесь мы используем сущности LocalBusiness для выражения смысла наших данных, это географическое размещение некоторых офисов Google.
Лучший способ проверить как Google видит и индексирует страницу — через новый улучшенный инструмент тестирования структурированных данных. Введите URL демо-страницы в разделе Fetch URL и кликните Fetch and validate. Справа вы увидите разобранные данные полученные со страницы, а так же любые возникшие ошибки. Это очень удобный способ проверки вашей JSON-LD разметки на корректность обработки Google.
Вы можете прочитать больше об инструменте и нововведениях в статье блога Webmaster Central.
Связываем компоненты и структурированный источник данных.
Код примера и используемых веб-компонентов есть на Github. Давайте взглянем на исходник странички combined-demo.html.
Сначала мы внедрили данные с помощью скрипта JSON-LD:
Таким образом мы убеждаемся в том, что данные легко доступны для потребителей, поддерживающих стандарт schema.org и JSON-LD формат, например, поисковых систем.
Далее мы используем для веб-компоненты для отображения данных:
Как только элементы импортированы мы можем использовать их на станице:
И наконец, связываем JSON-LD данные и элементы вместе. Сделаем это в обработчике события polymer-ready (он будет вызван когда все компоненты готовы к использованию). Так как элементы можно настраивать с помощью атрибутов, достаточно присвоить наши JSON-LD данные соответствующему атрибуту компонента:
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 — поищите аналоги, скорей всего они есть и вам не нужно будет прописывать микроразметку вручную.
