Мікророзмітка для інтернет-магазину. Що потрібно і як реалізувати

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

Семантична мікророзмітка

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

Мікродані складаються із синтаксису:

Словник — це набір слів, що належать до класів і мають певні властивості, які використовуються для позначення вмісту на сторінці. По суті, це унікальна мова пошукових алгоритмів, що дає їм змогу визначати, що саме написано в певному сегменті контенту, читаючи такі терміни, як "name", "image", "title" тощо.

Синтаксис — це метод використання словникового запасу. Він визначає, які теги позначають контент, а також значення і властивості, які вони передають.

Навіщо використовувати мікророзмітку?

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

Сніпет — це невеликий інформаційний блок, який коротко описує вміст сторінки на основі запиту користувача.

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

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

Що можна розмітити на кожному інтернет-магазині

У кожному інтернет-магазині дані можуть бути розмічені, виходячи з конкретних потреб, цілей і характеристик. Ключові типи мікроданих для сайтів E-Commerce включають:

• LocalBusiness.
• Opengraph.
• Хлібні крихти BreadcrumbList.
• Product.
• Website
• ImageObject.
• VideoObject..
• Article.

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

Розмітка LocalBusiness

Схема LocalBusiness — це тип структурованих даних, які надають пошуковим системам конкретні відомості про компанію, такі як:

• назва;
• адреса;
• номер телефону;
• інші контактні дані;
• характер бізнесу;
• години роботи.

Цей тип розмітки слід застосовувати виключно до головної сторінки веб-сайту.

Приклад реалізації розмітки LocalBusiness

Визначте відповідну інформацію :

• Назва: офіційна назва вашого інтернет-магазину.
• Адреса: фізична адреса вашої компанії (якщо застосовно). Це може бути адреса вашого офісу або складу.
• Номер телефону: ваш основний контактний номер.
• Тип бізнесу: опишіть тип вашого бізнесу (наприклад, "Магазин електроніки", "Магазин одягу" тощо).
• Години роботи: години, коли доступна ваша служба підтримки клієнтів або фізичне місцезнаходження (якщо воно у вас є).

Виберіть формат: Google і більшість пошукових систем підтримують кілька форматів структурованих даних, таких як JSON-LD (рекомендується), мікродані та RDFa. JSON-LD часто є кращим, оскільки його можна помістити в <script> тег у заголовку вашого документа.

Додайте розмітку на свій веб-сайт. Використовуючи JSON-LD, розмітка може мати такий вигляд:

Замініть заповнювачі (наприклад, "Назва вашого інтернет-магазину", "123 Your Street") фактичними відомостями про вашу компанію.

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

Вигляд мікророзмітки LocalBusiness під час перевірки на валідність:

Розмітка Open Graph

Словник визначає, як загальне посилання відображатиметься в соціальних мережах. Посилання на Open Graph демонструє зображення і короткий опис вмісту на сторінці. Це має привабливий вигляд і підвищує рейтинг кліків.

Open Graph підвищує видимість веб-сайтів у соціальних мережах. Цей протокол можна інтегрувати у веб-сайт або шляхом його безпосереднього написання коду, або за допомогою плагінів для CMS.

Завдяки розмітці Open Graph кожна веб-сторінка, опублікована на відомих соціальних платформах, стає повноцінним об'єктом соціальної мережі. Це актуально для:

• Twitter
• Facebook
• Pinterest
• LinkedIn тощо.

Приклад реалізації розмітки Open Graph

Нижче наведено приклад тегів Open Graph, які ви можете додати в <head> розділ своєї веб-сторінки:

Замініть поля тегів (наприклад, "Title of Your Content", "https://www.example.com/page-url/") фактичним змістом і URL-адресами вашого сайту. Тег og:туре може різнитися залежно від типу контенту (наприклад, "стаття", "відеофільм", "книга" тощо), а "веб-сайт" - це тип загального призначення. Тег og:site_name не є обов'язковим, але його можна використовувати для вказівки назви вашого веб-сайту або додатка.

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

Хлібні крихти особливо актуальні для веб-сайтів E-Commerce. Для їх реалізації потрібно використовувати тип даних BreadcrumbList.

Хлібні крихти являють собою вкладені веб-сторінки, тому логічніше використовувати ul тег.

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

Для наочності подивимося код розмітки хлібних крихт для інтернет-магазину з використанням BreadcrumbList схеми Schema.org.

Приклад сніпета з хлібними крихтами:

Вигляд мікророзмітки BreadcrumbList під час перевірки на валідність:

Розмітка Product

Ця розмітка має важливе значення для SEO-просування інтернет-магазинів, оскільки допомагає поліпшити фрагменти сторінок, на яких вона реалізована.

Розмітка Product призначена для сторінок із товарами та цінами, дає змогу виводити в сніпети додаткову інформацію.

Це має такий вигляд:

Приклад реалізації розмітки Product

Щоб реалізувати цю схему на сторінках карток товару, інтегруйте розмітку за таким шаблоном:

Також крім карток товару цю схему можливо інтегрувати в категоріях товарів. Шаблон для категорії товарів:

У разі успішного впровадження перевірка валідності має такий вигляд:

Розмітка WebSite

WebSite - це розмітка пошукового рядка.

Розмітка WebSite з використанням Schema.org — це спосіб надати пошуковим системам інформацію про загальну структуру сайту. Він може поліпшити присутність вашого веб-сайту в результатах пошуку завдяки поліпшенню функції вікна пошуку додаткових посилань і надання додаткових можливостей пошуку за конкретним сайтом.

Приклад реалізації розмітки WebSite

Ось базовий приклад того, як можна реалізувати WebSite розмітку:

Необхідно розмістити наведений вище код у <head> розділі HTML-документа головної сторінки вашого веб-сайту.

Опис елементів:

• url: основна URL-адреса веб-сайту.
• potentialAction: описує потенційні дії, запропоновані сайтом. У цьому випадку це пошукова дія.
• target: URL-адреса пошуку веб-сайту, який {search_term_string} буде замінено фактичним пошуковим запитом.
• query-input: вказує параметр запиту для пошуку.
• name: назва веб-сайту.
• alternateName: альтернативне ім'я веб-сайту, якщо таке є.
• description: короткий опис сайту.

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

Перевірка успішної реалізації на валідаторі:

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

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

При використанні такої розмітки можна додати для зображення:

• опис;
• автора;
• дата створення та інше.

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

Додати таку розмітку для всіх карток товарів інтернет-магазину, використовуючи шаблон.

Опис елементів:

• url: URL-адреса сторінки, на якій знайдено зображення.
• contentUrl: пряма URL-адреса файлу зображення.
• caption: короткий підпис або заголовок зображення.
• description: детальніший опис зображення.
• thumbnail: надає детальну інформацію про зменшену версію зображення.
• uploadDate: дата, коли зображення було завантажено або розміщено на веб-сайті.
• width height: розміри зображення.

Перевірка валідності впровадженого коду:

Відео розмітка VideoObject

VideoObjectс Schema.org використовується для надання докладної інформації про відео на сайті. Коли використовується ця розмітка, пошукові системи можуть запропонувати більш багате відображення вашого відео в результатах пошуку.

Ця розмітка дає змогу додати додаткову інформацію про відеооб'єкти:

• назва;
• опис;
• автор;
• тривалість та інше.

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

Опис елементів:

• name: назва відео.
• description: детальний опис відеоконтенту.
• thumbnailUrl: URL мініатюри відео.
• uploadDate: дата завантаження або публікації відео.
• duration: тривалість відео у форматі ISO 8601 (наприклад, "PT1M33S" - 1 хвилина 33 секунди).
• contentUrl: пряма URL-адреса відеофайлу.
• embedUrl: URL-адреса програвача відео, зазвичай використовується для вбудовування на інші сайти.
• interactionCount: кількість взаємодій із відео (наприклад, переглядів або лайків).

Розміщувати цю розмітку необхідно в <head> розділі HTML-документа або поруч із відеоконтентом у тілі. Реалізація VideoObject схеми може гарантувати, що пошукові системи матимуть повне уявлення про відеоконтент на вашому сайті.

Якщо все зробити правильно, валідатор не покаже помилок:

Статейна розмітка Article

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

Розмітка може включати такі поля:

• заголовок статті;
• текст статті;
• зображення;
• дата публікації;
• автор;
• кількість коментарів.

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

Для всіх сторінок інтернет-магазину, які містять велику кількість текстової інформації, наприклад:

• блог;
• новини;
• статті

необхідно додавати таку розмітку.

Який вигляд має код для розмітки Article:

Опис елементів:

• headline: назва статті.
• description: короткий зміст або опис змісту статті.
• mainEntityOfPage: канонічна URL-адреса або головна сторінка, на якій знаходиться стаття.
• author: надає детальну інформацію про автора статті.
• datePublished: дата початкової публікації статті.
• dateModified: дата останнього оновлення або зміни статті.
• image: URL-адреса зображення, що представляє статтю.
• publisher: надає відомості про організацію, яка опублікувала статтю, включно з назвою та логотипом організації.

Розмістити цю розмітку необхідно в <head> розділі HTML-документа або поруч із вмістом статті в тексті. Реалізація Article схеми може допомогти пошуковим системам більш ефективно розуміти і відображати контент у результатах пошуку.

Перевірка коду валідатором має такий вигляд:

Перевірка наявності мікророзмітки на сайті

Після додавання всіх необхідних розміток на сайт або якщо необхідно з'ясувати, яка розмітка вже є на сайті, можна скористатися безкоштовними ресурсами для перевірки мікророзмітки.

1. Інструмент Google — для перевірки достатньо вставити URL у відповідне поле інструменту і трохи почекати результатів аналізу. Зовнішній вигляд інструменту Google:

1. Валідатор мікророзмітки Schema.org. Принцип дії аналогічний першому варіанту. Виглядає сервіс так:

Висновок:

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

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