Микроразметка JSON-LD: что это и как использовать на своем сайте

Контент-маркетолог
Стаж 15 лет
Обновлено: 24.03.2022 Опубликовано: 09.09.2021

Что такое JSON-LD

JavaScript Object Notation или JSON-LD — метод передачи линк-данных (Linked Data или сокращенно LD). Этот синтаксис используется для указания объектов и дальнейшего раскрытия их свойств.

Схема JavaScript object notation
Схема JavaScript object notation

JSON-LD — это формат описания контента с помощью объектов LD-словаря. Чтобы поисковый робот сумел прочитать описание контента, его необходимо прописывать в script-теге.

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

Сравните простой сниппет:

Стандартный сниппет на странице результатов поиска Google
Стандартный сниппет на странице результатов поиска Google

И сниппет сайта использующего структурированные данные:

Расширенный сниппет, использующий структурированные данные
Расширенный сниппет, использующий структурированные данные

Во втором случае сниппет включает дополнительные сведения: категорию товара, рейтинг, стоимость.

Что такое структурированные данные

Структурированные данные — это дополнительная информация для поисковых роботов. Благодаря таким параметрам Google точно определяет тип контента, находящийся на странице и может ранжировать его точнее.

Структурированные данные используются для корректного ранжирования и улучшения пользовательского опыта.

Пример расширенного сниппета Google
Пример расширенного сниппета Google

В 2021 году широкое распространение получил несколько форматов структурированных данных. Самые популярные — RDFa, JSON-LD, микроданные.

Google советует использовать именно синтаксис JSON-LD. Этот формат структурированных данных добавляется скриптом непосредственно в код веб-страницы.

Механизм добавления JSON-LD следующий: задействуется script-тег, который встраивается внутрь head-элемента, либо body:

Пример скрипта, в котором используется метод JSON-LD
Пример скрипта, в котором используется метод JSON-LD

Какие преимущества у кода, помещаемого в «контейнер»? Главное — ускорение работы с вложенными элементами веб-страницы. Ведь видимый текст у нас отдельно, код семантической разметки — отдельно.

Пример семантической разметки словаря schema.org в синтаксисе JSON-LD
Пример семантической разметки словаря schema.org в синтаксисе JSON-LD

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

  1. Состав.
  2. Время приготовления.
  3. Необходимые для приготовления ингредиенты.

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

Чтобы попасть в расширенные результаты, нам требуется не только сам словарь семантической разметки. Также понадобится синтаксис — для прописывания сущностей и свойств словаря.

Как выглядит синтаксис JSON-LD

Давайте посмотрим, как именно выглядит базовый синтаксис JSON-LD:

Базовый синтаксис JSON-LD
Базовый синтаксис JSON-LD

Формат JSON-LD позволяет улучшить индексирование сайта: корректно указанные свойства типов структурированных данных помогают поисковым роботам анализировать опубликованный контент максимально релевантно.

Данные в синтаксисе JSON-LD проще всего представить как набор ключей с различными значениями. Ключи используются для связи объектов друг с другом и идентификации описаний:

  • @context. Указание словаря.
  • @type. Обозначение вида сущности (например, TVSeries, CreativeWork, MusicRecording, Book, Recipe).

Многие правила / понятия JSON-LD взял от своего предшественника, включая:

  • Null.
  • Бинарные True / False.
  • Определение JSON-объекта.
  • Число.
  • Массив.

Ключи и значения синтаксиса

Рассмотрим самые часто встречающиеся ключи JSON-LD подробнее.

  • @context. Главный ключ, позволяющий соединить необходимые элементы с IRI .

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

  • @list. Ключ для массивов (например, var1):

Типовой массив данных
Типовой массив данных

  • @graph. В синтаксисе JSON-LD используется для соединения одного графа в качестве самостоятельного объекта.

Граф — абстрактный способ представления типов отношений, например дорог, соединяющих города, и других видов сетей. Графы состоят из рёбер и вершин. Вершина — это точка на графе, а ребро — это то, что соединяет две точки на графе

Пример использования ключа graph для разметки существующего человека
Пример использования ключа graph для разметки существующего человека

  • @id. Обозначает уникальное значение thing. Помните: у каждой сущности есть собственный уникальный id.
  • @vocab. Ключ позволят расширить тип данных (только для type):

Кофейня — тип, Cafe — имя типа
Кофейня — тип, Cafe — имя типа

  • @value. Указывает значение вводимых ключей. Например, для QuantitativeValue или MonetaryAmount рекомендуемый тип значений — это «число». Для PropertyValue это уже может быть Text, Number, Boolean или StructuredValue. Значения имеют величину от 0 до 9.
  • @base. Позволяет прописать ссылку на главную страницу для IRI.
  • @language. Используется для обозначения языка указываемых данных:

DenisDigger по профессии старатель. Русский язык прописан ключом @language
DenisDigger по профессии старатель. Русский язык прописан ключом @language

  • @index. Контейнер произвольного типа (ключ-значение) задействует прямой доступ. Структура в контексте не проверяется:

Пример произвольного контейнера
Пример произвольного контейнера

  • @type. Обозначает тип значения либо используется для указания независимого узла.
  • @set. Обозначает data-контейнер:

Синтаксис data-контейнера
Синтаксис data-контейнера

  • @container. Указывает тип контейнера (используется для выбранного ключа):

Так указывается конкретный тип контейнера
Так указывается конкретный тип контейнера

О способах добавления семантической разметки на сайт в синтактсисе JSON-LD мы подробно говорили в статье «Schema.org: полное руководство по семантической разметке». В ней же вы найдете подробную информацию о словарях и сущностях.

Обязательные и рекомендованные свойства JSON-LD

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

Обязательные свойства для структурированных данных LocalBusiness
Обязательные свойства для структурированных данных LocalBusiness

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

Рекомендуемые свойства для структурированных данных типа LocalBusiness
Рекомендуемые свойства для структурированных данных типа LocalBusiness

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

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

Прописывать сущности и свойства можно несколькими способами: от микроданных до RDFa. Но есть более универсальный вариант — JSON-LD.

Почему для Schema.org нужно использовать именно JSON-LD

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

Достоинства JSON-LD:

  • Не нужно возиться со «стилями» (примечание: речь о CSS).
  • Удобно работать с параметрами вложенности.
  • Разметка визуальная — даже если вы никогда не работали с кодом, то сможете ее прочитать.
  • Синтаксис поддерживает переменные.
  • Элементарная отладка.

Синтаксис JSON-LD удобен для разметки следующих структурированных данных:

  1. Имя сайта и название организации.
  2. Аккаунты в соцсетях.
  3. Адрес компании.
  4. Отраслевая принадлежность.
  5. Телефон.
  6. Лого.
  7. E-mail.
  8. Отзывы.
  9. Часы работы.

Размечать синтаксисом JSON-LD можно конкретные продукты, встречи, медиафайлы.

Есть у этого синтаксиса и недостаток. Самостоятельно набирать код непросто: это занимает много времени. Кроме этого, большое количество параметров многократно увеличивает риск опечаток, приводящих к ошибкам. А еще синтаксис чувствителен к регистру.

Использование JSON-LD подчиняется ряду правил. Поговорим о них подробнее.

Правила размещения структурированных данных в формате JSON-LD

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

Например, расширенные результаты поиска могут выглядеть так:

Сниппет с набором данных
Сниппет с набором данных

Запрещается создавать нерелевантные контенту страницы структурированные данные. Содержание веб-страницы должно полностью соответствовать выбранному типу структурированных данных в синтаксисе JSON-LD.

Разметка фильма в результатах поиска Google
Разметка фильма в результатах поиска Google

Чтобы добавить код, необязательно прописывать его вручную — можно задействовать любой удобный генератор.

Генераторы JSON-LD

Чтобы добавить структурированные данные в синтаксисе JSON-LD, воспользуйтесь сервисом Schema Generator For SEO. Работает он элементарно: указываем сущность, заполняем обязательные свойства и забираем код. Доступны 5 сущностей, которых за глаза хватит для начальных экспериментов.

Выбираем тип данных:

Выбираем тип данных для которых будет сформирована семантическая разметка
Выбираем тип данных для которых будет сформирована семантическая разметка

Размечаем обязательные свойства для выбранного типа:

бязательные параметры для типа данных Site
бязательные параметры для типа данных Site

Полученный код копируем, используем по дальнейшему назначению.

Еще один вариант подобного сервиса — Schema Markup Generator (JSON-LD). Он также ограничен с точки зрения разрешенных сущностей. А вообще типов данных здесь побольше:

Доступны схемы «Статья», «Хлебные крошки», «Событие», «Часто задаваемые вопросы», «Продукт» и т. д.
Доступны схемы «Статья», «Хлебные крошки», «Событие», «Часто задаваемые вопросы», «Продукт» и т. д.

Принцип разметки аналогичен сервису Generator For SEO. Выбираем требуемый тип данных и приступаем к разметке:

Разметка типа данных Product
Разметка типа данных Product

Доступны и рекомендованные свойства для каждого типа структурированных данных:

Рекомендованные свойства для типа данных Product
Рекомендованные свойства для типа данных Product

Если вам нужно работать с большим количеством сущностей, выбирайте профессиональные инструменты. Например, Schema App. Он позволяет задействовать весь словарь сущностей Schema.org целиком. Начальный тариф стартует от 30$ за месяц (для одного домена).

Перед тем как внедрять JSON-LD, обязательно проверьте размеченный код. О том, как это сделать, я расскажу далее.

Как проверить JSON-LD синтаксис на ошибки

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

Я рекомендую использовать «Валидатор микроразметки Яндекс» или «Инструмент проверки структурированных данных Google».

Найдены ошибки в типе данных NewsArticle и BreadcrumbsList
Найдены ошибки в типе данных NewsArticle и BreadcrumbsList

Если раскрыть отчет подробно, можно увидеть конкретный источник проблемы:

Источник ошибки — указание параметра datePublished в некорректном формате
Источник ошибки — указание параметра datePublished в некорректном формате

Google обещает, что скоро «Инструмент проверки структурированных данных Google» перестанет поддерживаться. Заменой ему станет «Проверка расширенных результатов поиска»:

Страница содержит 4 элемента и пригодна для формирования расширенных сниппетов
Страница содержит 4 элемента и пригодна для формирования расширенных сниппетов

Валидатор «Яндекса» (называется он «Парсер микроразметки») аналогичным образом подсвечивает проблемные параметры:

Обнаружены ошибки в параметрах microdata и RDFa
Обнаружены ошибки в параметрах microdata и RDFa

«Парсер микроразметки» обработает вашу страницу и показывает результат мгновенно:

На странице обнаружена разметка schema.org
На странице обнаружена разметка schema.org

Самостоятельное внедрение семантической разметки может вызвать серьезные сложности и даже привести к поломкам сайта. Избежать этих последствий можно обратившись к экспертам.

Заключение

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

Есть четыре момента, когда без JSON-LD будет крайне сложно обойтись:

  1. Нежелательно нарушение целостности кода страницы.
  2. Необходимо соблюсти требования Google к сайту.
  3. Необходимо скрыть разметку от пользователя сайта.
  4. Нужно уменьшить визуальное «количество» кода и сократить его размер (не более 10–20 килобайт при условии, что кода на разметки много на странице).
Оценить статью
14 ответов

Комментарии 2

Tichon Averkiev
Написать комментарий
После идеи создания своего сайта я столкнулся с многочисленными проблемами, одна из них это не знание такого понятия как JSON-LD. Благодаря данной статье я немного начал разбираться в этом. Все описано хорошо и по делу.
Ответить
Игорь Трунов Игорь Трунов
Написать комментарий
Мне кажется, что генератором кода значительно проще пользоваться, это экономит массу времени, чем если бы я каждый раз писал код вручную. Хорошо, что не приходится запариваться по этому вопросу.
Ответить
Написать комментарий
Популярные статьи автора
Узнайте стоимость продвижения сейчас
Выберите удобный способ связи:
Выберите удобный способ связи:
Введите Ваш номер телефона:
Введите адрес Вашего сайта:
Введите Ваше имя:
Нажимая кнопку «Получить предложение» вы соглашаетесь с Политикой конфиденциальности.
Введите Ваш Email:
Введите адрес Вашего сайта:
Введите Ваше имя:
Нажимая кнопку «Получить предложение» вы соглашаетесь с Политикой конфиденциальности.
Оперативно отвечаем в рабочее время: с 10:00 до 19:00
Оперативно отвечаем в рабочее время: с 10:00 до 19:00
Вы уже проголосовали
Возьмем ТОП вместе?
Здравствуйте, меня зовут
,
я представляю компанию
.
Со мной можно связаться по телефону
Со мной можно связаться по тел.
,
или по email
ник в телеграм
Спасибо!
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Цена лидов в различных нишах
Тематика Стоимость лида (Москва/Россия)
Отдых 500
Мебель 350
Оборудование 500
Бансковские услуги 500
Безопасность 500
Организация мероприятий, концерты, праздники 500
Недвижимость 500
Строительство и отделка 500
Грузоперевозки 500
Доставка еды 350
Юридические услуги 500
Бухгалтерские услуги 500
Пластиковые окна 500
Детские товары 350
Автозапчасти 350
Образование 500
Возьмем ТОП вместе?
Здравствуйте, меня зовут
,
У меня есть сайт
.
Со мной можно связаться по телефону
Со мной можно связаться по тел.
,
или по email
ник в телеграм
Спасибо!
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Оставить заявку сейчас
Ваше имя*
Введите адрес Вашего сайта:*
Введите Ваш номер телефона:*
Введите Ваш e-mail:*
Введите Ваш ник в телеграм:
Выберите интересующую услугу *
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Подпишитесь на рассылку
Не пропустите самое интересное из мира SEO и Digital. Только актуальные и самые крутые статьи.
Заявка успешно отправлена!
Наши сотрудники уже приступили к анализу Вашего сайта. Наш менеджер свяжется с вами в течение дня, спасибо!