Разметка получила свое название от языка JSON (англ. JavaScript Object Notation) – данный формат хорош, как для подачи информации людям, так и машинам.
JSON-LD (англ. Linked Data) – передача связанных данных с помощью текстового формата JSON. Особенностью JSON-LD является теговость, он внедряется как отдельный тег, а не встраивается в код страницы. Так что с данной задачей может справиться человек, далекий от программирования.
Пример разметки с помощью формата JSON-LD:
Как видно, такой «тег» удобно размещать в коде страницы, не волнуясь о нарушении ее работоспособности. Однако у JSON-LD есть весомый минус. Данная микроразметка не будет видна пользователю (имеются ввиду не будет заметны её параметры на элементах), что противоречит требованиям поиска – не использовать скрытый контент. Стоит отметить, что этот формат в 2013 году был рекомендован Schema.org для разметки страниц, а в середине 2014 всемирно известный поисковик Google посоветовал использовать JSON-LD.
Синтаксис микроразметки JSON-LD
- @context — Используется для определения коротких имен, используемых во всем документе JSON-LD.
- @id — Используется для уникальной идентификации вещей.
- @value — Используется для указания данных, связанных с определенным.
- @language — Используется для указания языка.
- @type — Используется для установки типа данных.
- @container — Используется для установки типа контейнера.
- @list — Используется для выражения упорядоченного набора данных.
- @set — Используется для выражения неупорядоченного набора данных и обеспечения того, что значения всегда представлены как массивы.
- @reverse — Используется для выражения обратных свойств.
- @index — Используется для указания того, что контейнер используется для индексирования информации.
- @base — Используется для установки базового IRI.
- @vocab — Используется для расширения свойств и значений @typeс помощью общего префикса IRI.
- @graph — Используется для выражения графика.
- : — Сепаратор для ключей JSON и значений.
Используя данный формат, вы можете создать разметку:
- организации;
- товара;
- отзыва;
- определенного человека;
- фотографии.
И многого другого. Чтобы у вас получилась разметка, необходимо разместить атрибуты схемы туда, где будет отображаться информация для пользователей.
Пример микроразметки JSON-LD товаров
<script type=»application/ld+json»>
{
«@context»: «https://schema.org»,
«@type»: «Product»,
«url»: «https://microdata.pro/demo/index.php?route=product/product&product_id=28»,
«category»: «Телефоны и PDA»,
«image»: «https://microdata.pro/demo/image/catalog/demo/htc_touch_hd_1.jpg»,
«brand»: «HTC»,
«manufacturer»: «HTC»,
«model»: «Товар 1»,
«gtin12»: «upc»,
«gtin8»: «ean»,
«productID»: «isbn»,
«aggregateRating»: {
«@type»: «AggregateRating»,
«ratingValue»: «4.5»,
«reviewCount»: «2»
},»description»: «Описание товара»,
«name»: «HTC Touch HD»,
«offers»: {
«@type»: «Offer»,
«availability»: «https://schema.org/InStock»,
«price»: «122.00»,
«priceCurrency»: «RUB»
},
«review»: [
{
«@type»: «Review»,
«author»: «Тест 2»,
«datePublished»: «2016-06-06»,
«description»: «Текст отзыв»,
«reviewRating»: {
«@type»: «Rating»,
«bestRating»: «5»,
«ratingValue»: «5»,
«worstRating»: «1»
}
},{
«@type»: «Review»,
«author»: «Тест имени для отзыва»,
«datePublished»: «2016-06-06»,
«description»: «Текст отзыва»,
«reviewRating»: {
«@type»: «Rating»,
«bestRating»: «5»,
«ratingValue»: «4»,
«worstRating»: «1»
}
}],»isRelatedTo»: [
{
«@type»: «Product»,
«image»: «https://microdata.pro/demo/catalog/demo/apple_cinema_30.jpg»,
«url»: «https://microdata.pro/demo/index.php?route=product/product&product_id=42»,
«name»: «Apple Cinema 30"»,
«description»: «Описание товара»,
«offers»: {
«@type»: «Offer»,
«price»: «777.00»,
«priceCurrency»: «RUB»
}
}
]
}
</script>
Пример микроразметки логотипа JSON-LD
Для разметки логотипа следует указать:
- Словарь микроразметки.
- Тип данных. В нашем случае — “Organization”.
- URL-адрес ресурса.
- URL-адрес логотипа.
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "http://www.example.com",
"logo": "http://www.example.com/images/logo.png"
}
</script>
[/code]
Микроразметка контактов JSON-LD
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "url": "http://www.example.com", "name": "Unlimited Ball Bearings Corp.", "contactPoint": { "@type": "ContactPoint", "telephone": "+1-401-555-1212", "contactType": "Customer service" } } </script>
Разметка рецепта блюда JSON-LD
<script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Recipe", "name": "Grandma's Holiday Apple Pie", "author": "Elaine Smith", "image": "http://images.edge-generalmills.com/56459281-6fe6-4d9d-984f-385c9488d824.jpg", "description": "A classic apple pie.", "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4", "reviewCount": "276", "bestRating": "5", "worstRating": "1" }, "prepTime": "PT30M", "totalTime": "PT1H", "recipeYield": "8", "nutrition": { "@type": "NutritionInformation", "servingSize": "1 medium slice", "calories": "230 calories", "fatContent": "1 g", "carbohydrateContent": "43 g", }, "recipeIngredient": [ "1 box refrigerated pie crusts, softened as directed on box", "6 cups thinly sliced, peeled apples (6 medium)", "..." ], "recipeInstructions": [ "1...", "2..." ] } </script>
Микроразметка страницы услуг JSON-LD
Какие настройки выбрать для разметки в модуле MicrodataPro
Для полной универсальности что бы понравится всем поисковым роботам я рекомендую оставлять в настройках двойной синтаксис Microdata + JSON-LD. Каждый робот отдает предпочтение одному из форматов, а разметив всеми- выберет наиболее подходящий. Тем более что модуль передает одни и те же данные только двумя синтаксисами.
WordPress
Как обычно для вордрпесс можно найти готовые решения, вот популярные плагины:
- NextGEN Facebook (указывает автора публикации и издателя)
- Structured Data of JSON-LD (мощный плагин, поддерживает все типы разметки)
Альтернативный способ разметки данных на сайте
Также можно всё сделать без залезания в код, самостоятельно, в Гугле для этого есть инструмент во вкладке Search Console «Другие ресурсы» – Мастер разметки структурированных данных. Выбираешь тип данных (например: организация), вставляешь URL страницы, она подгружается – и размечай. // ]]>
11 комментариев. Оставить новый
Искал плагины для вордпресса, предоставляющие возможность использования готовых решей, после того как прочел Вашу статью второц который Вы указали, Structured Data of JSON-LD, пока в процессе, спасибо за статью, как всегда очень полезно и информативно!!!
Спасибо за полезную информацию. Начал интересоваться микроразметкой достаточно давно, в программировании я не разбираюсь, но микроразметка была необходима. Не мог разобраться в настройках разметки в модуле MicrodataPro. Благодаря Вашей статье много прояснилось, действительно полезно!
Оказывается микроразметка это стандарт семантической оптимизации, которая помогает роботам структурировать информацию на страницах сайта. После поверхностного изучения HTML-кода, мне было интересно узнать и про микроразметку. Найти информация труда не составило, но вот найти понятное короткое изложение оказалось намного сложнее. Статья мне понравилась, нашла то, что искала.
Стоит добавить, что все данные в микроразметки должны присутствовать на самом сайте. Гугл может не вывести сниппет, если нет информации на странице, она должна присутствовать в любом виде. Иначе можно попасть под фильтр.
Хотелось бы узнать, как можно добавить систему рейтинга со звездами в микроразметку? И можно ли это сделать автоматически через search console, или придется лезть в код?
Используя данные из Вашей статьи, решил написать микроразметку для отзыва. Хочу сделать возможность комментирования статей из моего блога.
На моем сайте первоначально использовался такой способ микроразметки логотипа, подумал что это не весьма рабочий вариант. Однако возможно оставлю пока так, спасибо за статью
Стоит упомянуть про рейтинги и отзывы. Если вы их добавили в разметку Json-LD, то они где-то должны визуально присутствовать на сайте, должна быть какая-то система рейтинга и пр. В целом все данные разметки не должны обманывать или вводить в заблуждение посетителей сайта. Для полной безопасности сделайте так, чтобы размеченые данные были где-то видны на странице.
Вообще можно чтобы были не видны. Ведь джисон по сути дублирует контент.
Сталкивалась с разметкой shema для своего интернет-магазина. Но эта разметка показалась мне намного полезнее и интереснее. Постараюсь расширить свой кругозор и реализовать ее в своем проекте.
Сталкивался с двумя разметками и могу сказать, что по сравнению с разметкой shema.org, микроразметка JSON-LD выглядит намного приятнее за счет того, что не разброшена по всему контенту и не привязана к html-коду. Это не позволит при смене верстки слететь разметке и требовать ее восстановления.