JSON-LD: руководство по разметке и примеры использования в Яндекс и Гугл.
admin
Теперь мы есть в Telegram! Самое свежее на нашем канале
JSON-LD расшифровывается как JavaScript Object Notation for Linked Data, и состоит из многомерных массивов (пары “атрибут-значение”).
Это формат представления структурированных данных, аналогичных Microdata или RDFa. В целях оптимизации под поисковики, JSON-LD обычно реализуется микроразметкой Schema.org, который помогает Гугл и Яндексу понимать и структурировать контент. Работать с JSON-LD будет проще так как можно вставлять разметку в HTML-документ, а не обрабатывать все необходимые элементы (как это происходит в случае с Microdata).
Оглавление руководства:
- Зачем это нужно?
- Как это работает?
- 4 частых ошибки JSON-LD
- Как внедрить 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.
Также, обратите внимание на эту привлекательную запятую в конце выражения. Запятые означают “Там есть кое-что еще! Нужно парсить дальше”.
Совет: следите за запятыми (и всегда проверяйте результат с помощью инструмента от Google). На практике, запятые – самое больное место многих программистов и JSON-LD здесь не поможет. Пропущенные запятые означают невалидную разметку.
"@Type": "…",Финальный вещь в связке JSON-LD Schema – спецификация @type (после запятой обычно следует описание всех данных). @type определяет тип элемента в разметке. Более развернутый список типов смотрите по ссылке https://schema.org/docs/full.html. В нижеприведенном примере @type говорит: “Эй, я использую тип элемента Person (информацию о нем можно найти на http://schema.org/Person). На самом деле, если вы впишете URL в браузер, то увидите документацию о типах и техническую спецификацию, включая все свойства (иногда проскакивают даже примеры использования).
Вложенные @type: при использовании вложенного типа нужно вкладывать один @type в другой (здесь важно понимать разметку для хлебных крошек и каталога товаров).
Пары атрибут-значение
Следующий этап заключается в описании информации о типе элемента. Свойства внутри типов элементов можно подсмотреть на странице Schema.org.
С точки зрения синтаксиса, в JSON-LD есть 2 важных элемента для каждого свойства:
- Item Property:
- Value:
Квадратные скобки
Квадратные скобки можно встретить в ситуациях, когда для одного свойства есть несколько значений. Чаще всего это встречается при перечислении нескольких социальных сетей, и для этого используется свойство элемента sameAs. Внизу квадратные скобки как бы говорят: “Для этого типа элемента есть несколько значений, так как у Jason Derulo два вторых имени”.
Примечание: в квадратных скобках после последнего элемента отсутствует запятая. Это указывает на то, что внутри скобок больше нет информации.
Вложения
Применяется к ситуациям, когда информация организована в слои, то есть, когда одни объекты содержат в себе другие объекты. Часто как аналогию используют матрёшек, где одна кукла содержит в себе другую куклу, которая, в свою очередь, несет в себе еще одну.
Вложение – один из важнейших аспектов правильной разметки Schema JSON-LD, так как некоторые свойства будут принадлежать типам элементов, которые не принадлежат другим. Например, ниже вы можете видеть, как свойство "name" ссылается на название события, имя выступающего, и название места проведения. Имя выступающего и название места являются вложенными.
Сопоставьте корректное свойства name с подходящим типом элемента:
Вложение JSON-LD начинается со свойства элемента. Внутри первого типа (например, Movie) нужно для начала указать свойство (например, actor, director, image). Это свойства идентифицируется, а затем нам нужно открыть фигурные скобки, которые будут содержать новый тип элемента (как в случае с "@type":), а также данные атрибут/значение.
Чеклист вложений JSON-LD:
- Обязательное указание свойства (присущее типу элемента);
- Значение должно быть указано в фигурных скобках;
- НУЖНО идентифицировать тип элемента данного свойства;
- Нужно включать свойства атрибут/значение (на самом деле, существует список требований относительно того, что нужно указывать);
- Перед закрывающей фигурной скобкой не должно быть запятой;
- После закрывающей фигурной скобки запятая должна быть в случае, если дальше следующие иные свойства (если нет, то после нее должна идти изогнутая закрывающая скобка).
Частые ошибки
Если ваша разметка не проходит проверку валидации в Structured Data Testing Tool, и вы не можете понять в чем дело, то внимательно ознакомьтесь с этим списком. Ниже я расскажу вам о самых распространенных проблемах и ловушках, с которыми можно столкнуться во время работы с JSON-LD. 1. Синтаксис- “” - не то же самое, что "" ;
- Следите за запятыми;
- Отдельное внимание стоит уделить маленькому красному крестику с левой стороны в Structured Data Testing Tool. Часто этот крестик указывает на пропущенную или лишнюю запятую.
- Ознакомьтесь со спецификацией, посвященной обязательным/разрешенным свойствам для каждого типа в Schema.org;
- Всегда пользуйтесь Structured Data Testing Tool и валидатором Яндекса
- Вся описываемая информация должна быть на странице; информация, находящаяся за пределами страницы, не будет отображаться в результатах поиска, и в целом такой подход нарушает правила и требования Google;
- Копирование/вставка из документов Word/Excel может привести к нежелательному форматированию текста;
- Microsoft всегда заменяет "" на “”;
- Решение: пользуйтесь HTML-редактором.
Как внедрить JSON-LD на сайт?
Сложность этого процесса напрямую зависит от того, насколько хорошо вы знакомы со словарем Schema.org и синтаксисом JSON-LD. Ниже описан процесс для тех, кто только начинает работать с разметками JSON-LD и Schema.org, и пытается лучше понять присущий словарь. 1. Спросите себя: Какая разметка мне нужна?- Цель: определить, какую именно разметку контента можно сделать в рамках словаряSchema.org. Некоторые вещи могут казаться логичными в теории, но их будет невозможно реализовать при помощи существующего словаря.
- Цель: выясните, возможно кто-то уже делал то, что необходимо вам. Или может быть вы просто тренируетесь и экспериментируете? Не стоит заниматься разметкой только для того, чтобы она у вас была. Вам нужен контент, который поможет поисковым системам выискивать самую ценную информацию на ваших страницах и максимизировать ваши шансы на ранжирование.
- Ознакомьтесь с информацией о том, какую разметку поддерживает каждый поисковик:
- Не думайте, что вам каждый придется писать разметку JSON-LD с нуля. Используйте примеры от Google!
- Особенно в начале работы с Schema.org желательно как можно чаще обращаться к технической документации, и постоянно выяснять, для чего предназначены определенные типы элементов, на скольких сайтах используется данный тип разметки, а также то, как различные свойства помогают лучше структурировать данные на ваших страницах. Спустя какое-то время эта процедура станет нужна только когда вы будете работать с незнакомой разметкой.
- Экономьте свое время и мысли. Возможно, в вашей ситуации намного лучше будет прибегнуть к приему обратного инжиниринга, и просто адаптировать под себя уже существующий пример реализации.
- Время от времени, в примерах Google удаляются теги <script>, но учтите, что они важны для HTML-документов. Javascript может парситься без тегов <script>.
- Для этого этапа не требуется какой-то особый синтаксис, так как это больше упражнение на мысленную организацию. Сосредоточьтесь на том, что вы хотите создать. На самом деле, лучше даже разобраться с мыслями еще до того, как вы приступили к работе.
- Часто бывает так, что есть идея относительно, что вы хотите, но не всегда сразу понятно, возможно ли реализовать этот замысел в соответствии с вокабуляром.
- Убедитесь, что ваши структурированные данные валидны, и все свойства элементов установлены корректно.
WordPress
Как обычно для вордрпесс можно найти готовые решения, вот популярные плагины:- NextGEN Facebook (указывает автора публикации и издателя)
- Structured Data of JSON-LD (мощный плагин, поддерживает все типы разметки)
0 комментариев
Добавить комментарий
