Що таке мікророзмітки
Мікророзмітки - стандарт семантичної оптимізації сайтів. Він був представлений компаніями Google, Bing і Yahoo влітку в 2011 році. Восени того ж року стало відомо про підтримку стандарту пошуковою системою Яндекс. Мікророзмітки дозволяє роботам точніше визначати і структурувати інформацію на сторінках сайтів.
Мікророзмітки виконується додаванням в HTML-код спеціальних тегів атрибутів, в яких розміщується надається додаткова інформація.
Розрізняють такі види мікророзмітки:
- мікроформати;
- мікродані;
- RDFа.
Користь від мікророзмітки
В першу чергу присутність мікроформатів або мікроданних на сторінці відбивається на сніпеті (описі), який супроводжує посилання на сайт в пошуковій видачі. Сніппет містить більш повний опис сторінки, основні розділи сайту, ціновий діапазон товарів, фотографії адреси, номери телефонів і так далі. Крім того вона вказує пошуковим роботам інформацію, яку слід обробляти. Це дозволяє домогтися поліпшеної релевантності сторінки для пошукових роботів і користувачів.
Як мікророзмітки впровадити?
З досвіду наших сайтів з портфоліо найчастіше використовується мікророзмітки за форматом Schema.org або JSON + LD
У цій статті ми детально розглянемо мікророзмітки Schema
Що таке Schema.org?
Schema.org - це сайт, на якому публікуються схеми мікророзмітки, які розпізнаються найбільшими пошуковими системами світу, включаючи «Яндекс» і Google. Схеми є теги і атрибути HTML-коду. З їх допомогою пошукові системи розпізнають значення і структуру інформації, опублікованої на сайті. Це підвищує якість пошуку і покращує результати видачі.
Що потрібно прописувати при мікророзмітки?
Існує 3 основних атрибуту, кожен з який обов'язково бере участь при описі будь-якого елементу:
itemscope потрібен тільки для того, щоб показати пошуковому боту, що на сторінці описується певний об'єкт.
itemtype завжди йде поряд з itemscope і потрібен для того, щоб показати пошуковому боту тип об'єкта
itemprop - описує властивості обраного об'єкта.
Основні принципи розмітки
- Огортання опису типу в контейнер з подальшим зазначенням схеми розмітки.
- Розмітка окремих властивостей із зазначенням на кожне конкретне властивість схеми.
Розберемо мікророзмітки Schema.org на прикладі коду, який використовувався в OkayCMS
<Div itemscope = "" itemtype = "http://schema.org/Product">
<Span itemprop = "name"> Назва товару </ span>
<Span itemprop = "sku"> Артикул </ span>
<Img itemprop = "image" src = "картінка_товара.jpg">
<! - Перший варіант виведення ціни ->
<Div itemprop = "offers" itemscope = "" itemtype = "http://schema.org/Offer">
<Span itemprop = "price" content = "55.00"> $ 55.00 </ span>
<Meta itemprop = "priceCurrency" content = "USD">
<Link itemprop = "availability" href = "http://schema.org/InStock"> В наявності
</ Div>
<! - Другий варіант виведення ціни ->
<Div itemprop = "offers" itemscope = "" itemtype = "http://schema.org/Offer">
<Span itemprop = "price" content = "55.00"> 55.00 </ span>
<Span itemprop = "priceCurrency" content = "RUB"> руб. </ Span>
<Link itemprop = "availability" href = "http://schema.org/InStock"> В наявності
</ Div>
<Span itemprop = "description"> Опис товару </ span>
</ Div>
Це базовий код, якого достатньо для того, що б виконати мікророзмітки товару вашого магазину.
Як бачите, завжди існує контейнер, який включає в себе кілька різних типів сутностей.
У нашому випадку найголовніший контейнер, це <div itemscope = "" itemtype = "http://schema.org/Product"> всередині нього буде міститися вся наша мікророзмітки.
Далі ми стикається ще з одним контейнером:
<Div itemprop = "offers" itemscope = "" itemtype = "http://schema.org/Offer">
Він показує роботу що всередині нього йтимуть дані для конкретної розмітки товарної пропозиції.
Важливо! Слід пам'ятати, що деякі елементи мікророзмітки є обов'язковими, тому якщо ви не заповнюєте інформацію про товар повністю, це може привести до помилок мікророзмітки.
Найбільш частою проблемою є відсутність опису товару, в результаті чого валідатор видаватиме помилку в мікророзмітки.
Приклад сніпетів з мікророзмітки товару можна споглядати нижче:
Як зробити мікророзмітки хлібних крихт?
Якщо при пошуку сайту ви бачите ось такі посилання (російською мовою а не реальний url)
Значить хлібні крихти сайту розмічені вірно, і це дозволяє роботові сформувати більш красивий сниппет.
Приклад коду мікророзмітки хлібних крихт на реальному товар:
<Li itemscope = "" itemtype = "http://data-vocabulary.org/Breadcrumb"> <a itemprop="url" href="/" data-language="252"> <Span itemprop = "title"> Головна </ span> </a> </ Li> <Li itemscope = "" itemtype = "http://data-vocabulary.org/Breadcrumb"> <a itemprop="url" href="catalog/templates"> <Span itemprop = "title"> Шаблони </ span> </a> </ Li> <Li itemscope = "" itemtype = "http://data-vocabulary.org/Breadcrumb"> <a itemprop="url" href="catalog/drugoe"> <Span itemprop = "title"> Інша </ span> </a> </ Li> <Li> Шаблон для OkayCMS Carol </ li>
Ось так виглядає мікророзмітки у нас, на прикладі реального товару. Важливо! Останній пункт хлібних крихт не повинен бути посиланням сам на себе, це погано впливає на SEO і створює циклічні посилання сторінки.
І останнє, що ми сьогодні розберемо, це мікророзмітки контаков по schema.org
Код мікророзмітки контактів може виглядати приблизно ось так
<Div itemprop = "address" itemscope = "" itemtype = "http://schema.org/PostalAddress">
Адреса:
<Span itemprop = "streetAddress"> вулиця енотовіча, 33 </ span>
<Span itemprop = "postalCode"> 100500 </ span>
<Span itemprop = "addressLocality"> Дніпро </ span>,
</ Div>
Телефон: <span itemprop = "telephone"> + 8 066 99 99 999 </ span>,
Факс: <span itemprop = "faxNumber"> + 8 097 99 99 999 </ span>,
Електронна пошта: <span itemprop = "email"> [email protected] </ span>
<! - Перший варіант ->
<Time itemprop = "openingHours" datetime = "Tu-Th 16: 00-20: 00"> По вівторках і четвергах з 4 до 8 вечора </ time>
<! - Другий варіант ->
<Meta itemprop = "openingHours" content = "Mo-Sa 10: 00-20: 00"> Пн-Сб з 10:00 до 20:00.
</ Div>
А тепер те, що обов'язково буде потрібно вам при проведенні робіт по впровадженню мікророзмітки - сервіси.
Сервіси для роботи з мікророзмітки
- 1. Structured Data Testing Tool . Особливість сервісу полягає в тому, що можна на прикладах побачити, як виконується мікророзмітки.
- 2. Розділи "Структуровані дані" і "Маркер" в Search Console від Google , які дозволять налаштувати мікророзмітки
- 3. Валідатор мікророзмітки від "Яндекс"
- 4. Яндекс.Довідник . Додайте інформацію про свою організацію і в результатах пошуку "Яндекс" буде показуватися адреса, телефон і графік роботи
висновок:
Мікророзмітки може допомогти роботу сформувати більш привабливий сниппет.
Мікророзмітки може вплинути на висновок тексту, який передається в сниппет.
Мікророзмітки може показати наскільки новим і актуальним є контент вашого сайту.
Впроваджуйте мікророзмітки на сайт, при її наявності ви будете мати більше шансів сформувати гарний висновок інформації з вашого сайту в пошуковій системі.