Як “подружити” сайт з пошуковими роботами за допомогою мікророзмітки?…

Просування інтернет-магазинів – це тема, яка буде актуальна стільки, скільки буде існувати інтернет.
Сьогодні ми торкнемося один з аспектів внутрішньої оптимізації онлайн маркетів – мікророзмітки товарів. Що таке мікророзмітки і з чим її їдять?

Інформація на сторінках сайту часто структурується з урахуванням аналізу зручності користування ресурсом, розміщується візуально найбільш зручним способом. Так вона легко сприймається користувачем, стимулює його до певних дій. Користувач легко визначає зміст сторінки, номера телефонів і адреси. Але для пошукових роботів це просто набір тексту, цифр і картинок, і щоб допомогти їм зрозуміти сенс всього цього контенту – існує мікророзмітки. Мікродані впроваджуються в код сторінки за допомогою HTML5 тегів JavaScript. Саме мікророзмітки допоможе вам зробити внутрішню оптимізацію сайту.

На сьогоднішній день існує кілька стандартів мікроданних, заснованих на принципах створення простих і доступних рішень структурування інформації, і безліч словників, мова про які піде далі. Першим розробником цієї структури був Ян Хіксон, всесвітньо відомий творець веб специфікацій, HTML5 і CSS, нині співробітник GoogleUSA.

Використання мікроданних пошуковими системами

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

Види мікроданних:

1MicroDataIll

OpenGraph – підкорення вершин соціальних мереж

Нагадаємо, що OpenGraph був представлений компанією Facebook в 2010 році як засіб поліпшення інтеграції з іншими веб ресурсами. Цей стандарт дозволяє трансформувати посилання на сторінки веб-сайтів в об’єкти функціональних моделей Facebook, що значно розширило функціонал цього сервісу для користувачів.
Саме дані OpenGraph впливають на те, як інформація сторонніх ресурсів відображається на Facebook, коли користувачі діляться посиланнями. Сама мікророзмітки цього стандарту базується на RDFa протоколі і впроваджується в тег <head> на сторінці вашого сайту, але її функціонал досить обмежений і впливає скоріше не на SEOспеціфіку, а на просування вашого ресурсу в соц. мережах.

Існує кілька обов’язкових параметрів, які повинні бути присутніми для використання цього виду мікроданних:
og: title – Назва вашої сторінки
og: type – Тип об’єкта, відповідно до якого буде інтерпретуватися інформація в соціальних мережах (відео, музика, соціальний профіль, вебсайт, книга, стаття)
og: image – Адреса картинки, обкладинки для вашого сайту або зображення товару
og: url – Адреса вашої веб-сторінки

Також ви можете використовувати додаткові параметри, для картки товару наприклад:
og: audio – Посилання на аудіо файл, наприклад для музичних іграшок.
og: description – Опис веб-сторінки.
og: locale – Локалізація вашої сторінки в форматі язик_ТЕРРІТОРІЯ. За замовчуванням en_US.
og: site_name – Назва вашого сайту, особливо актуально для брендових магазинів.
og: video – Посилання на відео, що ілюструє ваш контент, наприклад огляд товару.

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

<html prefix=”og: http://ogp.me/ns/website#”>
<head>
<title>Louis Vuitton аксесуари в Києві</title>
<meta property=”og:title” content=”Сумка Louis Vuitton” />
<meta property=”og:type” content=”website” />
<meta property=”og:url” content=”http://www.site.com/Louis-Vuitton-Backpack” />
<meta property=”og:image” content=”http://www.site.com/images/Louis-Vuitton-Backpack.jpg” />
<meta property=”og:site_name” content=”LOUISVUITTON Shop” />
<meta property=”og:description” content=”Сумка Louis Vuitton з доставкою по Києву, від 6000 грн., можлива оплата карткою VISA” />
</head>
</html>

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

1MicroDataInfo

 

Schema.org – про все на світі

Schema.org була запущена рік після виходу OpenGraph. Кілька компаній, а саме Google, Bing та Yahoo почали розробку, з метою створення єдиного стандарту структурування даних мікророзмітки на сторінках веб-сайтів. Через півроку до розробки приєднався Yandex. Цей стандарт дозволяє структурувати інформацію про контент веб-сторінок, яка розпізнається більшістю ботів пошукових движків і іншими парсером. Додатковий бонус цього стандарту – можливість створення описів інформації, якої немає на сайті, тобто додавання додаткових параметрів, які будуть впливати виключно на пошукову видачу. Більшість термінів цього виду розмітки базується на більш ранніх стандартах, таких як: Microformats, FOAF, GoodRelations and OpenCyc.

Для позначення властивостей об’єктів в синтаксисі використовується атрибут itemprop, який може бути застосований до будь-якого тегу. Таким чином, ви можете розмітити всі об’єкти на своїй сторінці, картинки, відео, статті – одночасно. І навіть більше, ви можете створювати мета-теги з цим атрибутом для додавання невидимою користувачам інформації. Ваш дизайн залишається зрозумілим і user-friendly, а движок читає дані з мета-тегів.

Самі дані за цим стандартом можуть структуруватися з використанням додаткових властивостей, які виглядають як підкатегорії, або дерево HTML тегів. Так у певного типу об’єктів можуть бути властивості, які теж є об’єктами. Для відображення таких даних використовується атрибут itemscope відразу після визначення itemprop.

Найпопулярнішими типами об’єктів цього стандарту мікроданних є:
Творчі роботи: книга, фільм, рецепт
Вбудовані НЕ текстові об’єкти: аудіо, відео, картинки
подія
організація
персонаж
Місце, Малий бізнес, Ресторан
Продукт, Пропозиція
Відгук, Рейтинг

Більшість сторінок можна структурувати, використовуючи тільки атрибути itemscope, itemtype, і itemprop, але іноді для більш повного відображення інформації потрібні додаткові атрибути. У стандарту schema.org є підтримка атрибутів datetime і href, а також meta тегів з атрибутом content, для доповнення неповної інформації.

Приклад мікророзмітки schema.org для картки все того ж товару:
<div itemscopeitemtype=”http://schema.org/Offer”>
<span itemprop=”name”>Сумка LOUISVUITTON</span>
<span itemprop=”price”>6000</span>
<span itemprop=”priceCurrency”>UAH</span>
<link itemprop=”availability” href=”http://schema.org/InStock”/>Available today!
<meta itemprop=”image” content=”http://www.site.com/images/Louis-Vuitton-Backpack.jpg”/>
<meta itemprop=”availableDeliveryMethod” content=”Курьер”/>
<meta itemprop=”eligibleRegion” content=”Київ, Україна”/>
<div itemprop=”acceptedPaymentMethod” itemscope itemtype=”http://schema.org/CreditCard”>
<span itemprop=”name”>VISA</span>
</div>
</div>

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

RDFa – для тих, хто не любить вибирати

Назва цього стандарту – абревіатура Resource Description Framework, що в перекладі означає фреймворк опису ресурсів. Він був розроблений для читання і розуміння ботами, а не для відображення користувачам і базується на стандарті XML.

Основні сфери застосування RDF:

  • ​Опис характеристик товарів, таких як ціна і наявність
  • Відображення календаря або графіка заходів
  • Опис інформації про веб-сторінках, автора, дату створення і зміни контенту
  • Опис контенту для ранжирування картинок
  • Опис електронних бібліотек

Цей стандарт підтримується більшістю популярних сервісів, включая Google, Microsoft, Yahoo, Yandex і Facebook. За допомогою RDFa можна поєднувати кілька видів розмітки, так як цей стандарт інтегрується з schema.org і Facebook OpenGraph Protocol (OGP).
Синтаксис цього стандарту досить схожий на schema.org – необхідно вказати словник, далі атрибут типу даних typeof і атрибут property, який може містити в своєму значенні параметри OpenGraph з префіксами.

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

<div vocab=http://schema.org/typeof=”Offer”>
<span property=”name”>Сумка LOUISVUITTON</span>
<span property=”price”>6000</span>
<span property=”priceCurrency”>UAH</span>
<link property=”availability” href=”http://schema.org/InStock”/>Available today!
<linkproperty=”image” href=http://www.site.com/images/Louis-Vuitton-Backpack.jpg />
<meta property=”availableDeliveryMethod” content=”Курьер”/>
<meta property=”eligibleRegion” content=”Київ, Україна”/>
<div property=”acceptedPaymentMethod” typeof=”CreditCard”>
<span property=”name”>VISA</span>
</div>
</div>
<span prefix=”ov: http://ogp.me/ns#” ><meta property=”og:description” content=”Сумка Louis Vuitton з доставкою по Києву, від 6000 грн, можлива оплата карткою VISA” />
<meta property=”og:image ” content=”http://www.site.com/images/Louis-Vuitton-Backpack.jpg”/>
</span>

Мы получаем описание товара понятное как для поискового движка, так и для соц. сетей. Конечно, подобная интеграция нескольких словарей актуальнее для объектов, которые могут отдельно описываться в нескольких словарях, например — видео или персонаж. Так как класс товара Offer доступен только для schema.org, описание OpenGraph все равно приходиться внедрять в отдельном блоке. Но при помощи RDFa сделать это можно используя один общий синтаксис. Дополнительным плюсом это стандарта является поддержка всех версий HTML, в то время как microdata поддерживается только в HTML5.

Ми отримуємо опис товару зрозуміле як для пошукового движка, так і для соц. мереж. Звичайно, подібна інтеграція декількох словників актуальніше для об’єктів, які можуть окремо описуватися в декількох словниках, наприклад – відео або персонаж. Так як клас товару Offer доступний тільки для schema.org, опис OpenGraph все одно доводиться впроваджувати в окремому блоці. Але за допомогою RDFa зробити це можна використовуючи один загальний синтаксис. Додатковим плюсом це стандарту була підтримка всіх версій HTML, в той час як microdata підтримується тільки в HTML5.

У наступній нашій статті ми розглянемо інші види мікророзмітки, які можуть бути корисні для структурування інформації на сайті: Doublin Core, Data Vocabulary, FOAF, Мікроформати. Також, ми розглянемо процес тестування коректності мікророзмітки. Слідкуйте за нашим блогом, і буде доданий ще більше інформації по просуванню сайту.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *