Хотите, чтобы сниппет страниц Вашего сайта выгодно выделялся среди конкурентов в результатах поиска, а Google лучше понимал структуру Вашего ресурса? Тогда Вам необходимо позаботиться о расширении сниппетов с помощью внедрения микроразметки на страницы сайта. В этой статье мы подробно рассмотрим основные виды микроразметки, варианты ее внедрения и потенциальное влияние на сниппеты страниц в поисковой выдаче, ранжирование и индексацию сайта поисковыми системами.
Что такое микроразметка?
Микроразметка - специальный вид разметки, который помогает поисковой системе лучше понимать контент на страницах сайта. Также микроразметка позволяет улучшить внешний вид сниппета, а это в свою очередь может повысить его привлекательность для пользователя, и в итоге пользователь перейдет именно на ваш сайт.
Суть микроразметки заключается в том, чтобы разметить элементы находящиеся на странице сайта специальными тегами, чтобы выделить их для поисковой системы.
Наиболее популярным словарем микроразметки на данный момент является Schema.org.
Существует несколько синтаксисов микроразметки - Microdata, RDFa и JSON-LD. Подробнее о каждом из них далее.
Microdata
Синтаксис микроразметки, который появился впервые в HTML5. Разметка производится непосредственно в HTML-коде страницы. Состоит из нескольких основных элементов:
- itemscope - определяет какой блок будет являться узлом микроразметки (зачастую блок в котором находится информация, которая размечается)
- itemtype - используется для указания типа элемента (если например в блоке содержится рецепт какого-то блюда, то значение этого атрибута будет https://schema.org/Recipe)
- itemprop - используется для указания свойств элемента микроразметки (если например мы размечаем рецепт, то уникальными свойствами будут - itemprop = "recipeIngredient" или itemprop = "cookTime").
Подробную информацию по каждому типу микроразметки и их свойствам можно получить в словаре Schema.org.
Рассмотрим пример микроразметки с использованием синтаксиса Microdata для страницы с рецептом яичницы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div itemscope itemtype="https://schema.org/Recipe"> <span itemprop="name">Яичница</span> By <span itemprop="author">Иван Иванович</span>, <meta itemprop="datePublished" content="2021-05-01">May 1, 2021 <img itemprop="image" src="eggs.jpg" alt="Яичница" /> <span itemprop="description">Классический рецепт яичницы</span> Время приготовления: <meta itemprop="cookTime" content="PT10M">10 минут Теги: <link itemprop="suitableForDiet" href="https://schema.org/LowFatDiet" />Диетическое блюдо <div itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation"> Пищевая ценность: <span itemprop="calories">100 ккал</span>, <span itemprop="fatContent">3 г жира</span> </div> Ингридиенты: - <span itemprop="recipeIngredient">2 яйца</span> - <span itemprop="recipeIngredient">соль</span> - <span itemprop="recipeIngredient">перец</span> Как готовить: <span itemprop="recipeInstructions"> Разбиваем яйца на сковороду, солим, перчим. Ждем несколько минут. </span> </div> |
Итак, что мы видим в нашей микроразметке:
- <span itemprop="name">Яичница</span> - название блюда;
- <span itemprop="author">Иван Иванович</span> - имя автора блюда;
- <meta itemprop="cookTime" content="PT10M">10 минут - время приготовления 10 минут;
- <link itemprop="suitableForDiet" href="https://schema.org/LowFatDiet" />Диетическое блюдо - тут мы видим добавление в микроразметку еще одного типа - LowFatDiet. С помощью него мы указываем на то, что блюдо диетическое;
- <span itemprop="calories">100 ккал</span> - количество калорий в блюде;
- <span itemprop="recipeIngredient">2 яйца</span> - ингредиент блюда;
- <span itemprop="recipeInstructions">Разбиваем яйца на сковороду, солим, перчим. Ждем несколько минут. </span> - описание способа приготовления.
RDFa
Данный синтаксис микроразметки был разработан специалистами из W3C (World Wide WEb Consortium) с целью структурирования данных на сайте. Данный синтаксис схож с Microdata, так как тоже размечается непосредственно в HTML-коде. Сейчас данный синтаксис редко используется для стандартной микроразметки, так как он немного сложнее в реализации чем Microdata.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div vocab="https://schema.org/" typeof="Product"> <img property="image" src="dell-30in-lcd.jpg" alt="A Dell UltraSharp monitor"> <span property="name">Dell UltraSharp 30" LCD Monitor</span> <div property="aggregateRating" typeof="AggregateRating"> <span property="ratingValue">87</span> out of <span property="bestRating">100</span> based on <span property="ratingCount">24</span> user ratings </div> <div property="offers" typeof="AggregateOffer"> <span property="lowPrice">$1250</span> to <span property="highPrice">$1495</span> from <span property="offerCount">8</span> sellers Sellers: <div property="offers" typeof="Offer"> <a property="url" href="save-a-lot-monitors.com/dell-30.html">Save A Lot Monitors - $1250</a> </div> <div property="offers" typeof="Offer"> <a property="url" href="jondoe-gadgets.com/dell-30.html">Jon Doe's Gadgets - $1350</a> </div> ... </div> </div> |
JSON-LD
Этот синтаксис появился последним среди этих трех. Основное отличие в том, что разметка внедряется внутри тега <script>, а не в HTML-код. Представляет из себя пары “ключ-значение”.
Рассмотрим на примере того же рецепта яичницы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Recipe", "author": "Иван Иванович", "cookTime": "PT1H", "datePublished": "2021-05-01", "description": "Классический рецепт яичницы", "image": "eggs.jpg", "recipeIngredient": [ "2 яйца", "соль", "перец" ], "name": "Яичница", "nutrition": { "@type": "NutritionInformation", "calories": "100 ккал", "fatContent": "3 г жира" }, "recipeInstructions": "Разбиваем яйца на сковороду, солим, перчим. Ждем несколько минут.", "suitableForDiet": "https://schema.org/LowFatDiet" } </script> |
- ключами выступают author, cookTime, description и т.д.
- значениями этих ключей соответственно являются - Иван Иванович, PT1H (1 час), “Классический рецепт яичницы”.
Данный синтаксис наиболее простой и удобный, так как не надо изменять основную разметку страницы. Также данный синтаксис рекомендует использовать как сам словарь Schema.org, так и поисковая система Google.
Наиболее популярные типы микроразметки
На данный момент можно выделить следующие типы микроразметки как наиболее часто используемые:
- Organization
- Product
- BreadcrumbList
- Event
- FAQ
- AggregateRating
Рассмотрим каждый из этих типов отдельно.
Organization
Что такое Organization?
Данный тип микроразметки позволяет разметить данные об организации для того, чтобы выделить их в глазах поисковой системы. Это позволяет структурировать эти данные, чтобы поисковой системе было легче их получить.
Как Organization влияет на сайт?
Благодаря данным из микроразметки Organization можно улучшить ранжирование в локальной выдаче.
В сниппет после внедрения этого типа микроразметки может выводиться адрес компании или ее телефон. Также благодаря ей может происходить следующее:
Какие виды микроразметки Organization существуют?
У данного типа микроразметки существует множество подтипов:
- Airline
- Consortium
- Corporation
- EducationalOrganization
- FundingScheme
- GovernmentOrganization
- LibrarySystem
- LocalBusiness
- MedicalOrganization
- NGO
- NewsMediaOrganization
- PerformingGroup
- Project
- SportsOrganization
- WorkersUnion
Подробнее с каждым из них можно ознакомится в словаре Schema.org.
Пример микроразметки Organization
Рассмотрим пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "Organization", "url" : "https://svet.kharkov.ua/", "email" : "stsoffice@ukr.net", "logo" : "https://svet.kharkov.ua/wa-data/public/site/themes/epika20062017/img/logo.png?v1.1.0.58", "name" : "STS", "description": "Наша компания предлагает Вам поставки светотехнического оборудования и источников света для комплектации различных объектов (промышленного, офисного назначения, жилых помещений, декоративного и уличного освещения) от различных производителей - «Световые технологии», «PHILIPS», «GE», «BEGA», «Massive», «Linea Light», «Lena Lighting», «Feron», «Ultralight» и многих других производителей. Также Мы предлагаем Вам поставки кабельно–проводниковой и электротехнической продукции различных производителей и полное обеспечение строительными материалами для внутренних и наружных работ, по приемлемым для Вас ценам. Мы предлагаем продукцию различного уровням цен - от самого экономного до элитного уровня. Если Вас заинтересовало наше предложение просим предоставить заявку с интересующей Вас продукцией.", "contactPoint" :[ { "@type" : "ContactPoint", "telephone" : "+38 (057) 731-38-35", "contactType" : "customer service" } ] } </script> |
Это микроразметка Organization для интернет-магазина светотехнического оборудования.
Использующиеся ключи:
-
- url - адрес сайта;
- email - адрес электронной почты;
- logo - логотип сайта;
- name - название организации;
- description - краткое описание;
- telephone - номер телефона;
- contactType - тип обслуживания по телефону выше.
Это далеко не все поля, которые доступны в данном типе микроразметки.
Также можно использовать:
- принимаемая валюта;
- информация об оплате;
- указание филиалов;
- время работы каждого филиала и т.д.
Как внедрить Organization на свой сайт?
Внедрять тип микроразметки Organization согласно рекомендациям Google нужно на главную страницу сайта. Это логично, так как главная страница сайта грубо говоря является визитной карточкой компании или организации, и на ней содержится вся информация требуемая для этого типа микроразметки.
Что касается технического аспекта внедрения на сайт, то формируем скрипт вручную или же с помощью любого генератора микроразметки. Далее вставляем полученный скрипт в код главной страницы сайта.
Product
Что такое Product?
Данный тип микроразметки позволяет разметить информацию о товаре. С помощью этой микроразметки можно четко указать поисковой системе, что на странице является ценой, что является названием товара, а что является его описанием.
Как микроразметка Product влияет на сайт?
Благодаря микроразметке Product можно получить расширенный сниппет следующего вида:
Если говорить об улучшении ранжирования, то с помощью этой микроразметки мы можем увеличить CTR сниппета в поисковой выдаче, что косвенно дает улучшение поведенческих факторов, а это может сказываться на позициях. Также явно показываем поисковой системе чем является страница (товар или категория). А также предоставляем информацию о различных важных элементах товаров (цена, описание, отзывы, доступность).
Какие типы Product существуют?
У данного типа микроразметки существует множество подтипов:
- IndividualProduct
- ProductCollection
- ProductGroup
- ProductModel
- SomeProducts
- Vehicle
Подробнее с каждым из них можно ознакомится в словаре Schema.org.
Пример Product
Рассмотрим пример микроразметки Product:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Product", "aggregateRating": { "@type": "AggregateRating", "ratingValue": "5", "reviewCount": "11" }, "description": "Гидравлическая тележка (рокла, рохля) – одноцилиндровый ручной механизм для перемещения или подъема различных грузов. Закажите тележку на нашем сайте с доставкой за 3 дня!", "name": "Тележка гидравлическая (рокла, рохля)", "image": "https://site.ua/rokla.jpg", "offers": { "@type": "Offer", "availability": "https://schema.org/InStock", "price": "5600.00", "priceCurrency": "UAH" }, "review": [ { "@type": "Review", "author": "Елена", "datePublished": "2020-04-01", "reviewBody": "Купили тележку гидравлическую на 3т. Перевозим палеты тротуарной плитки весом до 2х т. За два месяца работы нареканий никаких не было, Подъемный механизм работает замечательно, ролики крутятся, метал крепкий.", "name": "Хорошая рокла", "reviewRating": { "@type": "Rating", "bestRating": "5", "ratingValue": "5", "worstRating": "1" } }, { "@type": "Review", "author": "Lucas", "datePublished": "2020-03-25", "reviewBody": "Купили недавно. Все работает без нареканий.", "name": "Отличный товар", "reviewRating": { "@type": "Rating", "bestRating": "5", "ratingValue": "5", "worstRating": "1" } } ] } </script> |
Это микроразметка Product для товара “Рокла”. В ней содержится 3 блока. Первый - AggregateRating (о нем подробнее ниже), второй - информация о товаре, третий - блок с разметкой отзывов для этого товара.
Использующиеся ключи:
-
- ratingValue - значение рейтинга товара (обычно от 1 до 5 звезд);
- reviewCount - количество отзывов о товаре;
- price - цена товара;
- priceCurrency - валюта;
- description - описание товара;
- author - имя автора отзыва;
- reviewBody - текст отзыва;
- bestRating, worstRating - верхний и нижний порог оценки;
- ratingValue - нынешний рейтинг товара.
Это далеко не все поля, которые доступны в данном типе микроразметки.
Также можно использовать:
- бренд товара;
- цвет товара;
- материал;
- модель;
- артикул и т.д.
Как внедрить Product на свой сайт?
Внедрять тип микроразметки Product согласно рекомендациям Google нужно на страницы товаров.
Что касается технического аспекта внедрения на сайт, то присутствует два варианта внедрения:
- формируем скрипт и тянем в значения данные с сайта с помощью переменных в которых хранится нужная информация;
- размечаем существующие элементы на странице с помощью атрибутов тегов согласно синтаксису Microdata.
В обоих вариантах внедряем код в шаблон страницы товара и проверяем с помощью инструмента проверки структурированных данных.
BreadcrumbList
Что такое BreadcrumbList?
BreadcrumbList - микроразметка используемая для разметки “хлебных крошек” сайта. Обычно это перечень элементов, который является цепочкой связанных элементов, последним элементов которой является страница на которой находится пользователь.
Как BreadcrumbList влияет на сайт?
В результате внедрения микроразметки BreadcrumbList можно получить расширеный сниппет следующего вида:
Выводятся “хлебные крошки” в том же виде, что и на сайте.
Пример BreadcrumbList
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "item": { "@id": "https://toyota.com.ua/ru/", "name": "Автосамит" } }, { "@type": "ListItem", "position": 2, "item": { "@id": "modelnyij-ryad", "name": "Новые автомобили" } }, { "@type": "ListItem", "position": 3, "item": { "@id": "https://toyota.com.ua/ru/camry", "name": "Camry" } } ] } </script> |
Это микроразметка BreadcrumbList для страницы “Toyta Camry”. Использующиеся ключи:
- position - позиция элемента в “хлебных крошках”;
- name - название элемента из “хлебных крошек”;
- item - ссылка на элемент “хлебных крошек”;
Как внедрить BreadcrumbList на свой сайт?
Как и в случае с Product внедряем одним из двух способов. Формируем скрипт в который тянем элементы “хлебных крошек”. Или же размечаем существующие элементы навигации на сайте с помощью синтаксиса Microdata.
Event
Что такое Event?
Event - вид микроразметки предназначенный для разметки каких-либо планирующихся событий, мероприятий. Согласно рекомендациям поисковой системы Google данная микроразметка должна соответствовать трем факторам:
- не должна содержать рекламных элементов или стоимости в названии, только в специальных свойствах;
- иметь четкую дату начала мероприятия;
- должна содержать место проведения (онлайн мероприятия не подходят)
Как Event влияет на сайт?
Благодаря внедрению этого вида микроразметки можно получить расширенный сниппет следующего вида:
В сниппете содержится информация о концерте (дата проведения - 14 и 15 сентября и исполнитель).
Также размечать этой микроразметкой можно и общую страницу мероприятия:
В итоге мы видим в сниппете все ближайшие мероприятия.
Какие виды Event существуют?
У данного типа микроразметки существует множество подтипов:
- BusinessEvent
- ChildrensEvent
- ComedyEvent
- CourseInstance
- DanceEvent
- DeliveryEvent
- EducationEvent
- EventSeries
- ExhibitionEvent
- Festival
- FoodEvent
- Hackathon
- LiteraryEvent
- MusicEvent
- PublicationEvent
- SaleEvent
- ScreeningEvent
- SocialEvent
- SportsEvent
- TheaterEvent
- VisualArtsEvent
Можно разметить как спортивное мероприятие, так и какое-то детское мероприятие. Вариантов множество, выбирайте любой подходящий Вам.
Пример Event
Рассмотрим следующий пример микроразметки Event:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<script type="application/ld+json"> { "@context":"https://schema.org", "@type":"MusicEvent", "name":"Nightwish", "image":"https://internet-bilet.ua/images/events_header/big/eh_1589202823_5eb94f8741c47.png", "startDate":"2021-09-14T20:00:00+03:00", "endDate":"2021-09-15T00:00:00+03:00", "url":"https://kiev.internet-bilet.ua/ru/nightwish", "eventStatus":"EventScheduled", "location": { "@type":"Place", "name":"Stereo Plaza", "address": { "@type":"PostalAddress", "streetAddress":"Киев, пр. Валерия Лобановского, 119", "addressLocality":"Киев", "addressCountry":"Украина" } }, "offers": { "@type":"AggregateOffer", "price":0, "lowPrice":0, "highPrice":0, "priceCurrency":"UAH", "url":"https://kiev.internet-bilet.ua/ru/event-scheme/34619/nightwish", "availability":"https://schema.org/InStock", "category":"primary", "validFrom":"2021-09-14T20:00:00+03:00", "seller": { "@type":"Organization", "name":"Сервис Internet-bilet.ua" } } } </script> |
Это микроразметка MusicEvent для страницы “Концерт Nightwish в Киеве”. Использующиеся ключи:
- startDate, endDate - дата начала и окончания мероприятия;
- name - название мероприятия;
- description - описание мероприятия;
- блок location - данные о месте проведения мероприятия.
Как внедрить Event на свой сайт?
Все как обычно. Либо составляем скрипт с данными со страницы мероприятия и внедряем в код этой же страницы. Либо размечаем уже существующий код с помощью синтаксиса Microdata.
FAQ
Что такое FAQ?
FAQ - микроразметка предназначенная для разметки страниц с часто задаваемыми вопросами. Появился данный вид микроразметки относительно недавно и уже успел стать очень известным. Так, после появления многие веб-мастера стали злоупотреблять внедрением этого типа микроразметки, вследствие чего поисковая система Google была вынуждена ужесточить требования к ней. После чего отображение FAQ в сниппетах сократилось в разы.
Как FAQ влияет на сайт?
Благодаря внедрению этого типа микроразметки можно занять гораздо больше места в поисковой выдаче, чем с помощью стандартного сниппета:
Как видно со скриншота выше, сниппет увеличивается чуть ли не в два раза. Это очевидно повышает привлекательность сниппета, а соответственно позволяет получить больше трафика на сайт, конечно же, при условии нахождения в ТОПе.
Пример FAQ
Рассмотрим следующий пример микроразметки FAQ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{ "@type": "Question", "name": "Сроки регистрации торговой марки?", "acceptedAnswer": { "@type": "Answer", "text": "Законодательством Украины сроки регистрации торговой марки на Украине не предусмотрены, что вызывает определенные сложности. На практике стандартный срок регистрации ТМ составляет 18-24 месяца. Существует ускоренная процедура проведения экспертизы, заказав которую можно получить решение экспертизы за 7-9 месяцев." } }, { "@type": "Question", "name": "Сколько стоит зарегистрировать ТМ?", "acceptedAnswer": { "@type": "Answer", "text": "Стоимость регистрации зависит от множества факторов:✓ будет ли проводиться проверка на тождество и сходство;✓ от количества классов;✓ будет подаваться цветная или черно-белая ТМ;✓ будет ли проводиться ускоренная процедура регистрации.Минимальная стоимость услуги составляет 6675 грн. (с учетом услуги Харьковской торгово-промышленной палаты)" } }, { "@type": "Question", "name": "Что такое «классы»?", "acceptedAnswer": { "@type": "Answer", "text":"Класс – это вид деятельности или услуги, производство товаров по назначению или с определенными свойствами. Классы для регистрации ТМ содержатся в Международной классификации товаров и услуг. "} }] } </script> |
Это микроразметка FAQ для страницы “Регистрация торговой марки”. Использующиеся ключи:
- блок Question c вопросом;
- name - вопрос;
- блок Answer с ответом;
- text - ответ.
Как внедрить FAQ на свой сайт?
Для внедрения микроразметки FAQ на свой сайт нужно сформировать для каждой отдельной страницы или же с помощью шаблона скрипт и внедрить его на страницы. Или же разметить вопросы и ответы соответствующими тегами с помощью синтаксиса Microdata.
AggregateRating
Что такое AggregateRating?
AggregateRating - тип микроразметки с помощью которого можно разметить рейтинг товара, какого-то заведения и т.д.. Обычно используется как часть какого-то более глобального типа, например Product. Для внедрения на сайт необходимо иметь на страницах отображаемый рейтинг, как вариант, в виде звезд. Лучше всего работает в комбинации с отзывами. Так как наличие отзывов подтверждает, что оценки составили реальные люди, а не внедрены программно.
Как AggregateRating влияет на сайт?
В результате внедрения этого типа микроразметки можно получить расширенный сниппет следующего вида:
Такой сниппет гораздо привлекательнее обычно, а значит может привести больше пользователей именно на ваш сайт.
Пример AggregateRating
1 2 3 4 5 |
"aggregateRating": { "@type": "AggregateRating", "ratingValue": "5", "reviewCount": "2" } |
Это микроразметка AggregateRating. Использующиеся ключи:
- ratingValue - текущая оценка;
- reviewCount - количество отзывов;
Как внедрить AggregateRating на свой сайт?
Для внедрения этого типа микроразметки на сайт нужно иметь на странице систему оценок (например, звезды). Далее внедряем скрипт в который подтягиваются данные о текущей оценке. Либо же размечаем элементы на странице с помощью синтаксиса Microdata.
Общие рекомендации по внедрению микроразметки
Согласно рекомендациям поисковой системы микроразметка должна содержать те же элементы, что присутствуют на странице. Соответственно, если какого-то элемента на странице нет, то его не должно быть и в микроразметке. Это будет считаться манипуляцией и сайт может получить ручные санкции от асессоров.
Не стоит использовать типы микроразметки, которые абсолютно не подходят к странице. За это также можно получить ручные санкции.
Как проверять и контролировать микроразметку
Для этих целей есть несколько сервисов.
Основным является валидатор микроразметки от Google.
Выглядит он следующим образом:
В нем можно как проверить микроразметку на конкретной странице сайта:
Так и проверить отдельный фрагмент кода:
Если с микроразметкой все хорошо, то сервис покажет следующее:
Если есть ошибки, то картина будет следующей:
Для того, чтобы контролировать ситуация с микроразметкой в панели веб-мастеров есть специальные разделы, разбитые по типам:
Внутри каждого из разделов можно увидеть информация по состоянию конкретного типа микроразметки на Вашем сайте:
Вывод:
Микроразметка на данный момент является одним из важных элементов оптимизации сайта. Она не только позволяет улучшить внешний вид сниппета, но и структурировать данные сайта для поисковой системы, что также может принести немало преимуществ в продвижении Вашего сайта.