Популярное
Свежее
Моя лента
Сообщения
Рейтинг
Курсы
Темы
Маркетинг
Деньги
Сервисы
Личный опыт
AI
Телеграм
Крипто
Образование
Право
Маркетплейсы
Показать все
vc.ru
О проекте
Правила
Реклама
Приложения
Александр Поспелов
SEO

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

Привет!

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

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

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

Если на страницу категории с листингом 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" : "reception.infiniti@uservice.ru", "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. Надеюсь нашли для себя что-то полезное! Пока

17
1 ответ на пост
30 комментариев