Bstrz afbanner platinum 728x90

JSON-LD: руководство по разметке и примеры использования в Яндекс и Гугл.

Разработка 0

Разберем эту тему от и до, для начала краткая справка:

 

JSON-LD расшифровывается как JavaScript Object Notation for Linked Data, и состоит из многомерных массивов (пары “атрибут-значение”).

Это формат представления структурированных данных, аналогичных Microdata или RDFa. В целях оптимизации под поисковики, JSON-LD обычно реализуется микроразметкой Schema.org, который помогает Гугл и Яндексу понимать и структурировать контент. Работать с JSON-LD будет проще так как можно вставлять разметку в HTML-документ, а не обрабатывать все необходимые элементы (как это происходит в случае с Microdata).

Оглавление руководства:

  1. Зачем это нужно?
  2. Как это работает?
    1. Базовые теги и связь с Schema.org
    2. Атрибуты и значения
    3. Квадратные скобки
    4. Вложения
  3. 4 частых ошибки JSON-LD
  4. Как внедрить JSON-LD на сайт
    1. Плагины для WordPress 

Что делает JSON-LD?

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

Как работает JSON-LD схема

Визуальная реализация сути работы JSON-LD: анализ неструктурированного веб-контента, описание и структурирование контента ради получения результата с более четкой структурой.

Где JSON-LD находится внутри HTML-страницы?

Google рекомендует помещать JSON-LD в заголовочную часть (<head>) HTML-документов. Однако, на самом деле, вы можете поместить фрагмент JSON-LD и в тело документа (<body>). Более того, Google даже умеет хватать динамические сгенерированные теги в DOM.

Базовые теги

Неизменяемые теги (так называемые immutable теги, которые вам даже не нужно запоминать, и просто скопируйте .)

<script type="application/ld+json"> {

Если в документе есть JSON-LD, то первое что вы увидите – это тег <script>. Данный тег при помощи атрибута type как бы говорит: “Эй, браузер, я вызываю Javascript, в котором есть JSON-LD.

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

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

"@context": "http://schema.org"

Следующий элемент, который постоянно присутствует в разметке JSON-LD, это тег @context со значением http://schema.org. @context как бы говорит “Эй, браузер, вот инструкции, на которые я ссылаюсь! Они находятся по адресу http://schema.org. Преимущество с точки зрения SEO в том, что мы можем использовать любые типы и свойства элементов, определенных в Schema.org.

значение @context

Также, обратите внимание на эту привлекательную запятую в конце выражения. Запятые означают “Там есть кое-что еще! Нужно парсить дальше”.

Совет: следите за запятыми (и всегда проверяйте результат с помощью инструмента от Google). На практике, запятые – самое больное место многих программистов и JSON-LD здесь не поможет. Пропущенные запятые означают невалидную разметку.

"@Type": "…",

Финальный вещь в связке JSON-LD Schema – спецификация @type (после запятой обычно следует описание всех данных). @type определяет тип элемента в разметке. Более развернутый список типов смотрите по ссылке https://schema.org/docs/full.html.

В нижеприведенном примере @type говорит: “Эй, я использую тип элемента Person (информацию о нем можно найти на http://schema.org/Person). На самом деле, если вы впишете URL в браузер, то увидите документацию о типах и техническую спецификацию, включая все свойства (иногда проскакивают даже примеры использования).

значение @type

Вложенные @type: при использовании вложенного типа нужно вкладывать один @type в другой (здесь важно понимать разметку для хлебных крошек и каталога товаров).

Пары атрибут-значение

Следующий этап заключается в описании информации о типе элемента. Свойства внутри типов элементов можно подсмотреть на странице Schema.org.

С точки зрения синтаксиса, в JSON-LD есть 2 важных элемента для каждого свойства:

  • Item Property:

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

  • Value:

вносится значение свойства. Важно, чтобы значение было привязано к свойству и в единственном числе (то есть, каждое значение описывайте по-отдельности. При необходимости использовать несколько значений для свойства элемента, можно использовать квадратные скобки). Строки (символы) и URL нужно обрамлять двойными прямыми кавычками. Цифры, целые числа и иные элементы из разряда программирования не обрамляются кавычками, но ничего страшного не произойдет, если вы это сделаете (это значит, что они будут расцениваться как тип данных string).

Квадратные скобки

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

Внизу квадратные скобки как бы говорят: “Для этого типа элемента есть несколько значений, так как у Jason Derulo два вторых имени”.

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

Вложения

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

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

Вложение – один из важнейших аспектов правильной разметки Schema JSON-LD, так как некоторые свойства  будут принадлежать типам элементов, которые не принадлежат другим. Например, ниже вы можете видеть, как свойство «name» ссылается на название события, имя выступающего, и название места проведения. Имя выступающего и название места являются вложенными.

Сопоставьте корректное свойства name с подходящим типом элемента:

Вложение JSON-LD начинается со свойства элемента. Внутри первого типа (например, Movie) нужно для начала указать свойство (например, actor, director, image). Это свойства идентифицируется, а затем нам нужно открыть фигурные скобки, которые будут содержать новый тип элемента (как в случае с «@type»:), а также данные атрибут/значение.

Чеклист вложений JSON-LD:

  1. Обязательное указание свойства (присущее типу элемента);
  2. Значение должно быть указано в фигурных скобках;
  3. НУЖНО идентифицировать тип элемента данного свойства;
  4. Нужно включать свойства атрибут/значение (на самом деле, существует список требований относительно того, что нужно указывать);
  5. Перед закрывающей фигурной скобкой не должно быть запятой;
  6. После закрывающей фигурной скобки запятая должна быть в случае, если дальше следующие иные свойства (если нет, то после нее должна идти изогнутая закрывающая скобка).

Используйте вложенния для повышения читабельности.

Наиболее часто этот трюк используется в разметке типа Product, где Price вкладывается внутри элемента Offer.

Частые ошибки

Если ваша разметка не проходит проверку валидации в Structured Data Testing Tool, и вы не можете понять в чем дело, то внимательно ознакомьтесь с этим списком. Ниже я расскажу вам о самых распространенных проблемах и ловушках, с которыми можно столкнуться во время работы с JSON-LD.

1. Синтаксис

  • “” — не то же самое, что «» ;
  • Следите за запятыми;
    • Отдельное внимание стоит уделить маленькому красному крестику с левой стороны в Structured Data Testing Tool. Часто этот крестик указывает на пропущенную или лишнюю запятую.

2. Словарь

  • Ознакомьтесь со спецификацией, посвященной обязательным/разрешенным свойствам для каждого типа в Schema.org;
  • Всегда пользуйтесь Structured Data Testing Tool и валидатором Яндекса 

3. Нарушение политики

  • Вся описываемая информация должна быть на странице; информация, находящаяся за пределами страницы, не будет отображаться в результатах поиска, и в целом такой подход нарушает правила и требования Google;

4. Microsoft 

  • Копирование/вставка из документов Word/Excel может привести к нежелательному форматированию текста;
  • Microsoft всегда заменяет «» на “”;
  • Решение: пользуйтесь HTML-редактором.

Как внедрить JSON-LD на сайт?

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

1. Спросите себя:

Какая разметка мне нужна?

  • Цель: определить, какую именно разметку контента можно сделать в рамках словаряSchema.org. Некоторые вещи могут казаться логичными в теории, но их будет невозможно реализовать при помощи существующего словаря.

Для чего мне нужна эта разметка?

  • Цель: выясните, возможно кто-то уже делал то, что необходимо вам. Или может быть вы просто тренируетесь и экспериментируете? Не стоит заниматься разметкой только для того, чтобы она у вас была. Вам нужен контент, который поможет поисковым системам выискивать самую ценную информацию на ваших страницах и максимизировать ваши шансы на ранжирование.
  • Ознакомьтесь с информацией о том, какую разметку поддерживает каждый поисковик:

2. Если вы используете разметку, поддерживаемую Google, то открывайте документацию по этому типу разметки и просмотрите примеры

  • Не думайте, что вам каждый придется писать разметку JSON-LD с нуля. Используйте примеры от Google!

3. Откройте страницу с типом данных на Schema.org

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

4. Копируйте/вставляйте неизменяемые данные (например, из <script to «@type»:)

  • Экономьте свое время и мысли. Возможно, в вашей ситуации намного лучше будет прибегнуть к приему обратного инжиниринга, и просто адаптировать под себя уже существующий пример реализации.
  • Время от времени, в примерах Google удаляются теги <script>, но учтите, что они важны для HTML-документов. Javascript может парситься без тегов <script>. 

5. Желаемый тип данных нужно добавлять в разметку как значение для @type:

6. Перечислите свойства и значения элемента

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

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

8. Тестирование в инсрументах Гугл и Яндекс

  • Убедитесь, что ваши структурированные данные валидны, и все свойства элементов установлены корректно.

9. Способ добавления разметки

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

WordPress

Как обычно для вордрпесс можно найти готовые решения, вот популярные плагины:

Видео для тех, кто знает английский:

Доводилось ли уже вам работать с JSON-LD? Пожалуйста, поделитесь своими мыслями и опытом в комментариях!

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Более 6 лет опыта работы

Отвечу в течении 24 часов

Минимальная сумма заказа 1000Р

Ваше сообщения отправлено
Ваше сообщения отправлено успешно