Просування сайтів & web-аналітика

Відправити заявку    +38 096 558 75 14

Мікророзмітка для інтернет-магазину

Якщо 5-6 років тому багато магазинів обходили стороною мікророзмітку, то сьогодні, в зв'язку зі стрімким розвитком пошукової видачі Google і Google Shopping просто необхідно зробити мікророзмітку в інтернет-магазині. Ми не будемо довго розповідати, як це впливає на показники CTR і позиції у видачі, а відразу пояснимо, як зробити мікророзмітку без зайвих деталей.

В інтернет-магазині мікророзмітка необхідна для наступних сторінок:

  • Головна
  • Категорія товару
  • Картка товару
  • Інформаційні сторінки

Мікророзмітку можна зробити трьома способами - через Microdata, RDFa и JSON-LD. Вибір залежить від зручності технічної реалізації в кожному конкретному випадку, але все підпорядковується правилам бібліотек schema.org. Ми з Вами розглянемо спосіб з використанням Microdata. Інші варіанти можна легко вивчити на самому сайті schema.org, посилання ми надамо. Отже, поїхали!

Головна сторінка:

Тут, в першу чергу необхідно показати пошуковому роботу інформацію про Вашу організацію (назва, адреса, контактні дані). У коді мікророзмітка для головної сторінки виглядає так:


<div itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Назва компанії">
<meta itemprop="description" content="Опис діяльності компанії">
<meta itemprop="image" content="посилання на логотип">
<meta itemprop="telephone" content="телефон">
<span itemprop="email" content="Електронна пошта">

<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="Вулиця, будинок, офіс">
<meta itemprop="addressLocality" content="Місто">
<meta itemprop="addressRegion" content="Область">
</div>
</div>

Категорія товару:

Микроразметка категории интернет-магазина

Це можуть бути світильники, ноутбуки, телефони, все що завгодно з виведенням зведеної інформації про категорію: мінімальна і максимальна ціна, кількість товарів в категорії, назва категорії.


<div itemscope itemtype="http://schema.org/Product">
<p itemprop="Name">Назва категорії</p>
<div itemtype="http://schema.org/AggregateOffer" itemscope="" itemprop="offers">
<meta content="5114" itemprop="offerCount"> <!-- позиції товару -->
<meta content="987582" itemprop="highPrice"><!-- Вища ціна -->
<meta content="315" itemprop="lowPrice"><!-- Нижча ціна -->
<meta content="UAH" itemprop="priceCurrency"><!-- Валюта -->
</div>

Картка товару:

Микроразметка товара

У мікророзмітці картки товару в першу чергу позначаємо: назву, зображення, ціну, наявність, короткий опис товару.


<div itemscope itemtype="http://schema.org/Product">
<div itemprop="name"><h1>Назва товару</h1></div>
<a itemprop="image" href="/images/name_image.jpg">
<img src="/images/name_image.jpg " title="Назва товару">
</a>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div>10 000 грн.</div>
<meta itemprop="price" content="10000.00">
<meta itemprop="priceCurrency" content="UAH">
<div>В наявності</div>
<link itemprop="availability" href="http://schema.org/InStock">
</div>
<div itemprop="description">Опис товару в 2-3 речення</div>
</div>
<meta itemprop="brand" content="Бренд товару">

У другу чергу, якщо є оцінки рейтингу із зірочками, необхідно це теж правильно показати роботу:


<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
Рейтинг <span itemprop="ratingValue">4</span>/5
заснований на <span itemprop="reviewCount">11</span> оцінках
</div>

Крім того, в картці товару можна помітити і відгуки:


<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<span itemprop="name">Заголовок відгуку</span>
от <span itemprop="author">Ім'я користувача</span>,
<meta itemprop="datePublished" content="2016-12-01">Грудень 12, 2016</div>

Є й додаткові змінні. Про них читайте на сторінці schema.org/Product. Все те, що ми перерахували рекомендуємо обов'язково зробити.

Хлібні крихти:

Микроразметка хлебных крошек

Цей вид хлібних крихт виводиться конкретно для інтернет-магазину. Для інформаційного сайту хлібні крихти виглядають трохи інакше.


<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/ ">
<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://example.com/dresses">
<span itemprop="name">Головна категорія</span></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses/real">
<span itemprop="name">Підкатегорія</span></a>
<meta itemprop="position" content="3" />
</li>
</ol>

Мікророзмітка хлібних крихт категорій інтернет-магазину та інформаційних сторінок трохи відрізняється. Щоб Ви довго не шукали, викладаємо нижче.

Хлібні крихти для новин, інформаційних сторінок:

хлебные крошки информационных страниц

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/адреса сторінки 1-го рівня (наприклад, головна)" itemprop="url">
<span itemprop="title">назва сторінки</span>
</a>
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/адреса сторінки 2-го рівня (наприклад, рубрика)" itemprop="url">
<span itemprop="title">назва сторінки</span>
</a>
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/адреса сторінки 3-го рівня (наприклад, підрубрика)" itemprop="url">
<span itemprop="title">назва сторінки</span>
</a>
</div>

Роблячи мікророзмітку Ви повинні не просто чекати, коли з'явиться її відображення в пошуковій системі, а скористатися спеціальними інструментами перевірки.

Як перевірити мікророзмітку?

Перевірити мікророзмітку можна через валідатори пошукових систем буквально в 2-3 кліка. В гугл можна це зробити тут, а в яндекс - тут. Системи видадуть Вам інформацію про те, що так чи не так з розміткою Вашого магазину.

проверка микроразметки

Валідатор мікророзмітки вкаже де саме є проблеми:

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

У популярних CMS мікророзмітка, як правило вже впроваджена в базовий функціонал. У більшості випадків мікророзмітку необхідно вставляти на самописних сайтах. Сподіваємося, що цей матеріал стане в нагоді при складанні техзавдання Вашому програмістові або веб-студії супроводу сайту для успішного seo просування і ранжирування в пошукових системах.