![налаштування Schema.org карти](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbJy50cU6x41j7TVy_ilDWtY1lcYFgdpJ6OUN6gwOwJdZvMk2DOgiDyJii3G3DYuCIB_KXtdohmcOf1l4uwcz1hDP7FA1ejhwY4YusPb_HpxQLO7iTjv3CTizxBTsmMEg1d8J151Sq8G0/s0/452-1-karty.jpg)
Розповідаємо про словники і синтаксис мікророзмітки, зібрали кілька плагінів та інструментів для створення і перевірки розмітки, розібрали по кроках один з плагінів. Розповідаємо про те, навіщо потрібна розмітка Schema.org, що вона з себе представляє і як її створювати без знання коду.
Навіщо потрібна мікророзмітка
Schema.org - стандарт семантичної розмітки даних, який допомагає пошуковим системам краще розуміти дані, представлені на сайті. Наприклад, за допомогою розмітки можна явно вказати пошуковим роботам, що на сторінці site.ua/product_page1 знаходиться товар, і передати основні параметри: назву, ціну, артикул, виробника і т.д. На основі цих даних пошуковики формують розширені сніппети та блоки відповідей в пошуковій видачі.
Крім Schema.org є інші види мікророзміток. У них різні призначення, тому коротко наведемо властивості основних видів, щоб не плутати:
- Open Graph. Мікророзмітка Facebook, використовується для настройки правильного відображення публікації в соцмережах під час репосту статті з вашого сайту (заголовок, опис, правильна картинка). Спочатку розмітка була створена для Facebook, зараз підтримується і іншими соцмережами і мессенджерами (Твіттер, Телеграм і т.д.).
- Мікроформати. Розробка W3C, створений в 2007 році. Підходить для розмітки товарів, відгуків, контактної інформації та інших видів контенту. Раніше використовувався більш активно, зараз має ряд недоліків, недостатньо швидко розвивається і поступається Schema.org.
- Dublin Core. Цей словник розмітки використовують бібліотеки і музеї - дозволяє описувати книги і музейні експонати.
Різниця між словником і синтаксисом
Словник - це набір класів і властивостей, які описують тип вмісту сторінки і передають ключову інформацію. Словник можна порівняти з мовою - наприклад, англійською. Schema.org, Open Graph, Dublin Core - все це словники.
Синтаксис - це спосіб вказівки сутностей і властивостей словника в html-коді сторінок сайтів. Якщо словник - це англійська мова, то синтаксис можна порівняти з латиницею.
Варіанти синтаксису, які застосовуються для розмітки Schema.org:
- мікродані;
- мікроформати;
- RDFa;
- JSON-LD.
Детальніше про те, який синтаксис краще, поговоримо трохи пізніше.
Чим відрізняються сайти з розміткою і без неї
Сайти з реалізованою мікророзміткою видно по сніпетах на сторінці пошукової видачі. Ось приклад: у видачі два сниппета з одного і того ж сайту, перший - з мікророзміткою, другий - без неї.
А так виглядає сніппет сторінки з афішею кінофільмів, якщо на сторінці є мікророзмітка:
За допомогою мікророзмітки в сніппетах сторінок товарів відображаються ціни:
І ще один приклад: в першому сніпеті реалізована мікророзмітка хлібних крихт, а в другому такої розмітки немає:
Тут - види розширених результатів пошуку в Google (відображаються для сайтів з реалізованою мікророзміткою).
Що кажуть пошуковики
Google радить вебмайстрам і оптимізаторам впроваджувати мікророзмітку. Основна мотивація: впровадження мікророзмітки покращує сніпет візуально, а також підвищує якість пошуку (пошукові роботи при скануванні краще розуміють вміст сайту, на сторінках якого реалізована семантична розмітка даних).
Чим ще корисна мікророзмітка
Мікророзмітка вигідно виділяє ваш сніпет в пошуковій видачі на тлі конкурентів (якщо у них розмітки немає або реалізовано менше фіч). Навіть якщо ви показалися у видачі нижче конкурентів, ви можете отримати стільки ж кліків, а то і більше: ваш сніпет займає більше місця, містить більше корисної інформації для користувача.
І тут спрацьовує такий ланцюжок: привабливий сніпет → більше користувачів клацають і переходять на сайт → поліпшуються поведінкові чинники → ви ранжуєтесь краще і піднімаєтеся у видачі.
Також мікророзмітку використовують власні сервіси пошукових систем - наприклад, сторінка з реалізованою розміткою може потрапити в чаклунчики на пошуковій видачі (при цьому сам сайт не обов'язково повинен бути в ТОПі видачі).
Словник Schema.org
Словник мікророзмітки складається з сутностей (наприклад, ВВП) і властивостей, які описують параметри сутності (SKU, ціна, наявність і т.д.).
Весь список сутностей і документація - на офіційному сайті schema.org.
На скріншоті - частина сутностей (зліва) і властивостей сутності Thing (в правій частині скріншота)
Розповідати про всі сутності не будемо, наведемо приклади найпопулярніших:
- Product - сутність, яка використовується для розмітки будь-якого товару або послуги. Наприклад, пара кросівок, квиток на концерт, оренда автомобіля і т.д. У сутності цього типу є багато властивостей, які дозволяють передати більше інформації про товар/послугу: назву, рейтинг, бренд, колір, категорію, ширину, висоту, вагу, SKU і т.д.
- Event (подія). Сутність для опису подій, що відбуваються в певний час і в певному місці: концерт, лекція, фестиваль і т.д. Також в Schema.org є більш специфічні типи сутностей Event для різних видів подій. Наприклад, бізнес події (BusinessEvent), фестиваль (Festival), спортивна подія (SportsEvent).
- Recipe - для розмітки рецептів. За допомогою властивостей сутності можна розмітити час приготування, калорійність, перелік інгредієнтів, покрокову інструкцію.
- Review (відгуки). Властивості сутності - рейтинг і «тіло» відгуку.
Оптимальний синтаксис
Ми вже згадували про те, що для Schema.org підходять чотири види синтаксису:
- RDFa;
- мікроформати;
- мікродані;
- JSON-LD.
Перші три мають ряд недоліків і втрачають популярність, а останній (JSON-LD) - використовується все частіше.
Google рекомендує використовувати саме JSON-LD - він більш простий і компактний, на відміну від RDFa, мікроформатів і інших синтаксисів.
JSON-LD
Тепер про деталі. Поговоримо про те, як виглядає синтаксис і які правила в ньому діють.
JSON-LD в базовому вигляді виглядає так:
<script type="application/ld+json">
{
//тут містяться елементи
}
</script>
Ця конструкція - свого роду каркас, який завжди є за замовчуванням (як теги <html>, <head> і <body> в структурі будь-якої html-сторінки). Усередині каркаса розміщується безпосередньо код мікророзмітки, який містить необхідні дані: сутність, властивості і їх значення.
Ось як виглядає розмітка
<script type="application/ld+json">
{
"@context": "https://schema.org/", //тут вказується словник розмітки — Schema.org
"@type": "Product", //оголошується сутність - товар
"name": "iPhone", // властивість - назва товару
"image": "https://site.ua/iphone10.png", // URL зображення товару
"description": "iPhone 10", // опис
"brand": "Apple", // бренд-виробник
"aggregateRating": { //рейтинг товару
"@type": "AggregateRating",
"ratingValue": "5", //середня оцінка
"ratingCount": "56" //кількість користувацьких оцінок
}
}
</script>
Зверніть увагу! Наявність мікророзмітки не гарантує того, що в пошуку буде виводитися розширений сніпет з усіма даними, зазначеними в розмітці. Проте, пошукові роботи все одно будуть враховувати передані дані і зможуть краще розуміти вміст сторінки.
Як робити розмітку JSON-LD
Ручна розмітка в JSON-LD (та й в будь-якому іншому синтаксисі) - рутинне завдання, забирає багато часу і завжди залишається ризик припуститися помилки. Спростити завдання можна за допомогою генераторів JSON-LD, ось кілька популярних:
technicalseo.com - простий генератор, в якому можна розмітити найбільш часто використовувані сутності (Стаття, Хлібні крихти, Подія, FAQ-сторінка, Товар і т.д.). Виберіть потрібну сутність зі списку і вкажіть потрібні значення властивостей.
schemaapp.com - просунутий інструмент для професіоналів (платний, є 14-денний пробний період). Підтримує всі сутності Schema.org.
![мікророзмітка схема орг генератор](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvK6HWZ0gaYvNruy3q4_BWDwAo5EmBH8_RHiiLM2A0ue9aQf1PreOx0-htooyy_eyODvdeXEbBbpOawpBFrzMJ0bfpNYBZ3xh7slVRHcLOobY8dQUxEyuGH-mzXu2XP0_V-Z-mAHwfbX0/s0/452-8-generator.png)
hallanalysis.com - простий і безкоштовний сервіс. На момент написання статті в ньому можна створити розмітку для шести сутностей.
Перевірка валідності розмітки
При створенні мікророзмітки важливо, щоб синтаксис був правильним і без помилок. Навіть якщо ви генеруєте JSON-LD за допомогою спеціальних плагінів або сервісів, не поспішайте завантажувати код на сайт, спочатку перевірте його на валідність.
Для перевірки коду використовуйте валідатор Structured Data Testing Tool від Google;
Куди вставляти JSON-LD?
Якщо код валідний (валідатор не знайшов помилок) - можете сміливо додавати розмітку на сайт. Для цього код потрібно вставити між тегами <head> і </head> на цільовій сторінці.
Мікродані
У мікроданних використовується мова розмітки HTML (в JSON-LD - JavaScript). Працювати з цим синтаксисом складніше - код розмітки потрібно прописувати в тілі контенту.
В основі мікроданних - три атрибута:
- itemscope - вказує, що в блоці (<div>...</div>) задається елемент (сутність);
- itemtype - вказує на тип сутності;
- itemprop - позначає властивості сутності.
Ось як це виглядає:
<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Джокер</h1>
<div itemprop="director" itemscope itemtype="http://schema.org/Person">Режисер:
<span itemprop="name">Тодд Філіпс</span>
(род. <span itemprop="birthDate"> 20 грудня 1970 р.</span>)
</div>
<span itemprop="genre">Наукова фантастика</span>
<a href="../movies/interstellar-2-trailer.html" itemprop="trailer">Трейлер</a>
</div>
Прописувати такий код вручну - досить трудомістка і рутинна робота.
Сервіси для генерації мікроданних
Хороша новина в тому, що для мікроданних також існують спеціальні сервіси-генератори:
webcode.tools - безкоштовний генератор, для розмітки доступно 14 сутностей. У сервісі також можна створювати розмітку в синтаксисі JSON-LD;
htmlstrip.com (підтримує 3 сутності: Місцевий бізнес, Персона, Вебсайт);
Local Business Schema Generator - вузькоспрямований генератор. З його допомогою можна згенерувати розмітку в форматі мікроданних або JSON-LD для однієї сутності - Місцевий бізнес.
Згенеруйте код і перевірте його на наявність помилок (тими ж сервісами).
Впроваджуємо мікророзмітку самостійно і без знання коду
Покажемо вам простий спосіб, як швидко і без єдиної строчки коду підключити мікророзмітку.
Автоматична розмітка сторінок за допомогою Маркера даних
Google розробив спеціальний інструмент для максимально простого впровадження мікророзмітки - Маркер даних.
Які переваги надає інструмент:
- не потрібно писати код або користуватися генераторами, не потрібно перевіряти валідність розмітки;
- ви розмічаєте одну сторінку, а Google автоматично реалізує розмітку для всіх сторінок сайту цього типу (наприклад, для всіх товарів).
Як користуватися
Переходимо в Маркер даних і вибираємо підтверджений ресурс;
Вказуємо URL типової сторінки сайту. Наприклад, для інтернет-магазину - вкажіть адресу сторінки товару. Якщо у вас блог або інформаційний портал - вкажіть адресу сторінки зі статтею. Система визначить сторінки схожого типу і об'єднає їх в групу. Ваше завдання - проставити розмітку для однієї сторінки, для інших вона проставиться автоматично.
Вибираємо тип інформації і натискаємо «Почати виділення».
В інтерфейсі інструменту завантажиться сторінка сайту. В області «Мої елементи даних» у правій частині екрану буде показаний список властивостей, які доступні для обраного типу сутності. Також тут вказується, які з доступних властивостей є обов'язковими. Виділіть елемент сторінки (наприклад, назва товару або заголовок статті) і виберіть потрібну властивість у спливаючому меню.
![мікророзмітка мікроформати маркер](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzhP0STPbmn-UEHC0mlxn-udtxSE_UEYhBt6Bcme4soT0XWwKguoPZjYdqCnKr1JgbDO_YW5lO8rJTPVn6iazJ4GgMmAT-Xn7n5dx0jjX8ZHIhxh_Z4VpIaA1_K4sVTbl-tiQwPBsjqdA/s0/452-16-marker.jpeg)
Подібним чином розмітьте усі обов'язкові і додаткові елементи. Потім натисніть «Готово». У спливаючому вікні інструмент запропонує вибрати групу схожих сторінок, підібраних системою, або створити свою групу. Виберіть потрібний варіант і натисніть «Створити групу сторінок».
![для чого потріба мікророзмітка сторінки](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz31_WBTwA2c93kLPBqFl9ufUVIihHUH8B7hQvqLQWfcmQkq3-qIF6znP4o3ap0JjBjQRtmc_iG86yktdvBXldThf9YRRPZ6T2huwq_7xDKq4b54eVm738_8PwImy6SjwbExhkx3CjEts/s0/452-17-storinky.jpg)
На наступному кроці система запропонує перевірити коректність розмітки інших сторінок. Якщо схожих сторінок багато - система покаже кілька зразків сторінок. Перевірте розмітку і виправте помилки, якщо якісь елементи система розмістила невірно. Потім опублікуйте мікророзмітку.
![мікророзмітка сторінок сайту перевірка](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOr2W2F4cw1QHpnsYIIMcSPgI5dNFIYUpDQ0jNm6RMmtQS3-sYMd9RbvU5esuGaNIx_iZh1Wa0h5Qh7OPe7-ZVnYlHuYv3Z1bvfCA5W_vICcl3XBPB_K95Rh-QWbCFpr3qiLufRjj8-TI/s0/452-18-perevirka.png)
Роботи Google просканують сторінки сайту і врахують задану мікророзмітку.
Як змінити або прибрати мікророзмітку
Відкрийте Search Console і перейдіть в розділ «Маркер». Виберіть групу сторінок, які ви додавали при розмітці. Відредагуйте їх або видаліть групу повністю.
![валідатор мікророзмітки Google Search Console зміна](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH6QtqZr96wM3wlS043haGpWlmuePhVbZH-WXluFwp2iJWq2iWSE5m27UQHjynnJ2Y8mUOiEt1CStmCkDHgtYdFQj0TEQjXg-DnyUhgjGJu3TtjQ3fgPHbnrwxsobejovvZQUTs0RRmq8/s0/452-19-zmina.png)
Коли робот Google знову просканує сторінки сайту, розмітка перестане враховуватися і в пошуковій видачі будуть відображатися звичайні сніппети.
Сайт на CMS? використовуйте плагіни
Розглянемо найпопулярнішу CMS - Вордпресс. Для Вордпресс є кілька рішень, які допоможуть просто і швидко впровадити мікророзмітку. Ось огляд плагінів, потрібних для цього завдання:
Schema - All In One Schema Rich Snippets. Безкоштовний плагін, розмічає дані в форматі мікроданних. Плагін підійде для розмітки товарів, відгуків, кулінарних рецептів, подій і ще декількох часто використовуваних видів контенту.
![мікророзмітка Вордпресс плагін](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibgu7lgplOFrPJZOwB4G1CJjO_MEEJPTQci8YW41Ploo6kzwf1E0P3i9RXVIr4PsboxPKUp857KBsHl7lfUZhb4v07L9sHT5RrIcmEx46X8ItvxPf9a0r2BTc85awPutdq56l2Q2WdpN8/s0/452-20-plagin.png)
WP SEO Structured Data Schema. Цей плагін також реалізує розмітку на основі синтаксису мікроданних. У плагіна є дві версії. У безкоштовної можна розмітити дані про організацію та локальний бізнес, товари, послуги, статті, відео, коментарі та ще кілька типів контенту. У платній версії - більше можливостей (коштує платна версія 49$).
![плагіни для мікророзмітки схема](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRdP2lFayvFH17VHWutzk0m298LvleZjioQ6AXLoO0fz9ZVayHfe2XKO4JX3uqoymgaZNlz-ttfN8xoToh3wfQitX2gld1ufUSmjNBN0n5w4kMtsaow3A-RTygpXpllzCzOcha5c8Vqag/s0/452-21-schema.png)
Schema. За допомогою плагіна можна зробити розмітку в синтаксисі JSON-LD. У плагіна є безкоштовна і платна версії (від 99 $). Функціонал безкоштовної дещо урізаний - доступна розмітка для статей, блогу, хлібних крихт, хедера і футера сайту, відео і ще кілька елементів. Для розмітки товарів, послуг і інших сутностей Schema.org доведеться купувати платну версію.
![розмітка в синтаксисі JSON-LD схема](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyVe5fR6FfSout7a80dSNLlmEGXGSAp0Jv3tmHfS_SkP0ip3iykTx7PIq606Ie-xhRWhpy67KvCIZc3DRzM1SEF6A-38LZbr8DYsp7IKtqBVJQo7m8WYDzW0ZMA7moE9WW259QCyvIEI8/s0/452-22-schema.png)
Schema & Structured Data for WP & AMP.. Просунутий плагін для розмітки Schema.org за допомогою синтаксису JSON-LD. В плагіні можна використовувати 33 сутності Schema. Доступний у двох версіях: безкоштовна і Pro (від 49$).
![плагін для розмітки Schema.org плагін](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8FuglovToPoLpJWEFgv1_yKOvN1NMcb4jnQlAStUHy6NqV_aD0mfiPMhqmFRqvqCle3Jm5uBRvTwKnP1WHmhTL-tlus_TbipAw0QSdqA1POPR8u_jWKXighRqqCMIKygpDhDZ74M0Mhg/s0/452-23-plagin.png)
Налаштування мікророзмітки в плагіні Schema: покрокова інструкція
Встановіть плагін і клацніть по розділу Schema, який з'явиться в бічному меню адмінпанелі. Перейдіть в розділ Settings → General. Виберіть тип сайту і завантажте логотип.
![покрокова інструкція налаштування мікророзмітки логотип](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYyt_QjmH7ZZ4mWI0681jZjhS2MuUPRwHyZbJSSrFGiE2Bvt_uEssgDMgTRvGP1iHBPIjpRz6M7VIdpoLM1EVQlU0k3Prr64KbHuml9RYl2YSJKfWewPKOaQIn8R7BGxN27y31w60pqUg/s0/452-24-plagin.png)
Збережіть зміни і перейдіть на другу вкладку - Knowledge Graph. Тут вам потрібно вказати, кого представляє сайт - виберіть Person, якщо це особистий сайт, або Organization (якщо просуваєте сайт компанії).
![сео просування сайту сайт](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVvHvVTvZmIhKXnqNp3CqxkwirHJrzfpL64G0_ZRhneaYJURAWekPA18ggkfQCYXD0cgnz0g82rqJQeAu_ptkS3Ut44RZcF3MbYURrtAP0VRMyKimnQpYX7iuFVkA-y5VBsAp_6N3EVF4/s0/452-25-knowlege.jpg)
Перейдіть на вкладку Schemas. Виберіть з випадаючих списків сторінки «Про себе» і «Контакти». Якщо хочете підключити розмітку хедера і футера, хлібних крихт і інших елементів сторінок сайту - поставте галочки навпроти відповідних параметрів.
![сканування сайту пошуковими роботами Schemas](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdQAVL0SM8VnFEigDUi_GFpL23t0xyTmA29nen_Cp7EE_w6Ks7Ha1_k4W1vrSwIJIoBfA6IJFosJE4lu_GKpBPjiajHws1duM2oK1VllOwF0HgiPsz3eYSDD8WQxbyGVji3AznhqI-K4/s0/452-26-schemaplugin.png)
Також можна налаштувати автоматичне видалення мікророзмітки, якщо буде видалений плагін Schema. Для цього перейдіть на вкладку Advanced і поставте галочку навпроти «Delete Data on Uninstall».
![код мікророзмітки в форматі JSON-LD Advanced](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg408tVDpze4nnJ4NHCtQL1sYXPSENbvvYxTZwKRe4k3Ro1fsK5qj1DheQcGj3xh3FddfCnV_E-JoBZF10DEp4E8PLMRSbXgHfbzmFTYoS_WyYKYcByugYrlsKhdh0kNKaJrER-UN1QLg/s0/452-27-advanced.png)
Збережіть зміни. Перевірте вихідний код сторінок сайту - в розділі <head>...</head> з'явиться код мікророзмітки в форматі JSON-LD.
Спробуйте перевірити розмітку в валідаторі Google (про всяк випадок). Плагін працює коректно, тому помилок не повинно бути - сміливо завантажуйте код на сайт.
![перевірити розмітку в валідаторі Google валідація](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhia56GmBjtOK_PYmMPw2AQGGYlmxyFcd40_2anJtiICQwj2sePIgMnlCvOOoZTRoG0obEc6jS8NKnH9IkzQxixuooTbfa1DTlcoGioCpVnHzsXhFSFiDacZKb9jEjydEEYbI5CqCdqJnk/s0/452-28-validation.png)
Приблизно так само будується робота з іншими плагінами для Вордпресс. Головна перевага - вам не потрібно розбиратися в синтаксисі і прописувати всі параметри вручну.
Коротко про головне
- Schema.org - великий словник, за допомогою якого можна описати дані будь-якого типу і передати пошуковим роботам детальну інформацію про продукти, послуги та інші сутності.
- Мікророзмітка покращує зовнішній вигляд сніпета в пошуковій видачі. Сніппет виглядає привабливо і інформативно → зростає CTR.
- Якщо просувається тільки в Google - скористайтеся рекомендацією пошуковика і розмічайте дані в JSON-LD.
- У Google можна і простіше. Маркер даних в Search Console допоможе реалізувати розмітку в кілька кліків (без коду, плагінів або сторонніх сервісів).
- Не пишіть код вручну - використовуйте генератори. Це заощадить купу часу і вбереже від помилок.
- Перевіряйте помилки за допомогою валідаторів.
Якщо у вас сайт на Вордпресс - поставте плагіни для мікророзмітки і використовуйте їх. Якщо сайт на інший CMS - пошукайте аналоги, скоріше за все вони є і вам не потрібно буде прописувати мікророзмітки вручну.
Обробка: Vinci