Повышаем CTR, используя микроразметку: от хлебных крошек до расширенных сниппетов

17 Февраля 2020

Глобальный тренд в SEO — поведенческие факторы. Их снова крутят (о Боже, Яндекс, сделай, что-нибудь!), о них спорят и они действительно работают. Показатель, с которого начинаются поведенческие — CTR. Ниже рассмотрим, как увеличить органическую кликабельность, используя структурированные данные.

CTR (click-through rate или кликабельность) — соотношение числа кликов к количеству показов сайта по запросу в выдаче поисковых систем, выраженное в процентах.

Основные типы структурированных данных

Структурированные данные — формат кода, который используется для разметки различных типов информации на наших сайтах. Благодаря им поисковые системы лучше понимают тип контента и:

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

Словарей для разметки много, но чаще всего используются:

Микроразметка Schema.org. Стандарт, который прекрасно понимает как Google, так и Яндекс.

Ниже пример сниппета страницы, на которой правильно используется словарь schema.org/Recipe. Размечен каждый элемент рецепта: от картинок до ингредиентов. Результат:

Пример расширенного сниппета в Яндексе

В коде страницы разметка для ингредиентов выглядит так:

Пример микроразметки для рецептов

Но к правилам оформления мы ещё вернёмся.

Open Graph — протокол, разработанный Facebook для формирования превью при шеринге репостов с сайтов в социальных сетях (FB, ВК, Twitter, LinkedIn, Pinterest).

Форматы и синтаксис

Разметка добавляется в HTML-код страницы, поэтому способы могут быть разными. Основные:

Microdata — для обозначения элементов на странице используется атрибуты itemprop и itemtype. Громоздко, но просто и понятно как Google, так и Яндексу.
JSON-LD — структурированное описание контента размещается с помощью тега <script> в заголовке <head> или теле <body> страницы. Код может подтягиваться динамически, поэтому есть много плагинов под различные CMS для автоматизации разметки. Этот формат особенно приветствуются Google, но пока не поддерживается Яндексом.
RDFa — встречается всё реже. Также, как и в microdata, используются атрибуты для разметки видимых для пользователей HTML-элементов: property и typeof.

Microdata

Начнём с самого распространенного формата в рунете. Ключевой момент для понимания: используя Schema.org, независимо от выбранного синтаксиса, мы работаем с сущностями и их свойствами. Правильно определив сущность, можно найти подходящий словарь и схему на любую тематику.

Вот основные типы сущностей, которые поддерживаются поисковыми системами и полезны в SEO:

Разметка в Яндексе и Google

Например, для разметки информации об организации сначала нужно объявить подходящую схему и словарь с помощью атрибута itemtype:

    
	<div itemscope itemtype="http://schema.org/Organization" >
		...
	</div>

Далее можно использовать различные свойства из указанного словаря и размечать элементы на страницы. Полный перечень свойств каждого словаря можно найти в соответствующих разделах сайта schema.org. Например, адрес:

Разметка Schema для организаций

Используем itemprop, в значении которого используется свойство streetAddress, чтобы разметить часть текста, указывающего месторасположение организации:

    
    <span itemprop="streetAddress">Москва, ул. Орджоникидзе, 16</span>

Таким образом, мы сообщаем поисковым системам дополнительные маркеры: вот здесь у нас название организации, здесь логотип, телефон и так далее. Логика простая, а результаты могут иметь приятные последствия в выдаче по витальным запросам. Например подробная информация о компании в Google Knowledge Graph:

Граф знаний Google

Хлебные крошки

Отдельный словарь, который используется для разметки навигационных ссылок — http://schema.org/BreadcrumbList. Благодаря его использованию в сниппет подтягивается цепочка разделов сайта, что помогает пользователю ориентироваться и подчеркнуть соответствие интенту запроса.

Хлебные крошки в сниппете

Процесс разметки можно автоматизировать с помощью бесплатного инструмента, который генерирует готовый HTML-код с использованием microdata и возможностью добавить эмодзи в Title/Description.

Генератор разметки для сниппетов

Полезные и часто используемые словари

JSON-LD

Ещё один способ обозначить элементы на странице и структурировать данные с помощью Schema.org. Напомним, что Джон Мюллер из Google рекомендует использовать именно этот синтаксис, но для Яндекса пока стоит использовать microdata.

Как правило, JSON-объект подключается с помощью тега <script> в заголовок страницы, но можно размещать и в рамках тега <body>. Например, для хлебных крошек код будет выглядеть так:

    
    <html>
	  <head>
		<title>The title of the page</title>
		<script type="application/ld+json">
		 {
		  "@context": "https://schema.org",
		  "@type": "BreadcrumbList",
		  "itemListElement": [{
		  "@type": "ListItem",
		  "position": 1,
		  "name": "Books",
		  "item": "https://example.com/books"
		 },{
		  "@type": "ListItem",
		  "position": 2,
		  "name": "Authors",
		  "item": "https://example.com/books/authors"
		 },{
		  "@type": "ListItem",
		  "position": 3,
		  "name": "Ann Leckie",
		  "item": "https://example.com/books/authors/annleckie"
		 },{
		  "@type": "ListItem",
		  "position": 4,
		  "name": "Ancillary Justice",
		  "item": "https://example.com/books/authors/ancillaryjustice"
		 }]
		 }
		</script>
	  </head>
	<body>
	</body>
  </html>

Где:

"@context": "https://schema.org" — объявление используемой схемы.
"@type": "BreadcrumbList" — сущность, которая в примере выполняет роль контейнера.
"itemListElement" — массив, который включает в себя отдельные элементы-разделы, то есть хлебные крошки с указанием очередности, анкора и ссылки.

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

    
	<script type="application/ld+json">
	  {
		"@context": "https://schema.org/",
		"@type": "Product",
		"name": "Executive Anvil",
		"image": [
		"https://example.com/photos/1x1/photo.jpg",
		"https://example.com/photos/4x3/photo.jpg",
		"https://example.com/photos/16x9/photo.jpg"
		],
		"description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
		"sku": "0446310786",
		"mpn": "925872",
		"brand": {
		"@type": "Thing",
		"name": "ACME"
		},
		"review": {
		"@type": "Review",
		"reviewRating": {
		"@type": "Rating",
		"ratingValue": "4",
		"bestRating": "5"
		},
		"author": {
		"@type": "Person",
		"name": "Fred Benson"
		}
		},
		"aggregateRating": {
		"@type": "AggregateRating",
		"ratingValue": "4.4",
		"reviewCount": "89"
		},
		"offers": {
		"@type": "Offer",
		"url": "https://example.com/anvil",
		"priceCurrency": "USD",
		"price": "119.99",
		"priceValidUntil": "2020-11-05",
		"itemCondition": "https://schema.org/UsedCondition",
		"availability": "https://schema.org/InStock",
		"seller": {
		"@type": "Organization",
		"name": "Executive Objects"
		}
		}
	  }
    </script>

В SERP Google результат может выглядеть так:

Пример сниппета в Google

В выдаче по картинкам также подтянется рейтинг, цена, навигация и описание:

Пример раброты разметки в Google

Также для витальных запросов полезно добавить разметку для поиска по сайту прямо в SERP:

Пример поиска по сайту прямо в выдаче Google

Такой поиск работает как оператор site:www.bookvoed.ru и покажет релевантные результаты также в выдаче Google. Реализуется с помощью сущности SearchAction. В случае JSON-LD можно использовать такой шаблон:

    
      <script type="application/ld+json">
	   {
		"@context": "http://schema.org",
		"@type": "WebSite",
		"url": "http://example.com/",
		"potentialAction": {
		"@type": "SearchAction",
		"target": "http://example.com/search?&q={query}",
		"query": "required"
		}
	   }
      </script>

Важное правило при использовании JSON-LD: все элементы, которые добавляются в код разметки, должны быть доступны и видны пользователям:

Правила использования JSON-LD

Разумеется, ручная разметка рискует превратиться в раздражающую рутину, поэтому на помощь приходят плагины под популярные CMS и инструменты. Например:

Мастер разметки структурированных данных от Google
JSON-LD Schema Markup Generator
JSON-LD Playground

Популярные плагины под WordPress и Битрикс:

RDFa и RDFa Lite

RDFa — старая и довольно сложная модель представления данных, которая отчасти послужила причиной внедрения новых стандартов попроще, как microdata, так и JSON-LD.

Тем не менее, есть «облегчённая» версия RDFa Lite, которая оперирует пятью основными атрибутами:

vocab — указывает на словарь (как правило Schema.org)
typeof —определяет описываемую сущность, например Article (статья).
property — свойство объекта.
resource — идентификатор для каждого описываемого объекта.
prefix — служит для объединения нескольких словарей для одного объекта.

Пример использования всех атрибутов:

    
	<body vocab="http://schema.org/">
		...
		<div property="breadcrumb">
		  <a href="http://www.ibm.com/developerworks/">IBM developerWorks</a> >
		  <a href="http://www.ibm.com/developerworks/web/">Web development</a> >
		  <a href="http://www.ibm.com/developerworks/views/web/library.jsp"
		  >Technical library</a>
		</div>
		<div typeof="Article">
		  <div property="name">Введение в RDF</div>
		  <p property="author" resource="#uche.ogbuji" typeof="Person">
		  by <span property="name">Uche Ogbuji</span>, <span property="jobTitle">Партнёр</span>,
		  <span property="worksFor">Zepheira</span>.
		  </p>
		  <div>Published: <span property="datePublished">01 Dec 2000</span></div>
		  <div property="description">
		  <b>Аннотация</b>: статья о формате Resource Description Framework (RDF),
		  разработанном W3C.
		  </div>
		  <div>Теги для статьи:
		  <span property="keywords">Введение в rdf</span>,
		  <span property="keywords">rdf</span>,
		  <span property="keywords">Руководство</span>
		  .</div>
		  <div prefix="fben: http://www.freebase.com">
		  Статья предназначена для широкой аудитории.
		 </div>
		</div>
		...
	</body>

Open Graph

Микроразметка, которая используется для представления сайта при размещении ссылки на него в социальных сетях.

Типичный код выглядит так:

Пример OpenGraph разметки

То есть через атрибуты property тега <meta> объявляются свойства: название, изображение, размеры картинок (для разных социальных сетей могут отличаться), описание и так далее. Полный перечень возможных атрибутов можно увидеть на официальном сайте протокола.

Для валидации разметки стоит использовать инструмент Facebook, как разработчиков протокола Open Graph, но можно попробовать и Яндекс.Вебмастер.

Валидаторы микроразметки

Два основных инструмента для проверки корректности структурированных данных:

Яндекс.Вебмастер. Умеет проверять microdata, schema.org, микроформаты, OpenGraph, RDFa как для всей страницы, так и для отдельных фрагментов кода.

Вебмастер валидатор микроразметки

Валидатор микроразметки от Google. Есть возможность посмотреть предварительный результат разметки (например, для карточек товаров) и отследить все допущенные ошибки:

Валидатор микроразметки google

Проверка поддержки расширенных результатов в Google. Учитывает только разметку, способную влиять на представление сниппета в выдаче.

Проверка поддержки расширенных сниппетов

К сожалению, внедрение одной лишь разметки не гарантирует попадания в расширенные сниппеты, но если проект уже в ТОП-3 Google, то рекомендуем изучить все виды расширенных результатов, поддерживаемых Google и начать работать над подходящими под вашу тематику.

Как анализировать результаты?

В «Пиксель Тулс» есть инструменты для оценки поведенческих (под Яндекс и под Google), которые проверяют:

Общий трафик на страницу.
Общий поисковый трафик.
Поисковый трафик по целевому запросу.
Долю длинных сессий (более минуты).
Среднее время сессий.
Долю сессий с глубиной просмотра более двух страниц.
Вхождения запроса в Title и/или Description
Размер сниппета в сравнении с конкурентами.

Анализировать показатели можно для десктопной, так и для мобильной выдачи.

Также пригодится парсер сниппетов конкурентов: покажет размер заголовков/описаний в символах, эмодзи, наличие вхождения ключевой фразы.

Напоследок посмотрите вдохновляющую динамику CTR при изменении позиций в Google:

Рост CTR при изменении позиций в Google

Всем роста и больше переходов из SERP!

Рейтинг статьи:

По оценкам 51 пользователей

Узнайте, как увеличить SEO‑трафик сайта в 3+ раза?

Укажите домен вашего сайта, приоритетные регионы продвижения и получите самый
полный список точек взрывного роста трафика и заявок с вашего сайта

Выберите ваш сайт

укажите сайт, регион и близких вам конкурентов

Немного магии поисковой
оптимизации —

мы подготовим для вас не менее 25 персональных рекомендаций

Отслеживайте прогресс

и получайте регулярные советы, рост трафика и продаж

Другие новости