Використання мікророзмітки schema.org

  1. Як зробити мікророзмітки і куди прописати необхідні атрибути
  2. В які теги полягає мікророзмітки
  3. Ще один приклад використання мікророзмітки
SEO

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

У попередній статті ми коротко розповіли, що таке мікророзмітки, і для чого вона може використовуватися. У цій статті ми від теорії перейдемо до більш наочним моментам і покажемо, як мікророзмітки впроваджується в сайт, і що це дає в підсумку. Для прикладу ми візьмемо словник семантичної розмітки http://schema.org як найбільш популярний і офіційно підтримуваний всіма основними пошуковими системами. До речі, існує російськомовна версія словника ( http://ruschema.org ), Що розробляється ентузіастами. Чи не така повна, як оригінал, але уваги гідна.

Як зробити мікророзмітки і куди прописати необхідні атрибути

Тепер безпосередньо до справи. Про те, куди прописуються дані, на які буде звертати увагу пошукова машина. Для початку - три атрибута, яке повинні бути використані абсолютно завжди:

  • itemscope вказує пошуковому боту на те, що на сторінці присутній об'єкт, на який варто звернути увагу;
  • itemtype знаходиться після itemscope і описує, до якого типу належить згаданий об'єкт. Перелік можливих об'єктів можна побачити у відповідному розділі словника (http://schema.org/docs/full.html);
  • Itemprop, який описує властивості даного об'єкта.

Знову звернімося до прикладів самого Яндекса. Перед нами шматок коду, що описує фільм «Аватар».

Як бачимо, атрибут itemscope з'являється в тезі <div>, де і полягає інформація про фільм. Відразу за ним з'являється itemtype, що відсилає до об'єкта Movie ( http://schema.org/Movie ). Атрибути itemprop прописуються, в даному випадку, усередині тегів <span> і <a>.

Іноді значення itemprop саме може означати окрему сутність, в такому випадку атрибут itemscope буде знаходитися всередині вже одного існуючого. Це робиться вживанням itemscope відразу після itemprop. наприклад:

Як бачимо, у внутрішньому тезі <div> знаходяться дані про режисера фільму, які можна уявити як тип об'єкта Person. Отже, такі дані про людину, як ім'я або дата народження будуть ставитися саме до Person, а не до «материнському» об'єкту Movie, так як знаходяться всередині відповідного блоку <div>.

В які теги полягає мікророзмітки

Як ви могли помітити, тег <div> завжди використовується для вказівки початку і кінця опису об'єкта. Крім нього можливе використання за ключовими словами:

<span> - в нього полягають властивості об'єкта, які можна описати словами. Вживання цього тега дуже зручно, так як в нього можна зробити висновок будь-яку інформацію, при цьому не змінивши візуально сайт, отже його найкраще вводити, якщо потрібно додати атрибут itemprop;

Тег <a> використовується для посилань, які видно користувачам. Якщо всередині тега <a> укласти url, який посилається на сторонній сайт, то пошуковій машині буде легше зрозуміти, що саме за інформація знаходиться у вас на сторінці. Наприклад, можна дати посилання на статтю у Вікіпедії: Інший спосіб вказати пошуковій системі на посилання - це вживання тега <link> з атрибутом href: Різниця його від тега <a> полягає в тому, що посилання не побачать відвідай
ки сайту.

Крім того, використання тега <link> корисно для так званих перерахувань, тобто властивостей, які мають обмежену кількість значень. Наприклад, інтернет-магазин за допомогою мікророзмітки може вказати на наявність товару на складі. Можливі значення в цьому випадку, відповідно до schema.org: in stock (в наявності), out of stock (немає в наявності), pre-order (на замовлення). За допомогою тега <link> цю інформацію можна оформити наступним чином:

Якби ми не вказували на значення InStock, то передостання сходинка могла виглядати так:

<Span itemprop = »availability»> Вже в продажу! </ Span>

Але, розширивши функції мікророзмітки, в цьому випадку ми тег <span> замінили на <link>, перетворивши його в невидиму посилання.

Аналогічним чином можна використовувати і тег <meta>, який залишається поза увагою користувача, але з огляду на негативне ставлення пошукових систем до занадто частому його застосування, ми рекомендуємо їм не зловживати.

Час або тривалість описується тегом <time> з атрибутом datetime. Наприклад, на скріншоті нижче, час початку концерту описується значенням startDate:

Ще один приклад використання мікророзмітки

У висновку наведемо приклад використання мікророзмітки на сайті, на якому ви зараз перебуваєте, а також ефекту, який ця мікророзмітки дає. Мова йде про атрибут AggregateRating для об'єкта типу Article, тобто для статті. Під кожною статтею розміщений віджет рейтингу статті, в коді якого присутній «невидимий» тег <div> з наступними атрибутами:

<Div style = "display: none;" itemprop = »aggregateRating» itemscope itemtype = »http://schema.org/AggregateRating»>

Завдяки йому рейтинг статті можна побачити у видачі Гугла. Крім того, дата публікації в сніпеті видачі - це теж заслуга мікророзмітки.

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