Содержание [скрыть]

Что такое микроразметка
В данной статье мы покажем, как за счет внедрения микроразметки на сайте интернет-магазина бижутерии увеличилась кликабельность объявления в органической выдаче Google почти в 1,5 раза и, как следствие, повысились продажи. Каждый seo-специалист или вебмастер рано или поздно сталкивается с такой ситуацией в сниппете выдачи Google:Микроразметка сайта
Микроразметка — это разметка данных на странице и на сайте, которая используется для того, чтобы поисковый бот лучше распознавал контент на вашем сайте. Микроразметка данных — универсальная. Ее понимают все поисковые системы — Google, Yandex, Yahoo и другие. Перед тем, как внедрить микроразметку на сайт, необходимо определить тип ваших данных. Например, на карточке товара для интернет-магазина необходимо разметить цену товара, его наименование, описание, изображение, отзывы, рейтинг. Так поисковый бот без каких-либо проблем сможет понять, что именно размещено на странице и сделает ее более релевантной. Каждая поисковая система предоставляет веб-мастерам свой валидатор микроразметки для проверки правильности оформления данных. Самые актуальные сервисы: Сервис от ПС Google — Проверка структурированных данных Сервис от ПС Яндекс — Валидатор микроразметки А теперь разберемся, что необходимо знать для внедрения структурированных данных.Словари микроразметки
Микроразметка поделена на словари. Словарь — это набор различных атрибутов для данных. Рассмотрим самые актуальные на данный момент.Schema.Org
Этот словарь, который создавался несколькими поисковыми системами. Используется для того, чтобы пользователь мог узнать начальную информацию о товаре или человеке, не заходя на страницу сайта.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div itemscope="" itemtype="http://schema.org/Product"> - указываем тип данных, которой будем размечать (в данном случае - это продукт, товар); <div itemprop="name"> Iphone 6</div> - здесь указываем наименование товара; <img src="products/iphone-6.jpg" title="Iphone 6"> - указываем поисковому боту, что это изображение товара; <div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"> - указываем тип данных; <div itemprop="price">8000</div> - в свойстве "price" мы указали стоимость товара; <div itemprop="priceCurrency" content="UAH">грн</div> - в свойстве "priceCurrency" мы указали валюту; <div itemprop="description">Новый Iphone 6 в Украине</div> - здесь мы указали описание товара; </div> </div> |
- itemscope — указывает, какой объект мы используем;
- itemtype — всегда идет после itemscope и указывает, какой тип объекта будет размечен. В нашем примере, это Product (Продукт) — Iphone 6;
- itemprop — указывает свойства выбранного объекта, в нашем примере, это цена, описание и т.д.
OpenGraph
Это словарь, созданный социальной сетью Facebook для решения проблем с отображением страницы в социальных сетях. Благодаря этому словарю веб-мастер обеспечивает корректный показ ссылки в социальной сети:
- «og:locale» — указывает на язык контента и локацию сайта
- «og:type» — указывает тип контента на странице (статья, новость, обзор и т.д.)
- «og:title» — указывает метатег title
- «og:description» — указывает метатег description
- «og:url» — URL страницы
- «og:image» — указываем изображение статьи, обзора и т.д.
- «og:site_name» — имя сайта.
Синтаксисы
Для того, чтобы правильно разметить данные на сайте, необходимо знать синтаксис. Синтаксис — это набор правил для полноценного использования словаря. На данный момент актуально три синтаксиса для разметки данных:- Microdata
- RDFa
- JSON-LD
Microdata
Данный синтаксис впервые появился в HTML-5. Благодаря ему поисковые системы начали лучше понимать контент на сайте и использовать его в результатах поиска. Размечаются данные непосредственно в HTML-коде. Например, разметка статьи при помощи синтаксиса Microdata:
1 2 3 4 5 6 7 8 |
<article itemscope itemtype="http://schema.org/Article"> <h1 itemprop="name">Микроразметка</h1> <meta itemprop="inLanguage" content="ru" /> <section itemprop="articleBody">Давайте поговорим о микроразметке</section> <section itemprop="author" itemscope itmetype="http://schema.org/Person"> <span itemprop="additionalName">Представители SEO</span> </section> </article> |
- <h1 itemprop=»name»>Микроразметка</h1> — указали наименование статьи
- <meta itemprop=»inLanguage» content=»ru» /> — указали язык, в данном случае — это русский.
- <section itemprop=»articleBody»>Давайте поговорим о микроразметке</section> — указали тело статьи
- <span itemprop=»additionalName»>Представители SEO</span> — указали автора статьи
RDFa
В 2004 году данный синтаксис разработали специалисты из W3C (World Wide Web Consortium) для структурирования данных на сайтах. Все данные размечаются в HTML-коде. В наше время синтаксис RDFa почти не используется из-за сложности реализации. Поэтому представители Google вскоре начали отдавать предпочтение синтаксису Microdata для словаря Schema.org. На данный момент RDFa чаще всего используется в словаре Open Graph. Пример разметки статьи синтаксисом RDFa:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div vocab="http://schema.org/" typeof="Article"> <span property="name">RDFa</span> by <span property="author">SEO-специлист</span> Эту статью твитнули 20 раз и откомментировало 10 человек <div property="interactionStatistic" typeof="InteractionCounter"> <div property="interactionService" itemscope itemid="http://www.twitter.com" itemtype="http://schema.org/Website"> <meta property="name" content="Twitter" /> </div> <meta property="interactionType" content="http://schema.org/ShareAction"/> <meta property="userInteractionCount" content="20" /> </div> <div property="interactionStatistic" typeof="InteractionCounter"> <meta property="interactionType" content="http://schema.org/CommentAction"/> </div> </div> |
JSON-LD
Самый молодой и актуальный формат. Первый черновик этого синтаксиса появился в 2010 году. Основное отличие от остальных — JSON-LD внедряется не в код страницы, а в тег <script>. JSON-LD представляет из себя набор пар “ключ-значение”, который очень легко понимает не только поисковый бот, но и сам человек. Например, нам необходимо разметить статью при помощи JSON-LD
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 |
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article", "author": "SEO-специалист", "interactionStatistic": [ { "@type": "InteractionCounter", "interactionService": { "@type": "Website", "name": "Twitter", "url": "http://www.twitter.com" }, "interactionType": "http://schema.org/ShareAction", "userInteractionCount": "20" }, { "@type": "InteractionCounter", "interactionType": "http://schema.org/CommentAction", "userInteractionCount": "10" } ], "name": "JSON-LD" } </script> |
- @context, @type, author, interactionStatistic, interactionService, name, url, interactionType, userInteractionCount — ключи;
- SEO-специалист, Twitter, http://www.twitter.com, 20, 10 — значения.
Реализация
Теперь перейдем к вопросу: “Как все это реализовать?”. Для наглядного примера рассмотрим реализацию микроразметки для интернет-магазина бижутерии. Размечать данные мы будем при помощи синтаксиса JSON-LD и словаря Schema.orgРазметка страницы категории
Для страниц категорий интернет-магазина можно разметить:- Наименование категории;
- Минимальная цена товара в категории;
- Максимальная цена товара в категории;
- Валюта;
- Средняя оценка;
- Количество оценок;
- Максимальная оценка.
- Рейтинг категории.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type='application/ld+json'> { "@context": "http://www.schema.org";, "@type": "product", "name": "*Название категории*", "offers":{ "@type": "AggregateOffer", "lowPrice" : "*min цена товара*", "highPrice" : "*max цена товара*", "priceCurrency" : "UAH" }, "aggregateRating": { "@type": "aggregateRating", "ratingValue": "*средняя оценка*", "reviewCount": "*кол-во оценок*", "bestRating":"*максимальный рейтинг*" } } </script> |
Микроразметка товаров
Всю информацию в карточке товара также можно разметить, а именно:- Наименование товара;
- Изображение;
- Описание товара;
- Цена;
- Валюта;
- Количество отзывов;
- Авторов отзывов;
- Дату отзывов;
- Тело отзыва.
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 |
<script type="application/ld+json"> { "@context": "http://schema.org";, "@type": "Product", "aggregateRating": { "@type": "AggregateRating", "ratingValue": "*Средняя оценка товара*", "reviewCount": "*Количество отзывов*" }, "description": "*Описание товара*", "name": "*Наименование товара*", "image": "*Изображение товара*", "offers": { "@type": "Offer", "availability": "http://schema.org/InStock";, "price": "*Стоимость товара*", "priceCurrency": "UAH" }, "review": [ { "@type": "Review", "author": "*Имя автора отзыва*", "datePublished": "*Дата публикации отзыва", "description": "*Сам отзыв*", "reviewRating": { "@type": "Rating", "bestRating": "*мах оценка*", "ratingValue": "*оставленный рейтинг*", "worstRating": "*min оценка*"}}]} </script> |


В одном и другом, я имею в виду:
Через GTM нужно для каждой сущности разный триггер создавать? Или все вместе можно в одном?
У нас в одном находятся (кстати, так можно делать?):
«@type»: «Organization»,
«@type»: «PostalAddress», (в «address»)
«@type»: «ContactPoint» (внутри «contactPoint»)
И в другом
«@type»: «WebSite»,
«@type»: «SearchAction» (внутри «potentialAction»)
Получается надо 2 тега в GTM создать?
Здравствуйте, Оксана! Можно объявлять несколько сущностей разметки в рамках одного тега, с точки зрения синтаксиса все должно работать. Способ реализации зависит от того, должны ли сущности микроразметки использоваться на одном и том же наборе страниц, или нет. Если каждая из сущностей микроразметки должна содержаться только на своей группе страниц, то следует каждую из них задавать отдельным тегом. Например, если в данном случае «Organization» используется в качестве разметки сквозных данных в шапке/подвале сайта, то следует настроить один тег с активацией на всех страницах сайта, а второй тег (для сущности SearchAction) — с активацией только главной странице (так как разметку поиска по сайту следует добавлять только на главную страницу). Если бы шла речь о добавлении двух сущностей на одну и ту же страницу или группу страниц — их можно было бы объявить в рамках одного тега.
Есть разметка в формате JSON. Подскажите, какой триггер указывать в GTM для микроразметки товара?
Здравствуйте, Андрей!
При внедрении микроразметки через GTM необходимо использовать триггер «Просмотр страницы» («Page View»). Но внедрение микроразметки с помощью GTM стоит использовать только в случае разметки данных на сайте, которые редко изменяются. Например, разметку сущности Organization, с помощью которой размечаются контактные данные расположенные в сквозных блоках сайта (хедер или футер), можно задать для всех страниц через GTM c триггером просмотра любой страницы. Аналогичным образом можно через GTM задать разметку сущности LocalBusiness только для одной страницы «Контакты».
В случае же с добавлением семантической разметки сущности Product, для различных страниц товаров, GTM не получится использовать. Так как для каждого товара, в рамках сущности Product, должен задаваться уникальный набор значений свойств, которые соответствуют параметрам каждого конкретного товара. Для реализации шаблона микроразметки товаров рекомендуется привлечь веб-разработчика.
Спасибо огромное
А еще если категорий не много, можно через GTM вывести разметку категорий в JSON формате. Сделал так на небольшом проекте — звездочки и pricerange появились в выдаче)