Розмітка для інтернет-магазинів: приклад реалізації
(4,28 из 5 на основе 53 оценок(ки))
Loading...Семантична розмітка — набір додаткових тегів і атрибутів в тегах, за допомогою яких сайт може вказати пошуковим системам яку інформацію надає сторінка. Основна користь розмітки для SEO полягає в тому, що ми можемо істотно поліпшити уявлення сторінок сайту у видачі пошукових систем, а саме зробити сниппет більш привабливим для користувачів.
Зробивши сниппет інтернет-магазину більш помітним ми покращимо CTR сніпетів в пошуковій видачі, отже сайт зможе залучити більше трафіку і поліпшити клікові фактори, що, в свою чергу, впливає на ранжування сайту в пошукових системах.
Які дані можна розмітити на кожному інтернет-магазині?
- Розмітка хлібних крихт — BreadcrumbList.
- Розмітка картки товару — Product.
- Розмітка сторінок категорій — Product.
- Розмітка інформації про компанію — LocalBusiness.
- Розмітка пошукового рядку — WebSite, SearchAction.
- Розмітка зображень — ImageObject.
Розмітка хлібних крихт — BreadcrumbList. За допомогою семантичної розмітки можна розмітити хлібні крихти на всіх сторінках сайту інтернет-магазину. Пошукова система Google використовує цю інформацію для формування хлібних крихт в сніпеті. Таким чином ми вказуємо Google як їх слід формувати і, якщо все буде реалізовано правильно — в сніпеті отримаємо потрібні хлібні крихти.
Ця розмітка для інтернет-магазину допоможе підвищити CTR сайту у видачі пошукової системи Google, оскільки такі хлібні крихти виглядають значно привабливіше ніж просто url-адреса сторінки. Пошукова система Яндекс враховує цю розмітку, але використовує власні алгоритми щодо формування хлібних крихт в сніпеті.
Реалізація розмітки
Для зручності сприйняття інформації ми будемо всюди розмічати сторінки сайту https://plitka-ot-zavoda.ru/ . Там все це вже реалізовано, отже ви можете зайти і подивитися як це зроблено, якщо виникнуть питання.
На всіх сторінках сайту магазину, де є хлібні крихти, необхідно впровадити розмітку, виходячи з прикладу для сторінки https://plitka-ot-zavoda.ru/kollektsii-kerama-marazzi/italyanskaya-kollektsiya
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div itemscope itemtype="http://schema.org/BreadcrumbList"> <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://plitka-ot-zavoda.ru/"> <span itemprop="name">Головна</span></a> <met a itemprop="position" content="1"> </div> <div itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://plitka-ot-zavoda.ru/kollektsii-kerama-marazzi/"> <span itemprop="name">КОЛЕКЦІЇ KERAMA MARAZZI</span></a> <met a itemprop="position" content="2"> </div> <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://plitka-ot-zavoda.ru/kollektsii-kerama-marazzi/italyanskaya-kollektsiya"> <span itemprop="name">Італьянська коллекція</span></a> <met a itemprop="position" content="3"> |
Під час перевірки правильності реалізації зміни потрібно скористатися сервісом перевірки розмітки від Google і подивитися чи коректно відображається розмітка на сторінках інтернет-магазину, при правильній реалізації ми повинні побачити схожу картину:
Розмітка картки товару
— Product Ми також можемо розмітити відгуки користувачів, ціну, наявність, зображення, назва товару, валюту та безліч інших елементів. Дана розмітка для інтернет-магазину допоможе істотно поліпшити привабливість сниппета сторінок карток товарів. Пошукова система Google відмінно взаємодіє з розміткою і на більшості сторінок, де вона реалізована і є відгуки, в сніпеті виводиться ця інформація.
Яндекс, в свою чергу, знову ж таки, враховує цю розмітку, але інформацію в сниппет ніколи не виводить. У Яндекса взагалі немає зірочок і ціни в сниппета, так що дана розмітка може вплинути на CTR тільки в пошуковій системі Google.
Реалізація розмітки картки товару
Для всіх карток товарів необхідно розмітити наступні елементи:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div itemscope itemtype="http://schema.org/Product"> <span itemprop="name">Назва товару</span> <span itemprop="image" img src="url-адреса зображення товару" /> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> Рейтинг <span itemprop="ratingValue">4</span>/5 основано на <span itemprop="reviewCount">11</span> оцінках </div> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <span itemprop="priceCurrency" content="UAH">грн.</span> // Валюта <span itemprop="price" content="599">599</span> // Ціна товару <link itemprop="availability" href="http://schema.org/InStock" />В наявності </div> <span itemprop="description">Короткий опис товару</span> <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 itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content = "1"> // Мінімальна оцінка <span itemprop="ratingValue">4</span>/ // Оцінка користувача <span itemprop="bestRating">5</span>звезд. // Максимальна оцінка </div> <span itemprop="description">Текст відгуку</span> </div> </div> |
Звичайно ж, відгуків на сторінці може бути багато, але в прикладі у нас вказана розмітка тільки для одного. Необхідно зробити так, щоб все нові відгуки автоматично позначалися.
У разі успішного впровадження розмітки для картки товару і перевірці через сервіс Structured Data Testing Tool проблем бути не повинно.
Розмітка сторінок категорій — Product
Взагалі розмітки сторінок категорій не існує. Це розмітка для товарів, яка адаптована під категорії, але її результати все одно відображаються в сніпеті. Впровадження цієї розмітки вважається спамом в структурованих даних , використовуйте її на свій страх та ризик.
Варто сказати що навіть якщо на ваш сайт поскаржаться і ви отримаєте лист в Search Console такого змісту:
Санкції за спам в розмітці структурованих даних на ранжування сайту ніяк не вплине, тільки розмітка перестане відображатися в сніпеті. В даному випадку слід прибрати розмітку і відправити запит на перегляд, санкції будуть зняті.
На кожній сторінці категорії, яка містить перелік товарів, ми можемо вказати дані:
- кількість товарів;
- мінімальна вартість;
- максимальна вартість;
- валюта.
Розмітивши ці дані на сторінках каталогу, можна зробити привабливі сніппети в пошуковій системі Google, виглядати вони будуть ось так:
Звичайно ж, дана розмітка буде відображатися далеко не завжди, але реалізувати її все одно варто. Яндекс, як правило, не виводить дану розмітку.
Реалізація розмітки
На кожній сторінці категорії необхідно розмістити цей код. Приклад реалізації зроблений для сторінки https://plitka-ot-zavoda.ru/kollektsii-kerama- marazzi
|
1 2 3 4 5 6 7 8 9 |
<div style="display: none" itemscope itemtype="http://schema.org/Product"> <p itemprop="Name">Колекції KERAMA MARAZZI</p> <div itemtype="http://schema.org/AggregateOffer" itemscope="" itemprop="offers"> <meta content="5138" itemprop="offerCount"> <meta content="10657" itemprop="highPrice"> <meta content="25" itemprop="lowPrice"> <meta content="RUB" itemprop="priceCurrency"> </div> </div> |
Розмістити його можна в будь-якому місці всередині тега body. Перевірити коректність розмітки для сторінок категорій можна за допомогою того ж сервісу:
Розмітка інформації про компанії — LocalBusiness
За допомогою розмітки LocalBusiness ми зможемо вказати пошуковим системам інформацію про компанію: назва, адреса всіх філій, номери телефонів, час роботи, посилання на соціальні мережі. Дана розмітка призначена для того щоб надати повну інформацію про компанію пошуковим систем. Розмітка організації не впливає на сниппет сайту.
У іншому матеріалі ми більш детально розбираємо нюанси впровадження даної розмітки, обов’язково ознайомтеся.
Реалізація розмітки
Шаблон коду размітки организації выглядає наступнм чином:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<script type="application/ld+json">{ "@context": "http://schema.org", "@type": "Тип Организації Компанії", "url": "url головної сторінки сайту", "priceRange": "$", "name": "Назва компанії, коротко про її діяльність", "logo": "посилання на логотип", "image": [ "зображення, яке характеризує діяльність компанії", "зображення, яке характеризує діяльність компанії #2", "зображення, яке характеризує діяльність компанії #3" ], "sameAs": [ "https://www.facebook.com/url", "https://instagram.com/url", "https://www.linkedin.com/url", "https://plus.google.com/url", "https://vk.com/url" ], "currenciesAccepted": "UAH", "paymentAccepted": "cash, credit card", "hasMap": "посилання на компанія на Google Maps", "address": { "@type": "PostalAddress", "@id": "URL з інформацією про головний офіс", "name": "Назва компанії + Топоним", "addressRegion": "Одеська область (Область)", "addressLocality": "Одеса (Місто)", "postalCode": "65000", "streetAddress": "вул Нєвского, 49", "telephone": "+38 063 888 888 8", "email": "odessa@gmail.com.ua", "addressCountry": "UA" }, "contactPoint": [ { "@type": "ContactPoint", "telephone": "+38 063 888 888 9", "contactType": "customer support" }], "openingHoursSpecification": [ { "@type": "OpeningHoursSpecification", "dayOfWeek": [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday" ], "opens": "09:00", "closes": "21:00" }, { "@type": "OpeningHoursSpecification", "dayOfWeek": [ "Saturday", "Sunday" ], "opens": "10:00", "closes": "23:00" } ] } </script> |
Впровадити такий код розмітки потрібно на головній сторінці інтернет-магазину всередину тега head, оскільки це розмітка в форматі Json.
При коректному розміщення в сервісі перевірки розмітки ми побачимо наступне:
Розмітка пошукового рядка — WebSite, SearchAction
Завдяки цій розмітці можна зробити дуже красиву і зручну форму пошуку по сайту, яка, за дотриманням певних умов, буде виводитися у видачі пошукової системи Google. На мою думку, пошуковий рядок буде зображатися якщо: сайт популярний і на нього йде багато вітального трафіку. Тільки в цьому випадку пошуковий рядок може бути корисним користувачам. Виглядає розмітка рядку пошуку ось так:
Реализація размітки
Для того щоб розмітити пошук на сайті потрібно використовувати код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="application/ld+json"> // { "@context": "http://schema.org", "@type": "WebSite", "url": "https://plitka-ot-zavoda.ru/", "potentialAction": { "@type": "SearchAction", "target": "https://plitka-ot-zavoda.ru/index.php?route=product/search&search={query}", "query-input": "required name=query" } } // ]]> </script> |
Звичайно ж, в коді потрібно буде поміняти домен і вказати параметр, за допомогою якого здійснюється пошук на сайті.
Його можна додати в вихідний код кожної сторінки сайту або ж через GTM, використовуючи користувальницький тег HTML. Якщо код впроваджений вірний — ми побачимо наступнє:
Размітка зображень – ImageObject
На кожному інтернет-магазині можна розмітити зображення товарів за допомогою розмітки ImageObject. Таким чином можна вказати пошуковим системам інформацію про розміщені зображеннях, що може поліпшити уявлення сайту в пошуку по картинках .
Якщо реалізувати розмітку ImageObject за допомогою формату Microdata, можна в опис зображень додати ключових слів.
Реалізація розмітки зображень
Для всіх карток товарів необхідно розмітити зображення, виходячи з шаблону:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "image-url", "datePublished": "Дата публікації зображення в форматі РРРР-ММ-ДД", "name": "Title изображения", "description": "Атрибут alt зображення", "width": "Ширина в px", "height": "Висота в px", "author": "Автор, що завантжив зображення" } </script> |
Приклад реализації:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "https://inweb.ua/blog/wp-content/uploads/2016/02/habr-1.png", "datePublished": "2016-03-02", "name": "Семантична размітка", "description": "Картинка про размітку з хабра", "width": "848", "height": "497", "author": "Влад Наумов" } </script> |
