Як використовувати мікророзмітку Schema.org: посібник для чайників

535

Ви знаєте, що таке schema.org, але ніяк не можете впровадити її на свій сайт? Ви прочитали купу статей по темі, але жодна з них не дала вам чіткого керівництва до дії? І начебто все зрозуміло, але коди все-одно не працюють?

Як використовувати мікророзмітку Schema.org: посібник для чайників

Якщо ви залишали подібні коментарі і взагалі вищеописана ситуація – це про вас, не турбуйтеся. Ми допоможемо вам розібратися. У даному матеріалі ми не будемо посилати вас на сайт schema.org зі словами «Там все докладно написано, читайте». Замість цього ми постараємося в максимально доступній формі і з наочними прикладами) пояснити вам, як використовувати цю горезвісну мікророзмітку і який код куди потрібно вписувати.

Що таке Schema.org?

Досить докладно про те, що таке микроразметка Schema.org ми писали в одній з наших минулих статей. А якщо коротко, то Schema.org – це словник семантичної розмітки даних, підтримуваний всіма провідними пошуковими системами. Її мета – допомагати пошуковим роботам краще розуміти зміст сторінки і, тим самим, покращувати результати видачі.

На даний момент Schema.org офіційно підтримується такими пошуковими системами, як Google, Yandex, Bing і Yahoo! При цьому, Google відкрито говорить, що даний вид розмітки є для нього найкращим.

Куди потрібно вписувати?

Ну а тепер давайте розбиратися, які коди й куди потрібно вписувати. Звернемося до конкретного прикладу. Ось так виглядає микроразметка, що описує фільм «Аватар»:

Як використовувати мікророзмітку Schema.org: посібник для чайників

Тут ми бачимо три атрибута, і ви їх повинні будете незмінно використовувати в кожній своїй микроразметке:

  • itemscope потрібен тільки для того, щоб показати пошуковому боту, що на сторінці описується певний об’єкт.
  • itemtype завжди йде поруч з itemscope і потрібен для того, щоб показати пошуковому боту тип об’єкта (в даному випадку, це Movie). Повний список об’єктів можна переглянути за посиланням.
  • Як використовувати мікророзмітку Schema.org: посібник для чайників
  • itemprop – описує властивості вибраного об’єкта. В даному випадку це: назву фільму (name), режисер (director), жанр (genre) і наявність трейлера (trailer). Всі доступні властивості перераховані на сайті schema.org у відповідному розділі:
  • Як використовувати мікророзмітку Schema.org: посібник для чайників

    Примітка. Вищенаведений скріншот був зроблений на сайті ruschema.org – проект перекладу schema.org, розвивається силами добровольців. На даний момент переведений не весь сайт. Взяти участь у перекладі може будь-який бажаючий.

    Крім цих трьох атрибутів в коді присутні ще і теги. Розглянемо на іншому прикладі, тип об’єкта – Person (Осіб):

    Як використовувати мікророзмітку Schema.org: посібник для чайників

  • Теги

    показують, де починається і закінчується опис об’єкта.

  • Теги полягають ті властивості об’єкта, які можна описати словами.
  • Тег з атрибутом href потрібні для перерахувань і посилань на канонічні сторінки. Посилання, поставлені таким чином, не видно користувачам.
  • Теги … з атрибутом datetime використовуються для зазначення дати, часу та тривалості. Дату і час необхідно вказувати в наступних форматах: YYYY-MM-DD (2014-05-26), Тһһ:mm (Т10:25) або Тһһ:mm:ss (Т02:40:15). При цьому, їх можна вказувати одночасно:
  • Як використовувати мікророзмітку Schema.org: посібник для чайників
  • Теги … використовуються для вказівки посилань, видних для користувачів.
  • Тег (на зображенні не використовується) приховує інформацію від користувачів. Даний тег не рекомендується використовувати занадто часто – Google це не схвалює.
  • Як це зробити на практиці?

    Заходимо на ruschema.org в розділ «Схеми». Вибираємо потрібний об’єкт. Припустимо, Book (Книга). Дивимося, які властивості ми хочемо вказати. І починаємо збирати код.

    У вас повинно вийти приблизно наступне:

    Як використовувати мікророзмітку Schema.org: посібник для чайників

    Перевірити правильність проставлення мікророзмітки можна в спеціальних сервісах Google і від Yandex.

    Кілька прикладів фрагментів і кодів

    Для полегшення вашої задачі ми перерахуємо кілька прикладів фрагментів і готових кодів до них. Вам залишається тільки вписати свою інформацію:

    • Відео
    Як використовувати мікророзмітку Schema.org: посібник для чайників

    Video: Назва відео

    «Посилання на сам відеофайл — http://www.example.com/video123.flv»

    – HTML-код відео. Береться з відеохостингу:

    Як використовувати мікророзмітку Schema.org: посібник для чайників

    Опис відео

    • Рецепт
    Як використовувати мікророзмітку Schema.org: посібник для чайників

    Назва рецепта

    Беремо банани, знімаємо з них шкірку. Перемелюємо в блендері і додаємо туди борошно»

    ,

    May 8, 2009

    Як використовувати мікророзмітку Schema.org: посібник для чайників

    Опис рецепта

    1 hour

    3 банана

    1 яйце

    Стакан цукру

    • Організація
    Як використовувати мікророзмітку Schema.org: посібник для чайників

    Назва організації

    Вулиця,

    Місто,

    Область.

    Як використовувати мікророзмітку Schema.org: посібник для чайників

    Phone: Номер телефону – 206-555-1234

    Важлива інформація

    Якщо ви використовуєте авторство Google, і в пошуку вже відображається ваша фотографія, не використовуйте мікророзмітку Schema.org, оскільки авторство після цього може порушитися.

    Приклад 1. При описі видеообъекта (videoObject), фотографія автора повністю замінюється на скріншот з відео (thumbnail), а інформація про автора переміщається в самий низ фрагменту. У деяких випадках, авторство видаляється повністю.

    Як використовувати мікророзмітку Schema.org: посібник для чайників

    Приклад 2. При описі об’єкта відгук (review), відбувається те ж саме – фото автора зникає і з’являється інформація про те, кому належить цей відгук (огляд).

    Як використовувати мікророзмітку Schema.org: посібник для чайників

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

    Адаптація матеріалу Schema-org Guide for Beginners (Everyone Can Understand!) + Schema Cheatsheet і Structured Data: Why you should mark-up for higher CTR.