Розмітка для інтернет-магазинів: приклад реалізації

Семантична розмітка — набір додаткових тегів і атрибутів в тегах, за допомогою яких сайт може вказати пошуковим системам яку інформацію надає сторінка. Основна користь розмітки для SEO полягає в тому, що ми можемо істотно поліпшити уявлення сторінок сайту у видачі пошукових систем, а саме зробити сниппет більш привабливим для користувачів.

Зробивши сниппет інтернет-магазину більш помітним ми покращимо CTR сніпетів в пошуковій видачі, отже сайт зможе залучити більше трафіку і поліпшити клікові фактори, що, в свою чергу, впливає на ранжування сайту в пошукових системах.

Які дані можна розмітити на кожному інтернет-магазині?

  1. Розмітка хлібних крихт — BreadcrumbList.
  2. Розмітка картки товару — Product.
  3. Розмітка сторінок категорій — Product.
  4. Розмітка інформації про компанію — LocalBusiness.
  5. Розмітка пошукового рядку — WebSite, SearchAction.
  6. Розмітка зображень — ImageObject.

Розмітка хлібних крихт — BreadcrumbList. За допомогою семантичної розмітки можна розмітити хлібні крихти на всіх сторінках сайту інтернет-магазину. Пошукова система Google використовує цю інформацію для формування хлібних крихт в сніпеті. Таким чином ми вказуємо Google як їх слід формувати і, якщо все буде реалізовано правильно — в сніпеті отримаємо потрібні хлібні крихти.

 Сніппет №1

 Сніппет №2

Ця розмітка для інтернет-магазину допоможе підвищити CTR сайту у видачі пошукової системи Google, оскільки такі хлібні крихти виглядають значно привабливіше ніж просто url-адреса сторінки. Пошукова система Яндекс враховує цю розмітку, але використовує власні алгоритми щодо формування хлібних крихт в сніпеті.

Реалізація розмітки

Для зручності сприйняття інформації ми будемо всюди розмічати сторінки сайту https://plitka-ot-zavoda.ru/ . Там все це вже реалізовано, отже ви можете зайти і подивитися як це зроблено, якщо виникнуть питання.

На всіх сторінках сайту магазину, де є хлібні крихти, необхідно впровадити розмітку, виходячи з прикладу для сторінки https://plitka-ot-zavoda.ru/kollektsii-kerama-marazzi/italyanskaya-kollektsiya

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

Размітка хлібних крихт

Розмітка картки товару

— Product Ми також можемо розмітити відгуки користувачів, ціну, наявність, зображення, назва товару, валюту та безліч інших елементів. Дана розмітка для інтернет-магазину допоможе істотно поліпшити привабливість сниппета сторінок карток товарів. Пошукова система Google відмінно взаємодіє з розміткою і на більшості сторінок, де вона реалізована і є відгуки, в сніпеті виводиться ця інформація.

Яндекс, в свою чергу, знову ж таки, враховує цю розмітку, але інформацію в сниппет ніколи не виводить. У Яндекса взагалі немає зірочок і ціни в сниппета, так що дана розмітка може вплинути на CTR тільки в пошуковій системі Google.

Реалізація розмітки картки товару

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

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

У разі успішного впровадження розмітки для картки товару і перевірці через сервіс Structured Data Testing Tool проблем бути не повинно.

Розмітка картки товару

Розмітка сторінок категорій — Product

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

Варто сказати що навіть якщо на ваш сайт поскаржаться і ви отримаєте лист в Search Console такого змісту:
Санкції за спам в розмітці

Санкції за спам в розмітці структурованих даних на ранжування сайту ніяк не вплине, тільки розмітка перестане відображатися в сніпеті. В даному випадку слід прибрати розмітку і відправити запит на перегляд, санкції будуть зняті.

На кожній сторінці категорії, яка містить перелік товарів, ми можемо вказати дані:

  • кількість товарів;
  • мінімальна вартість;
  • максимальна вартість;
  • валюта.

Розмітивши ці дані на сторінках каталогу, можна зробити привабливі сніппети в пошуковій системі Google, виглядати вони будуть ось так:

Сніппет в Google - розмітка категорій

Сніппет в Google - розмітка категорій

Звичайно ж, дана розмітка буде відображатися далеко не завжди, але реалізувати її все одно варто. Яндекс, як правило, не виводить дану розмітку.

Реалізація розмітки

На кожній сторінці категорії необхідно розмістити цей код. Приклад реалізації зроблений для сторінки https://plitka-ot-zavoda.ru/kollektsii-kerama- marazzi

Розмістити його можна в будь-якому місці всередині тега body. Перевірити коректність розмітки для сторінок категорій можна за допомогою того ж сервісу:

Розмітка сторінок категорій

Розмітка інформації про компанії — LocalBusiness

За допомогою розмітки LocalBusiness ми зможемо вказати пошуковим системам інформацію про компанію: назва, адреса всіх філій, номери телефонів, час роботи, посилання на соціальні мережі. Дана розмітка призначена для того щоб надати повну інформацію про компанію пошуковим систем. Розмітка організації не впливає на сниппет сайту.

У іншому матеріалі ми більш детально розбираємо нюанси впровадження даної розмітки, обов’язково ознайомтеся.

Реалізація розмітки

Шаблон коду размітки организації выглядає наступнм чином:

Впровадити такий код розмітки потрібно на головній сторінці інтернет-магазину всередину тега head, оскільки це розмітка в форматі Json.
При коректному розміщення в сервісі перевірки розмітки ми побачимо наступне:

Розмітка організації для сайту Inweb.ua

Розмітка пошукового рядка — WebSite, SearchAction

Завдяки цій розмітці можна зробити дуже красиву і зручну форму пошуку по сайту, яка, за дотриманням певних умов, буде виводитися у видачі пошукової системи Google. На мою думку, пошуковий рядок буде зображатися якщо: сайт популярний і на нього йде багато вітального трафіку. Тільки в цьому випадку пошуковий рядок може бути корисним користувачам. Виглядає розмітка рядку пошуку ось так:

allo

Реализація размітки

Для того щоб розмітити пошук на сайті потрібно використовувати код:

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

Його можна додати в вихідний код кожної сторінки сайту або ж через GTM, використовуючи користувальницький тег HTML. Якщо код впроваджений вірний — ми побачимо наступнє:

Разметка строки поиска

Размітка зображень – ImageObject

На кожному інтернет-магазині можна розмітити зображення товарів за допомогою розмітки ImageObject. Таким чином можна вказати пошуковим системам інформацію про розміщені зображеннях, що може поліпшити уявлення сайту в пошуку по картинках .

Якщо реалізувати розмітку ImageObject за допомогою формату Microdata, можна в опис зображень додати ключових слів.

Реалізація розмітки зображень

Для всіх карток товарів необхідно розмітити зображення, виходячи з шаблону:

Приклад реализації:

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

  1. Structured Data Testing Tool.
  2. Як влаштований світ семантичної розмітки .
  3. Валідатор мікророзмітки від Яндекса.
  4. Schema.org.
  5. Впровадження розмітки організації.