{"id":14277,"url":"\/distributions\/14277\/click?bit=1&hash=17ce698c744183890278e5e72fb5473eaa8dd0a28fac1d357bd91d8537b18c22","title":"\u041e\u0446\u0438\u0444\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u0442\u0440\u044b \u0431\u0435\u043d\u0437\u0438\u043d\u0430 \u0438\u043b\u0438 \u0437\u043e\u043b\u043e\u0442\u044b\u0435 \u0443\u043a\u0440\u0430\u0448\u0435\u043d\u0438\u044f","buttonText":"\u041a\u0430\u043a?","imageUuid":"771ad34a-9f50-5b0b-bc84-204d36a20025"}

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

Привет!

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

В начале немного теории и принципов. Это мои принципы, выработанные на с основе опыта. У вас может быть другой взгляд на работу с микроразметкой.

  • Не перенасыщайте посадочную страницу микроразметкой одного типа.

Если на страницу категории с листингом 20 товаров, разместить 20 выводов микроразместки Product, то простите, какой из них поиску тянуть в сниппет?

Вместо повторяющихся Product, разместите один AggregateOffer.

  • Используйте более общие типы микроразметки для товаров.

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

Часто менеджер компании даже не поймёт, что вы от него хотите. Не требуйте от других то, что сами не смогли бы сделать быстро и хорошо. Цену и изображение вы сможете вывести, и с помощью Car, и с помощью Product.

Или другой пример, магазин, то есть Store. Подумайте, что вам даст наличие специализации от более общего типа микроразметки LocalBusiness. А что даст LocalBusiness по сравнению с ещё более общим Organization? Ничего - тогда берите более общий вид микроразметки. Его проще заполнять, а нужные вам данные о лого, адресе, изображении входа в магазин будут во всех из перечисленных типов.

  • Всегда думайте о том, что важно для пользователя.

Как говорится: "Спасибо, Кэп!", но поисковики тоже работают над тем, чтобы улучшать релевантность своей выдачи для пользователя. Ваша посадочная страница может вовсе не содержать микроразметки, но полезную табличную информацию, например, с характеристиками, что может найти отражение в сниппете страницы.

И, последнее, прежде, чем внедрять какой-либо тип микроразметки, разберитесь с тем, способна ли она влиять на отображение вашего сниппета. Не с помощью валидатора, а с помощью проверки на rich results.

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

LocalBusiness

Пример

<script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "LocalBusiness", "url" : "https://www.moscow-infiniti.ru/", "logo": "https://cdn.kodixauto.ru/media/image/609b855fa10eff0001a58da6", "name" : "Инфинити «У Сервис+»", "image" : "https://cdn.kodixauto.ru/media/resized_image/webp/60c86af3de230d55064a28ef/512/0", "telephone" : "+7(495)642-99-99", "email" : "[email protected]", "address" : { "@type" : "PostalAddress", "streetAddress" : "Москва, Ярославское ш., дом 11, корп. 1", "addressLocality" : "Москва", "addressCountry" : "Россия", "postalCode" : "129337" }, "openingHours" : "Mo,Tu,We,Th, Fr, Sa, Su 09:00-22:00", "geo" : [ { "@type": "GeoCoordinates", "latitude" : "55.854242", "longitude" : "37.679929" } ], "currenciesAccepted" : "RUB", "priceRange" : "3000000RUB-10000000RUB", "sameAs": [ "https://vk.com/moscowinfiniti", "https://www.facebook.com/moscowinfiniti/", "https://www.instagram.com/infiniti_uservice/" ] } </script>

Шаблон

<script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "LocalBusiness", "url" : "%ваш сайт%", "logo": "%ваше лого%", "name" : "%ваше название%", "image" : "%ваше изображение%", "telephone" : "%ваш телефон%", "email" : "%ваша почта%", "address" : { "@type" : "PostalAddress", "streetAddress" : "%ваш адрес%", "addressLocality" : "%ваш город%", "addressCountry" : "%ваша страна%", "postalCode" : "%ваш индекс%" }, "openingHours" : "%ваш график работы%", "geo" : [ { "@type": "%ваши координаты%", "latitude" : "%широта%", "longitude" : "%долгота%" } ], "currenciesAccepted" : "%валюта%", "priceRange" : "%разброс цен%", "sameAs": [ "%ваши соц.цети%" ] } </script>

Product

Пример

<script type = "application/ld+json"> { "@context": "http://schema.org", "@type": "Product", "brand": "INFINITI", "name": "INFINITI QX55", "image": "/images/infiniti/qx55/color/big/kh3.jpg", "description": "Купить Инфинити Ку Икс 55 в Москве у официального дилера Автоцентр на Таганке. Комплектации и цены на новый кроссовер Infiniti QX55 представлены на сайте. Автосалон дополнительно предлагает услуги кредита, лизинга, трейд-ин на привлекательных условиях.", "offers": { "@type": "AggregateOffer", "url": "https://www.auto-center.ru/infiniti/qx55/", "priceCurrency": "RUB", "lowPrice": "5290000", "highPrice": "5875000", "offerCount": "10", "availability": "http://schema.org/InStock", "itemCondition": "http://schema.org/NewCondition", "seller": { "@type": "Local Business", "name": "Автоцентр на Таганке" }}, "aggregateRating": { "@type": "AggregateRating", "ratingValue": 4.8, "bestRating": 5, "worstRating": 3.2, "reviewCount": 1 } } </script>

Шаблон

<script type = "application/ld+json"> { "@context": "http://schema.org", "@type": "Product", "brand": "%бренд%", "name": "%название товара%", "image": "%фото товара%", "description": "%описание товара%", "offers": { "@type": "AggregateOffer", "url": "%url-адрес%", "priceCurrency": "%валюта%", "lowPrice": "%нижнее ценовое предложение%", "highPrice": "%высшее ценовое предложение%", "offerCount": "%количество предложений%", "availability": "http://schema.org/InStock", "itemCondition": "http://schema.org/NewCondition", "seller": { "@type": "Local Business", "name": "%название организации%" }}, "aggregateRating": { "@type": "AggregateRating", "ratingValue": %рейтинг товара%, "bestRating": %лучший рейтинг%, "worstRating": %худший рейтинг%, "reviewCount": %кол-во оценивших% } } </script>

VideoObject

Пример

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "VideoObject", "name": "Обзор INFINITI QX50", "description": "Видеообзор INFINITI QX50", "thumbnailUrl": "https://www.auto-center.ru/infiniti/qx50/", "uploadDate": "2021-02-10T08:00:00+08:00", "duration": "PT0M23S", "contentUrl": "https://www.youtube.com/watch?v=aBdRVp1NOXY", "publisher": { "@type": "Local Business", "name": "Автоцентр на Таганке", "logo": { "@type": "ImageObject", "url": "https://www.auto-center.ru/images/logo-infiniti.png", "width": 150, "height": 70 } } } </script>

Шаблон

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "VideoObject", "name": "%название%", "description": "%описание%", "thumbnailUrl": "%url-адрес%", "uploadDate": "%дата загрузки%", "duration": "%продолжительность%", "contentUrl": "%ресурс-первоисточник%", "publisher": { "@type": "Local Business", "name": "%организация%", "logo": { "@type": "ImageObject", "url": "%изображение-превью%", "width": %ширина%, "height": %высота% } } } </script>

Breadcrumbs

<script type = "application/ld+json" > { "@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "name": "Главная", "item": "https://www.pragmaticar.ru/", "position": 1 }, { "@type": "ListItem", "name": " Модели", "item": "https://www.pragmaticar.ru/models/", "position": 2 }, { "@type": "ListItem", "name": " Модельный ряд Киа ", "item": "https://www.pragmaticar.ru/models/kia/", "position": 3 } ] } </script>

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

Внедрение микроразметки непосредственно в разметку страницы - приоритетный вариант. Его и рассмотрим.

<ol itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://www.pragmaticar.ru/"> <span itemprop="name">Главная</span></a> <meta itemprop="position" content="1" /> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://www.pragmaticar.ru/models/"> <span itemprop="name">Модели</span></a> <meta itemprop="position" content="2" /> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" content="https://www.pragmaticar.ru/models/kia/"> <span itemprop="name">Модельный ряд Киа</span></a> <meta itemprop="position" content="3" /> </li> </ol>

Примечание:

Последний тег li, элемент списка, не имеет «href», но для него указан атрибут content=”ссылка на саму себя”.

Вместо: href="https://www.pragmaticar.ru/models/kia/"

Используем: content="https://www.pragmaticar.ru/models/kia/"

P.S. Надеюсь нашли для себя что-то полезное! Пока

0
30 комментариев
Написать комментарий...
София Викторова

Мастер, извините, а где Мурманск?

Ответить
Развернуть ветку
Мария Эрнандес

Я тоже никак понять не могу, где же Мурманск

Ответить
Развернуть ветку
Александр Поспелов
Автор

Там же, где лайки на мою статью)) Мастерицы

Ответить
Развернуть ветку
Виктор Петров

Я бы ещё Q&A добавил как одну из обязательных и универсальных. В выдаче встречается намного реже, чем год назад, но есть ощущение, что этот блок в коммерческом сегменте для ПС уже намного приоритетнее текстового блока - тем боле что там всё равно чаще всего тупо спам ради ключей.

Ответить
Развернуть ветку
Александр Поспелов
Автор

у меня есть фишечка по использованию блока с Q&A, так, чтобы он был полезен почти в любой сфере. Но больше мне нравится его логичное применение. Например, круто "лезет" в околоинфо, как "сорта грушы", "чем отличается колоновидная груша", "как выбрать саженцы груши". если большой каталог с индивидуальными Q&A под посадочные страницы - это must have. Там то Q&A и пробьётся в сниппет.

Ответить
Развернуть ветку
Виктор Петров

Да, хорошее пересечение для коммерции и околоинформационных запросов - плюс к спаму это никак не отнести

Ответить
Развернуть ветку
НЕплатный акк

В одном сниппете указан не полный, а относительный адрес картинки от корня сайта - это не будет ошибкой?

Ответить
Развернуть ветку
Александр Поспелов
Автор

Image в Product? Не будет. На всякий случай скажу, что в Breabcrumbs, в моих примерах, только абсолютные ссылки нужно использовать.

Ответить
Развернуть ветку
Michael

Что это? Тысяча первый пост про разметку?

Ответить
Развернуть ветку
Чайка О.

У меня с разметкой сложно, но именно поэтому мне кажется, что это один из самых вменяемых постов про разметку.

Ответить
Развернуть ветку
Michael

Так тут просто переписанная гугл справка. Без какой-то дополнительной ценности.

Ответить
Развернуть ветку
Чайка О.

Понятно. То есть если что - как всегда к первоисточнику.

Ответить
Развернуть ветку
Igor

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

Ответить
Развернуть ветку
Aleksey Anisin
Реализации Хлебных крошек на JSON-LD хуже автоматизации с помощью создания вывода микроразметки Breacrumbs в разметке сайта.

Почему?

Ответить
Развернуть ветку
Александр Поспелов
Автор

Автоматизированно формировать ХК через код с выводом в разметке проще, потому что это менее трудозатратно и быстрее. Я бы предпочёл написать несколько правил формирования ХК, чем вручную формировать и размещать скрипты на каждой странице. Не забывайте ещё, что могут появляться новые страницы на сайте.

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

Ответить
Развернуть ветку
Aleksey Anisin
Я бы предпочёл написать несколько правил формирования ХК, чем вручную формировать и размещать скрипты на каждой странице. Не забывайте ещё, что могут появляться новые страницы на сайте.

Но это же не от типа разметки зависит, а от того как вы ее внедрите

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

То же самое можно сказать про разметку товаров, которую чуть выше по тексту вы рекомендуете делать с помощью json ld. Вся информация по товару уже есть на странице, ее просто нужно обернуть в соответсвующие теги.

В любом случае, за статью спасибо.

Ответить
Развернуть ветку
Александр Поспелов
Автор

Справедливо все, что вы написали, но на разных сайтах разметка будет сильно отличаться. Переделывать разметку товаров под нужды SEO здесь нет необходимости, а в реализации вывод ХК гораздо проще сделать сразу с микроразметкой. Дело в том, что я предлагаю здесь универсальные решения, которые подошли бы большинству. Если вы хотите и можете сделать идеал и вшить всю микроразметку в html-разметку - ваше право. Заглядывая наперёд, и Local Business, и Video тоже могут быть реализованы через вёрстку.

Ответить
Развернуть ветку
Виктор Петров

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

Ответить
Развернуть ветку
Aleksey Anisin
при первом парсинге контента разметка не будет просканирована

Потому что разметка обёрнута в тег <script>? Но мы же не добавляем ее на лету в момент загрузки страницы, она приходит вместе с исходным html, т.е. не попадёт в очередь отрисовки ?

Ответить
Развернуть ветку
Виктор Петров

Как и всё, что связано с JS. В принципе, есть простая проверка - грузим заданный URL в Screaming Frog с включенным рендерингом JS, вытягиваем страничку, где разметка выводится средствами JSON-LD, - и смотрим, что попадает в "сырой" HTML, а что выводится средствами js.

Ответить
Развернуть ветку
Серафим Евклипов

только json-ld под гугл, яндекс научился только разметку хлебных крошек читать

Ответить
Развернуть ветку
Виктор Петров

Непонятно. JSON-LD - это способ интеграции микроразметки. Почему вы сопоставляете это с возможностями Яндекса?
Он отлично читает многие виды разметки минимум лет 5, и многое выводил в сниппетах на выдаче.

Ответить
Развернуть ветку
Артем Бирюков

К сожалению всё не так красочно. Я общался с поддержкой по этому вопросу. Они совсем недавно добавили поддержку JSON-LD на поиске для ХК.
Поэтому я всегда рекомендую использовать микродату вместо JSON-LD. Микродата наверняка работает везде. А если с JSON-LD непонятки в одном из целевых поисковиков, то вывод что использовать очевиден.

Ответить
Развернуть ветку
Виктор Петров

Согласен, именно с форматом JSON-LD у Яндекса проблемы были (и есть - хотя бы во временном лаге). Поэтому я сам до сих пор предпочитаю разметку "хардкодом".
Я так понял, в принципе поставлена подсомнение способность Яндекса использовать микроразметку, кроме breadcrumbs.

Ответить
Развернуть ветку
Артем Бирюков

В справке есть список поддерживаемых. Там и продакт и организация. Но про JSON-LD если говорить, то только ХК

Ответить
Развернуть ветку
Серафим Евклипов

ну понятно что способ интеграции разметки, по последнему заявлению, кроме QApage и Breadcrumbs в сниппете он ничего не выведет

Ответить
Развернуть ветку
Александр Поспелов
Автор

Позвольте, комментировать не буду, просто ссылку вам предоставлю https://webmaster.yandex.com/tools/microtest/

Ответить
Развернуть ветку
Michael

Вот буквально вчера получил ответ. Ждал его больше месяца и причём ответили не на то, что спрашивал. А спрашивал: схавает ли робот разметку продукт через json под смарт банеры? В итоге схавал, но это к рекламе относится...

Ответить
Развернуть ветку
Александр Поспелов
Автор

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

Наверно, вы хотите от них чего-то, что вы в свой вопрос не заложили. Например, как вывести полезную информацию в сниппете. Тогда тут совсем другая история - у Яндекса другой функционал влияет на сниппет, например, карточка организации в Яндекс.Бизнес и фид "Товары и предложения"

Ответить
Развернуть ветку
Мария Эрнандес

Где Мурманск?

Ответить
Развернуть ветку
27 комментариев
Раскрывать всегда