Содержание [скрыть]
Что такое микроразметка
В данной статье мы покажем, как за счет внедрения микроразметки на сайте интернет-магазина бижутерии увеличилась кликабельность объявления в органической выдаче Google почти в 1,5 раза и, как следствие, повысились продажи. Каждый seo-специалист или вебмастер рано или поздно сталкивается с такой ситуацией в сниппете выдачи Google: Назревает вопрос — как сделать точно также на своем сайте? Вначале разберемся, что такое микроразметка.Микроразметка сайта
Микроразметка — это разметка данных на странице и на сайте, которая используется для того, чтобы поисковый бот лучше распознавал контент на вашем сайте. Микроразметка данных — универсальная. Ее понимают все поисковые системы — Google, Yandex, Yahoo и другие. Перед тем, как внедрить микроразметку на сайт, необходимо определить тип ваших данных. Например, на карточке товара для интернет-магазина необходимо разметить цену товара, его наименование, описание, изображение, отзывы, рейтинг. Так поисковый бот без каких-либо проблем сможет понять, что именно размещено на странице и сделает ее более релевантной. Каждая поисковая система предоставляет веб-мастерам свой валидатор микроразметки для проверки правильности оформления данных. Самые актуальные сервисы: Сервис от ПС Google — Проверка структурированных данных Сервис от ПС Яндекс — Валидатор микроразметки А теперь разберемся, что необходимо знать для внедрения структурированных данных.Словари микроразметки
Микроразметка поделена на словари. Словарь — это набор различных атрибутов для данных. Рассмотрим самые актуальные на данный момент.Schema.Org
Этот словарь, который создавался несколькими поисковыми системами. Используется для того, чтобы пользователь мог узнать начальную информацию о товаре или человеке, не заходя на страницу сайта. Пользователь может, не заходя на страницу, узнать стоимость Iphone 6, рейтинг товара и количество отзывов.В словаре Schema.org существуют три атрибута, которые необходимо использовать в каждой микроразметке:- указываем тип данных, которой будем размечать (в данном случае - это продукт, товар);Iphone 6- здесь указываем наименование товара; - указываем поисковому боту, что это изображение товара;- указываем тип данных;8000- в свойстве "price" мы указали стоимость товара;грн- в свойстве "priceCurrency" мы указали валюту;Новый Iphone 6 в Украине- здесь мы указали описание товара;
- itemscope — указывает, какой объект мы используем;
- itemtype — всегда идет после itemscope и указывает, какой тип объекта будет размечен. В нашем примере, это Product (Продукт) — Iphone 6;
- itemprop — указывает свойства выбранного объекта, в нашем примере, это цена, описание и т.д.
OpenGraph
Это словарь, созданный социальной сетью Facebook для решения проблем с отображением страницы в социальных сетях. Благодаря этому словарю веб-мастер обеспечивает корректный показ ссылки в социальной сети: Словарь поддерживают не только социальные сети, но и программы-мессенджеры — Skype, Telegram и многие другие. Теперь рассмотрим основные атрибуты словаря Open Graph:- «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:<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>При помощи Microdata мы указали поисковому боту, что это информационная статья. Рассмотрим чуть подробнее:
- <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:<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<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Разметка страницы категории
Для страниц категорий интернет-магазина можно разметить:- Наименование категории;
- Минимальная цена товара в категории;
- Максимальная цена товара в категории;
- Валюта;
- Средняя оценка;
- Количество оценок;
- Максимальная оценка.
- Рейтинг категории.
<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>Не во всех CMS для интернет-магазинов есть возможность оставлять оценку на категории товара, для реализации такой возможности необходимо прибегнуть к помощи программистов или сторонних плагинов, в зависимости от вашей CMS. Но запомните, ни в коем случае нельзя хитрить и пытаться обмануть поисковую систему, путем добавления в микроразметку рейтинг, если на него не может влиять посетитель или нет визуального блока с рейтингом на странице. За этот обман можно получить фильтр от поисковых систем и позиции вашего сайта ухудшатся. Для проверки микроразметки мы использовали сервис Google “Инструмент проверки структурированных данных” Как видим, никаких ошибок допущено не было и после переиндексации сайта мы можем получить расширенный сниппет, который был представлен выше на скриншоте.
Микроразметка товаров
Всю информацию в карточке товара также можно разметить, а именно:- Наименование товара;
- Изображение;
- Описание товара;
- Цена;
- Валюта;
- Количество отзывов;
- Авторов отзывов;
- Дату отзывов;
- Тело отзыва.
<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>После внедрения микроразметки, необходимо проверить ее в сервисе Google — “Инструмент проверки структурированных данных” Никаких ошибок допущено не было, поэтому требуется подождать переиндексацию карточек товаров для получения расширенного сниппета. Теперь рассмотрим более детально, как именно правильная микроразметка помогает вашему сайту. Мы внедрили микроразметку для категорий товаров 25 сентября и с этого дня Google постепенно начал переиндексировать страницы. Одна из первых категорий была “Диадемы” и поэтому будем анализировать именно ее. Из данного графика, полученного при помощи Search Console, мы видим увеличение среднего CTR на данной категории. До внедрения структурированных данных, как мы видим на скриншоте, средний CTR категории “Диадемы” составлял 2,5%, после переиндексации данной страницы, CTR увеличился на 1 пункт и равен 3,47%. Благодаря микроразметке мы смогли увеличить CTR за короткий период.
В одном и другом, я имею в виду:
Через 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 появились в выдаче)