Зміст
Припустимо, ви інвестували у розробку власного сайту. І отримали по-справжньому сучасний продукт, з відмінним дизайном, зручним функціоналом та якісним наповненням. Але очікуваний приплив користувачів так і не стався. Що саме заважає досягненню бажаного успіху? Причин може бути кілька, але найімовірніше ваша сторінка «губиться» в результатах пошуку. Щоб вирішити цю проблему, бажано розібратися, що таке і навіщо потрібна мікророзмітка. Що ж, спробуємо вникнути у цей інструмент та допомогти вам налаштувати його правильно.
Що дає мікророзмітка та в чому її переваги
По суті, за її допомогою програміст «розмічує» сайт та сторінки за рахунок розширення HTML-коду додатковими атрибутами та тегами. Простіше кажучи, завдання мікророзмітки – зробити ваш ресурс привабливішим у пошуковій видачі. З її допомогою ви:
- Отримайте привабливий сніпет – короткий опис сторінки в результатах пошукової видачі;
- Вкажіть роботам пошукових систем на інформацію, яку потрібно обробляти в першу чергу;
- Допоможете роботу визначити зміст сторінки, виділивши контакти, опис продукту, характеристики товару тощо.
Звучить привабливо, чи не так? Але перш ніж реалізувати мікророзмітку, бажано заглибитися особливо цього інструменту.
З чого складається мікророзмітка
Опускаючи складну термінологію, це набір тегів та атрибутів, що вказують на вміст сторінки. Частково, вона вказується для роботів пошукових систем, проте видно і звичайним користувачам. І дозволяє «розширити» результат видачі:
- Зображеннями;
- Рейтингом;
- Відгуками;
- Коротким описом;
- «Хлібними крихтами»;
- Контактною інформацією та ін.
Працює це наступним чином: аналізуючи HTML-код сторінки, боти пошукачів побачать «вказівки», задані за допомогою мікророзмітки та «підтягнуть» цю інформацію в результати видачі, розширюючи сніпет.
Словники мікророзмітки
Щоб розмітити сторінку, доведеться ознайомитися з двома речами – словник і синтаксис. Перший визначає класи та властивості передачі контенту на сторінку пошуку, другий використовується для опису сутностей – об’єктів програмування з властивими лише їм властивостями. При цьому варто відзначити, що на даний момент існує кілька варіантів оформлення мікророзмітки:
Schema.org
Універсальний словник, що підтримується всіма пошуковими системами – Google, Yahoo, Bing та Яндекс. Завдяки відкритому коду постійно допрацьовується «ініціативними» користувачами з усього світу. Відрізняється деревоподібною структурою з тисячею класів для опису різних об’єктів:
- itemtype – тип об’єкту. Працює в парі з Thing, має безліч підтипів – Product, Person, Action та ін.;
- itemscope – вказівка на опис потрібного нам об’єкта у певній ділянці коду сайту;
- itemprop – додаткова інформація. З його допомогою можна розмітити тривалість відеозапису, час початку заходу тощо.
Open Graph
Не менш популярний словник розмітки, орієнтований не лише на пошукові системи. Наприклад, Facebook не приховує, що використовує OG для формування розширених сніпетів. При роботі з ним використовуються наступні теги:
- og:title – заголовок;
- og:description – опис;
- og:image – ілюстрація;
- og:url – посилання;
- og:type – тип об’єкту.
Мікроформати
Microformats.org включає безліч типів об’єктів з описами їх властивостей, проте найчастіше цей словник застосовують для «підтягування» контактних даних організації чи спеціаліста через hCard. З його допомогою можна розмітити:
- Дату народження – bday;
- Ім’я, ініціали – n;
- Адреса – adr;
- Фотографію, зображення – photo;
- Геолокацію – geo и т.д.
Синтаксиси мікророзмітки
Якщо словник містить теги та атрибути, то синтаксисом називають зведення правил щодо їх використання. Найчастіше застосовують:
Microdata
Набув популярності після повсюдного впровадження html5 за рахунок більшої «дружелюбності» до роботів пошукових систем. Використовується виключно всередині HTML-коду, що дозволяє виділити важливі аспекти, на які необхідно звернути увагу в першу чергу.
RDFa
Синтаксис розроблений командою експертів World Wibe Web Consortium для структурування даних на різних сайтах. Розмітка прописується у HTML-коді сторінки. Проте сьогодні їм користуються вкрай рідко через складність у реалізації. Тим не менш, саме на ньому побудовано більшість тегів в OpenGraph (хоча і у спрощеному вигляді).
JSON-LD
З’явився порівняно недавно – у 2010 році, тому вважається “наймолодшим” і “перспективним”. Відрізняється від попередніх тим, що впроваджується над код сторінки, а тег script. Працює за принципом «ключ-значення», що зручно не лише пошуковим роботам, а й безпосередньо для програмістів. У 2013 році JSON-LD отримав повну сумісність зі Schema.org, в 2014 його почали рекомендувати розробники Google. При цьому варто зазначити, що роботу з ним можна спростити за допомогою генератора Schema Markup Generator (JSON-LD).
Реалізація мікророзмітки
З теоретичною частиною закінчили, перейдемо до практики. Щоб не морочитися над штудуванням товстих талмудів і посібників, підемо шляхом найменшого опору, використовуючи словник Schema.org у парі із синтаксисом JSON-LD. У випадку з інтернет-магазинами ця пара дозволяє впровадити ефективну розмітку, вказавши на:
- Найменування категорій;
- Мінімальні та максимальні ціни товару;
- Валюта розрахунку;
- Дані за оцінкою: кількість, максимум, середня кількість;
- Рейтинг категорії тощо.
Якщо все зроблено правильно, сніпет в пошуковій видачі зміниться після чергової індексації. Код розмітки копіюється на кожній сторінці категорії, із зазначенням відповідних змінних. Пункт «Рейтинг» додається лише у випадку, якщо подібне розширення є у вашій CMS, інакше високий ризик потрапляння під фільтри, вийти з-під яких непросто.
У випадку з окремими товарами розмітка дозволяє вказати на:
- Найменування;
- Зображення;
- Опис;
- Вартість;
- Валюту;
- Дані за відгуками: кількість, автори, дата, текст.
Перевірка мікророзмітки
Оскільки розмітка має на увазі роботу з кодом, існує ризик допущення критичних помилок, що відображаються не тільки на просуванні, але і на роботі сайту в цілому. І чим швидше ви знайдете і вирішите проблему, тим менша ймовірність просідання по позиціях у пошуку. Для цього можна використовувати відразу кілька інструментів, але найефективнішим залишається валідатор Google. Працювати з ним вкрай просто: вставляємо посилання або фрагмент коду в рядок, аналізуємо дані зі сформованого звіту, вносимо редагування за рекомендаціями пошуковика.
