JSON-LD и Schema.org: выбираем лучшее для разметки вашего сайта
Большая часть читателей наслышана о таком инструменте, как микроразметка данных. В целом, стоит заметить, что использование любого типа разметки данных на сайте пойдет только в плюс, так как это позволит поисковикам кратко ознакомиться с товарами и услугами, предлагаемыми на вашем ресурсе.
Прежде чем начать обозревать инструменты микроразметки, определимся с самим термином разметки данных.
Микроразметка (семантическая разметка) – это разметка текста специальными тегами, атрибутами, которые соответствуют информации, находящейся в тексте. Так мы помогаем поисковым роботам понимать суть написанного на странице и корректно формировать сниппеты, а также косвенно повысить результаты поисковой выдачи.
С постепенным развитием микроразметки начали появляться новые понятия, такие как словари и синтаксис. Более подробно об этих терминах можно узнать в данной статье. Грубо говоря, словарь – это язык микроразметки, набор определенных свойств, а синтаксис – это способ применения данного языка. Формат Schema.org относится к классу словарей, тогда как JSON-LD является синтаксисом.
Микроразметка Schema.org
Если говорить совсем уж корректно, то Schema.org – это сайт, на котором публикуются различные схемы тегов, используемых веб-мастерами для разметки актуальной информации. Этот словарь изначально применяется с синтаксисом Microdata. Такой способ разметки был разработан в 2011 году и признан крупнейшими поисковыми системами мира.
Существует более 100 видов схем. С помощью данного формата можно сделать разметку:
Чтобы сделать разметку необходимой информации на странице, нужно помещать атрибуты Schema.org в отображаемый пользователю контент. Вот пример классической разметки данных организации с помощью Microdata:
Как видите, код схемы был размещен внутри контактной информации, которая выводится на странице. Иногда это бывает не всегда удобно, так как текст может «поехать» или формат не прочитается редактором. Но подобное случается довольно редко. Обратите внимание, что мы оборачиваем тегами только конкретную информацию, т.е. «Иркутск» без запятых и остальных знаков.
Сразу после установки проверяем нашу разметку в валидаторе разметки Яндекса:
Если никаких ошибок нет, разметка в порядке. Более подробное описание различных схем словаря вы можете изучить на официальном русскоязычном сайте. Также примеры основных разметок есть в справке Яндекса.
Микроразметка JSON-LD
JSON-LD (англ. Linked Data) – способ передачи связанных данных с помощью текстового формата JSON. Компания Google рекомендует использовать именно его.
Особенностью JSON-LD является его внедрение не в код страницы, а в отдельный тег, то есть нет необходимости вписывать схему в контент страницы. Так что с данной задачей может справиться человек, далекий от программирования.
Пример разметки с помощью синтаксиса JSON-LD:
Как видите, такой «контейнер» очень удобно разместить в коде страницы, не волнуясь о нарушении ее целостности. Также у большинства популярных CMS уже есть готовые плагины, которые помогут разметить данные на сайте.
Проверить созданную разметку можно в валидаторе Google:
Однако у JSON-LD есть существенный минус. Текст из данной разметки не будет виден пользователю, что противоречит рекомендации поисковиков – не использовать скрытый контент. Стоит отметить, что этот формат в 2013 году был рекомендован Schema.org для разметки страниц, а в середине 2014 всемирно известный поисковик Google посоветовал использовать JSON-LD.
Заключение
Подводя итоги, можно сказать, что использование микроразметки Schema.org с синтаксисом JSON-LD позволяет корректно и быстро размечать необходимые данные, которые воспринимаются Google. Однако же в Яндексе данный формат используется только для Яндекс.Почты, следовательно, сформировать красивый и полезный сниппет у вас не получится.
Поэтому я крайне рекомендую использовать подходящий обеим поисковым системам синтаксис Microdata и не волноваться, что какие-то данные не будут отображаться.
А если даже после прочтения статьи вы сомневаетесь в своих силах, обращайтесь к нашим специалистам. Выполним семантическую разметку хлебных крошек, организации, контактов или карточки товара для вашего сайта.
Формат микроразметки 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 и почему она лучше для schema.org
Время чтения: 6 минут Нет времени читать? Нет времени?
Все владельцы сайтов знают, что 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-кода в теле странице. Например, она может выглядеть так:
Как отмечалось выше, код необходимо вставить в тег
Как настроить микроразметку 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 сложнее — код прописывается в контенте (между тегами и
Добавление семантической разметки с помощью диспетчера тегов Google
Рассказываем о JSON-LD.
Структурирование данных — одна из ключевых тактик SEO. С помощью разметки вы устраняете неясности, которые могут возникать у поисковых систем и даете более полную информацию для отображения. Из структурированных данных формируются расширенные результаты поиска.
Рост популярности голосового поиска также увеличивает важность структурированных данных. Как и в текстовой поисковой выдаче, размеченные данные позволяют поисковой системе быстрее и точнее найти ответ на голосовой запрос.
Печальное прошлое — семантическая разметка
Внедрение структурированных данных с помощью семантической разметки может потребовать много времени и по итогу — разочаровать, так как у этого метода есть и плюсы, и минусы. До недавнего времени разметка была возможна лишь путем добавления атрибутов из Schema.org к имеющемуся коду HTML-страницы.
Schema.org — единая схема (словарь) семантической разметки в HTML5, которая поддерживается ведущими поисковыми системами (Яндекс, Google, Yahoo!, Bing и др.). Доступны 3 основных синтаксиса (формата): Microdata, RDFa и JSON-LD.
Чтобы сделать это в большом масштабе, раньше приходилось вносить изменения в темы или шаблоны страниц — а это требовало солидных затрат времени программистов. Кроме того, код становился громоздким (что не лучшим образом сказывалось на скорости загрузки страницы).
Вот сколько кода нужно для разметки данных средствами HTML (и это лишь небольшой фрагмент)
Кроме того, встраиваемая разметка по своей природе привязана к слою представления данных — к элементам, отображаемым на сайте. Вы не могли описать с помощью разметки элементы данных, которые не находятся на странице (за исключением мета-тегов). И если два элемента информации не были расположены на странице рядом, было трудно, а то и вообще невозможно связать их вместе в одном атрибуте itemScope (который указывает роботу на наличие на странице микроразметки и задает область действия словаря в HTML-коде).
К счастью, все эти трудности с разметкой уже позади: сейчас структурированные данные можно добавлять за считаные минуты — с помощью JSON-LD. Этот формат создан для упрощения передачи связанных данных — в частности, он нашел применение для разметки страниц с помощью Schema.org.
JSON-LD полностью поддерживается алгоритмами Google и Bing. Собственно говоря, Google рекомендует для аккаунтов Merchant Center добавлять структурированные данные через JSON-LD вместо встраивания в текст страницы. Яндекс пока не поддерживает этот формат, предпочитая Microdata (за исключением Яндекс.Почты) — хотя страницы с JSON-LD успешно проходят валидацию.
Обновленный модуль SEO: для тех, кто не хочет тонуть в рутине. Все инструменты для улучшения качества сайта и поискового продвижения. Мы тщательно взвешиваем каждую ссылку для внешней оптимизации!
Статический JSON-LD
В этом разделе мы будем использовать довольно простой пользовательский сценарий, более сложные ситуации будут разобраны далее — в разделе о динамическом JSON-LD.
Имейте в виду, что даже самый навороченный пример — это лишь верхушка айсберга. Вряд ли существует такой уровень сложности, который бы не смогли поддержать структурированные данные, вставляемые с помощью диспетчера тегов Google.
Статический JSON-LD можно добавлять в тег соответствующей страницы или вставлять с помощью плагина, однако самый простой (и гибкий) способ реализовать это — использовать диспетчер тегов Google (GTM).
Этап 1. Напишите JSON-LD
Если вы не знакомы с JSON-LD, вероятно, вам нужно что-нибудь прочитать о нем или получить краткую консультацию, чтобы освоить базовые понятия. Первоисточник для изучения — статья Google «Введение в структурированные данные» (Introduction to Structured Data), можно также почитать статью о JSON-LD в блоге PromoPult. Также на schema.org могут найтись примеры разметки JSON-LD.
Пример JSON-LD для типа Event в schema.org
После начального тега script, который «говорит» браузеру: «Это скрипт JSON-LD», вы видите иерархию нашего скрипта:
Обратите внимание, когда мы ссылаемся на сущности, например, Place, необходимо вызывать этот @type отдельно и ставить эту сущность в свои собственные скобки, чтобы показать, какие вложенные атрибуты принадлежат упомянутой сущности.
Не забывайте отделять все атрибуты запятыми, кроме последнего перед закрывающей скобкой, в противном случае ваш код не будет интерпретирован должным образом (а охотиться за пропущенной запятой по всему коду — удовольствие ниже среднего)!
Когда ваш код будет написан, протестируйте его в Инструменте проверки структурированных данных Google, чтобы убедиться, что все на месте и у вас нет пропущенных необходимых свойств.
Этап 2. Создайте триггер
В диспетчере тегов Google нам нужно создать триггер, чтобы активировать тег разметки JSON-LD на той странице, на которой нужно, — в примере выше это должно произойти на целевой странице «Typhoon with Radiation City».
Вот как должны выглядеть настройки триггера
Этап 3. Создайте тег
Теперь нужно создать тег, который будет активирован на целевой странице, и вставить структурированные данные JSON-LD.
Вот как должны выглядеть настройки тега
Этап 4. Публикуйте и тестируйте
Опубликовав страницу с тегом, снова проверьте URL страницы в Инструменте проверки структурированных данных, чтобы убедиться, что Google может интерпретировать страницу и понимает ее.
Динамический JSON-LD
Если вы не добавляете новые страницы на свой сайт каждый день, а его страницы не меняются слишком часто, не исключено, что добавление структурированных данных через статический JSON-LD — это все, что вам нужно.
Однако для сайтов вроде интернет-магазинов, где могут размещаться тысячи товаров, цена и доступность которых может меняться, статический JSON-LD масштабироваться не будет. Придется проявить изобретательность.
Этап 1. Создайте переменные с помощью селектора CSS
Поскольку мы хотим, чтобы этот скрипт был динамическим, понадобится использовать переменные GTM — чтобы найти элементы данных, которые нам нужны, и присвоить им имена, которые скрипт может понять.
Создайте новую (заданную пользователем) переменную. В этом примере мы создаем переменную, чтобы сохранить название товара:
Повторите эту процедуру для всех свойств, которые вам потребуются, чтобы сделать свои структурированные данные валидными.
Этап 2. Сведите воедино в виде функции
К сожалению, мы не можем просто вставить свои переменные в код JSON-LD и поставить точку. Диспетчер тегов Google вставляет JavaScript, чтобы вернуть переменные, и такой JavaScript сделает наш код невалидным.
Поэтому мы должны «обернуть» JSON-LD в функцию, которая будет сперва вытаскивать наши переменные, затем объединять их в объект JavaScript и вставлять законченный тег script JSON-LD в тег страницы.
В итоге скрипт в пользовательском HTML-теге (в GTM) должен выглядеть примерно следующим образом:
Возможно, придется немного попотеть, чтобы добиться выдачи ваших данных именно в том виде, в каком вам нужно. К счастью, функция предпросмотра GTM позволит вам проводить тестирование сколь угодно долго до начала использования этих данных на работающем сайте.
JSON-LD разметка и АМР-страницы — пока нет
Увы, использовать GTM для ввода структурированных данных через JSON-LD на ускоренные мобильные страницы (АМР) нельзя. GTM-контейнеры для АМР-страниц, как и большинство сущностей для АМР, — это урезанные версии. Они не поддерживают пользовательские HTML-теги или пользовательские переменные JavaScript, потому что они могут слишком долго загружаться.
Если на вашем сайте есть АМР-страницы, придется вернуться к технологии встраиваемой разметки.
Когда вы освоите методологию JSON-LD, вы обнаружите, что введение структурированных данных прошло путь от долгой и нудной работы по добавлению встраиваемой разметки и причинения неудобств своим разработчикам до чего-то такого, что вы можете создать и запустить за считанные минуты.
При этом разметка с JSON-LD полностью валидированная, дает расширенные описания в поисковой выдаче, поддерживается Bing и Google. Поэтому — грех не попробовать.
Полезные ссылки:
Маркер, или Хайлайтер для разметки буквально с помощью выделения на сайте.
Обход сайта гугл-ботом для ускорения индексации разметки.