441 подписчик

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

22 марта 202022 мар 2020

3 мин

Другие статьи по теме:

Ещё один способ обозначить элементы на странице и структурировать данные с помощью Schema.org. Напомним, что Джон Мюллер из Google рекомендует использовать именно этот синтаксис, но для Яндекса пока стоит использовать microdata.

Как правило, JSON-объект подключается с помощью тега <script> в заголовок страницы, но можно размещать и в рамках тега <body>. Например, для хлебных крошек код будет выглядеть так:

<html>
<head>
<title>The title of the page</title>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Books",
"item": "https://example.com/books"
},{
"@type": "ListItem",
"position": 2,
"name": "Authors",
"item": "https://example.com/books/authors"
},{
"@type": "ListItem",
"position": 3,
"name": "Ann Leckie",
"item": "https://example.com/books/authors/annleckie"
},{
"@type": "ListItem",
"position": 4,
"name": "Ancillary Justice",
"item": "https://example.com/books/authors/ancillaryjustice"
}]
}
</script>
</head>
<body>
</body>
</html>

Где:

"@context": "https://schema.org" — объявление используемой схемы.
"@type": "BreadcrumbList" — сущность, которая в примере выполняет роль контейнера.
"itemListElement" — массив, который включает в себя отдельные элементы-разделы, то есть хлебные крошки с указанием очередности, анкора и ссылки.

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

<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "Executive Anvil",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
"sku": "0446310786",
"mpn": "925872",
"brand": {
"@type": "Thing",
"name": "ACME"
},
"review": {
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": "4",
"bestRating": "5"
},
"author": {
"@type": "Person",
"name": "Fred Benson"
}
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.4",
"reviewCount": "89"
},
"offers": {
"@type": "Offer",
"url": "https://example.com/anvil",
"priceCurrency": "USD",
"price": "119.99",
"priceValidUntil": "2020-11-05",
"itemCondition": "https://schema.org/UsedCondition",
"availability": "https://schema.org/InStock",
"seller": {
"@type": "Organization",
"name": "Executive Objects"
}
}
}
</script>

В SERP Google результат может выглядеть так:

В выдаче по картинкам также подтянется рейтинг, цена, навигация и описание:

Также для витальных запросов полезно добавить разметку для поиска по сайту прямо в SERP:

Такой поиск работает как оператор site:www.bookvoed.ru и покажет релевантные результаты также в выдаче Google. Реализуется с помощью сущности SearchAction. В случае JSON-LD можно использовать такой шаблон:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "http://example.com/",
"potentialAction": {
"@type": "SearchAction",
"target": "http://example.com/search?&q={query}",
"query": "required"
}
}
</script>

Важное правило при использовании JSON-LD: все элементы, которые добавляются в код разметки, должны быть доступны и видны пользователям:

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