Вебмайстер
Яндекс для вебмайстрів
Як Яндекс індексує сайти
Сайт на сторінці результатів пошуку
Сервіс «Яндекс.Вебмайстер»
Налаштування індексування
Вміст сайту
Сайт у результатах пошуку
Безпека сайтів
Сервіси Яндекса на вашому сайті

Вступ до schema.org

Примітка. 

Цей документ є перекладом оригінального посібника http://schema.org/docs/gs.html з невеликими доповненнями.

Будь-який вебмайстер добре знайомий з HTML-розміткою. Зазвичай HTML-теги вказують браузеру, як відображати інформацію, що міститься в тегу. Наприклад, тег <h1>Аватар</h1> означає, що рядок «Аватар» слід відображати у форматі заголовка першого рівня. Проте HTML-тег не надає жодної інформації про змістове значення цих рядків: «Аватар» може стосуватися відомого 3D-фільму або зображення у профілі користувача. Це ускладнює пошуковим системам задачу знаходження інформації, адекватної запиту користувача.

Schema.org надає загальнодоступний словник, за допомогою якого вебмайстри можуть розмічати сторінки так, щоб вони були зрозумілі найпоширенішим пошуковим системам: Яндексу, Google, Bing i Yahoo!.

Словник schema.org застосовується разом із мікроданими (формат microdata). Хоча довгострокова мета полягає в розширенні переліку форматів семантичної розмітки, що підтримуються, з самого початку використовуються саме мікродані. Цей посібник ознайомить вас із мікроданими та schema.org, і ви відразу ж зможете додавати розмітку на сторінки своїх сайтів.

      1. Як розмічати контент за допомогою мікроданих

            a. Для чого потрібні мікродані

            b. itemscope та itemtype

            c. itemprop

            d. Вкладені сутності

      2. Як використовувати словник schema.org

            a. Типи та властивості schema.org

            b. Очікувані типи, текст і URL

            c. Тестування розмітки

      3. Додатково: машинопрочитувана версія інформації

            a. Дати, час і тривалість

            b. Перерахування та посилання на канонічні сторінки

            c. Інформація, якої бракує або яка неявна

            d. Розширення schema.org

1. Як розмічати контент за допомогою мікроданих

1a. Для чого потрібні мікродані

Зміст сторінок вашого сайту зрозумілий людям, що їх читають, проте пошуковим системам важко визначити, про що йдеться. Додаючи спеціальні теги до HTML-коду своїх сторінок, ви наче говорите: «Гей, пошукова системо, ось тут описується оцей фільм (місце, людина, відеоролик)». Тим самим ви допомагаєте пошуковим системам та іншим програмам краще розуміти ваш контент і відображати його відповідним, корисним чином. Мікродані — набір тегів, що з'явився в HTML5,— дозволяють робити саме так.

1b. itemscope и itemtype

Почнемо з конкретного прикладу. Уявимо, що в нас є сторінка про фільм «Аватар» — з посиланням на трейлер, інформацією про режисера тощо. HTML-код може виглядати приблизно так:

       <div> <h1>Аватар</h1> <span>Режисер: Джеймс Камерон (народ. 16 серпня 1954 р.)</span> <span>Фантастика</span> <a href="../movies/avatar-theatrical-trailer.html">Трейлер</a> </div> 
   

У першу чергу необхідно зазначити, яка частина сторінки присвячена безпосередньо фільму «Аватар». Для цього додамо атрибут itemscope до HTML-тегу, в якому міститься ця інформація:

       <div itemscope> <h1>Аватар</h1> <span>Режисер: Джеймс Камерон (народ. 16 серпня 1954 р.) </span> <span>Фантастика</span> <a href="../movies/avatar-theatrical-trailer.html">Трейлер</a> </div> 
   

Додаючи itemscope, ми тим самим позначаємо, що HTML-код, який міститься в блоці <div>...</div>, описує деяку сутність.

Поки ми лише оголосили, що йдеться про якусь сутність, але не повідомили, що це за сутність. Щоб зазначити тип сутності, додамо атрибут itemtype відразу після itemscope.

       <div itemscope itemtype="http://schema.org/Movie"> <h1>Аватар</h1> <span>Режисер: Джеймс Камерон (народ. 16 серпня 1954 р.)</span> <span>Фантастика</span> <a href="../movies/avatar-theatrical-trailer.html">Трейлер</a> </div> 
   

Тим самим ми уточнюємо, що сутність, опис якої міститься в тегу <div>, являє собою фільм (тип Movie в ієрархії типів schema.org). Назви типів мають вигляд URL, у нашому випадку http://schema.org/Movie.

1c. itemprop

Яку додаткову інформацію про фільм «Аватар» можно надати пошуковим системам? Про фільм можна повідомити багато цікавих відомостей: акторський склад, режисер, рейтинг. Щоб відмітити властивості сутності, використовується атрибут itemprop. Наприклад, щоб зазначити режисера фільму, додамо атрибут itemprop="director" до HTML-тегу, що містить ім'я режисера. (Повний список властивостей, які можна задати для фільму, наведено на сторінці http://schema.org/Movie.)

       <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Аватар</h1> <span>Режисер: <spanitemprop="director">Джеймс Камерон</span> (народ. 16 серпня 1954 р.)</span> <span itemprop="genre">Фантастика</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Трейлер</a> </div> 
   

Зверніть увагу, що ми додали додатковий тег <span>...</span>, щоб прив'язати атрибут itemprop до відповідного тексту на сторінці. Тег <span> не впливає на відображення сторінки в браузері, тому його зручно використовувати разом із itemprop.

Тепер пошукові системи зможуть зрозуміти не лише те, що http://www.avatarmovie.com — це посилання, але й те, що це посилання на трейлер фантастичного фільму «Аватар» режисера Джеймса Камерона.

1d. Вкладені сутності

Іноді саме значення властивості може бути сутністю, з власним набором властивостей. Наприклад, режисер фільму може бути описаний як сутність з типом Person, у якої є властивості name (ім'я) та birthDate (дата народження). Щоб указати, що значення властивості являє собою сутність, необхідно додати атрибут itemscope відразу після відповідного 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">16 серпня 1954 р.</span>) </div> <span itemprop="genre">Фантастика</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer"> Трейлер</a> </div> 
   

2. Як використовувати словник schema.org

2a. Типи та властивості schema.org

Крім типів Movie та Person, що згадувалися в розділі 1, schema.org описує безліч різноманітних типів сутностей, для кожного з яких визначено набір властивостей.

Найбільш узагальнений тип сутності — це Thing (щось), у якого є чотири властивості: name (назва), description (опис), url (посилання) та image (зображення). Спеціалізованіші, окремі типи мають спільні властивості з більш універсальними. Наприклад, Place (місце) — окремий випадок Thing, а LocalBusiness (місцева фірма) — приватний випадок Place. Окремі типи наслідують властивості батьківського типу. (Більше того, тип LocalBusiness є і окремим випадком Place, і окремим випадком Organization, тому наслідує властивості обох батьківських типів).

Ось список деяких популярних типів сутностей:

Дивіться також повний список типів сутностей на одній сторінці.

2b. Очікувані типи, текст і URL

Розмічаючи сторінки за допомогою schema.org, дотримуйтеся таких рекомендацій:

  • Чим більше, тим краще — за винятком прихованого тексту. Чим більше контенту ви розмітите, тим краще. Проте, як правило, слід розмічати лише контент, який видно відвідувачам сайту, але не зміст прихованих тегів <div> та інших прихованих елементів сторінки.

  • Очікувані типи або текст. Переглядаючи типи schema.org, ви помічаєте, що в багатьох властивостей є так звані очікувані типи. Це означає, що значення властивості може бути вкладеною сутністю (див. розділ 1d). Проте додавати вкладену сутність не обов'язково: прийнятно використовувати просто текст або URL.

    Також замість очікуваного типу можна використовувати дочірній тип. Наприклад, якщо для властивості зазначено очікуваний тип Place, можна додати вкладену сутність із типом LocalBusiness.

  • Використання властивості url. Одні сторінки присвячено опису лише однієї сутності. Наприклад, персональна сторінка конкретної людини, яку можна розмітити, використовуючи тип сутності Person. Інші — цілому ряду сутностей. Наприклад, на сайті вашої компанії є список співробітників, із посиланнями на профіль кожного з них. Для таких агрегуючих сторінок потрібно розмітити окремо кожну сутність (у цьому випадку вийде послідовність сутностей з типом Person) і додати властивість url у посилання на відповідну сторінку для кожної сутності, наприклад:

               <div itemscope itemtype="http://schema.org/Person"> <a href="alice.html" itemprop="url">Еліс Джонс</a> </div> <div itemscope itemtype="http://schema.org/Person"> <a href="bob.html" itemprop="url">Боб Сміт</a> </div> 
           

2c. Тестування розмітки

Подібно до того, як браузер необхідний для перевірки змін у верстці веб-сторінки, а компілятор — для тестування коду, розмітку schema.org також слід тестувати. В інтернеті є кілька інструментів, за допомогою яких можна перевірити коректність розмітки та виявити помилки: Валідатор мікророзмітки від Яндекса, Rich Snippets Testing Tool від Google, Structured Data Linter.

3. Додатково: машинопрочитувана версія інформації

Багато сторінок можна розмістити, використовуючи лише атрибути itemscope, itemtype та itemprop (описані в розділі 1) разом із типами та властивостями schema.org (описаними в розділі 2).

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

  • Дати, час і тривалість: використовуйте тег <time> з атрибутом datetime

  • Перерахування та посилання на канонічні сторінки: використовуйте тег <link> з атрибутом href

  • Інформація, якої бракує або яка неявна: використовуйте тег <meta> з атрибутом content

3a. Дати, час і тривалість: використовуйте тег <time> з атрибутом datetime

Не завжди роботам вдається правильно зрозуміти дату та час. Наприклад, «04/01/11» — це 11 січня 2004 р., 4 січня 2011 р. або 1 квітня 2011 р.? Щоб однозначно задати дату, використовуйте тег <time> разом з атрибутом datetime. Значення атрибута datetime — дата у форматі YYYY-MM-DD. Наступний HTML-код точно визначає дату як 1 квітня 2011 р.:

      <time datetime="2011-04-01">04/01/11</time>
   

Час доби задається у форматі hh:mm або hh:mm:ss, з префіксом T. Час може бути зазначено разом із датою:

      <time datetime="2011-05-08T19:30">8 травня, 19:30</time>
   

Розглянемо приклад у контексті: HTML-код з інформацією про концерт, який відбудеться 8 травня 2011 р. Розмітка типу Event містить назву події, опис і дату.

       <div itemscope itemtype="http://schema.org/Event"> <div itemprop="name">Spinal Tap</div> <span itemprop="description">Один з найгучніших музичних гуртів усіх часів возз'єднається для незабутнього дводенного шоу.</span> Концерт відбудеться <time itemprop="startDate" datetime="2011-05-08T19:30">8 травня о 19:30</time> </div> 
   

Тривалість описується аналогічним чином, за допомогою тегу <time> та атрибута datetime. Значенню атрибута передує префікс P (від англ. period). Наприклад, зазначити в рецепті, що час приготування становить півтори години, можна таким чином:

      <time itemprop="cookTime" datetime="PT1H30M">1 ½ години</time>
   

H позначає кількість годин, а M — кількість хвилин.

Формати дати, часу та тривалості відповідають стандарту ISO 8601.

3b. Перерахування та посилання на канонічні сторінки: використовуйте тег <link> з атрибутом href

Перерахування

Деякі властивості мають обмежений набір можливих значень. Програмісти називають їх перерахуваннями. Наприклад, інтернет-магазин може використовувати тип сутності Offer для докладного опису товарної пропозиції. Властивість availability (наявність) зазвичай має одне з кількох можливих значень: In stock (у наявності), Out of stock (відсутній), Pre-order (на замовлення) тощо. Значення властивостей, що перераховуються, можна зазначати у вигляді URL, аналогічно типам сутностей schema.org.

Ось товарна пропозиція, розмічена як сутність типу Offer, із відповідними властивостями:

       <div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name">Blend-O-Matic</span> <span itemprop="price">$19.95</span> <span itemprop="availability">Вже у продажу!</span> </div> 
   

А ось та ж пропозиція, розмічена з використанням <link> і href, що дозволяє однозначно зазначити одне з допустимих значень власивості availability:

       <div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name">Blend-O-Matic</span> <span itemprop="price">$19.95</span> <link itemprop="availability" href="http://schema.org/InStock"/>Вже у продажу! </div> 

Schema.org надає список можливих значень для невеликої кількості властивостей — у тих випадках, коли у властивості є обмежений набір типових значень. Так, можливі значення для властивотсі availability перераховано в ItemAvailability.

Посилання на канонічні сторінки

Зазвичайно посилання створюються за допомогою тегу <a>. Наприклад, таке гіперпосилання на сторінку у Вікіпедії для книги «Над прірвою у житі»:

       <div itemscope itemtype="http://schema.org/Book"> <span itemprop="name">Над прірвою у житі</span> Автор <span itemprop="author">Джером Селінджер</a> <aitemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye"> Сторінка у Вікіпедії</a> </div> 
   

Як бачите, атрибут itemprop="url" можна використовувати для посилання на сторінку іншого сайту (в цьому випадку Вікіпедії), яка описує ту ж саму сутність. Посилання на сторонні сайти допомагають пошуковим системам краще розуміти, про що йдеться на вашій сторінці.

Якщо ви не бажаєте додавати посилання, яке видно відвідувачам, використовуйте тег <link>, як показано нижче:

       <div itemscope itemtype="http://schema.org/Book"> <span itemprop="name">Над прірвою у житі</span> <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye"/> Автор <span itemprop="author">Джером Селінджер</span> </div> 
   

3c. Інформація, якої бракує або яка неявна: використовуйте тег <meta> з атрибутом content

Іноді важлива інформація не може бути розмічена через спосіб її відображення на сторінці. Наприклад, інформація подана на малюнку (зображення рейтингу 4 зірки з 5) або у Flash-об'єкті (наприклад, тривалість відеоролика), або вона припускається, але не зазначена на сторінці в явному вигляді (наприклад, валюта ціни).

У таких випадках можна використовувати тег <meta> з атрибутом content. У наступному прикладі забраження ілюструє рейтинг 4 зірки з 5:

       <div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name">Blend-O-Matic</span> <span itemprop="price">$19.95</span> <img src="four-stars.jpg" /> 25 оцінок </div> 
   

А ось той же приклад з розміченою інформацією про рейтинг:

       <div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name">Blend-O-Matic</span> <span itemprop="price">$19.95</span> <div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating"> <img src="four-stars.jpg" /><meta itemprop="ratingValue" content="4" /><meta itemprop="bestRating" content="5" /> <span itemprop="ratingCount">25</span> оцінок </div> </div> 
   

Цим прийомом не слід зловживати. Використовуйте тег <meta> з атрибутом content лише для тієї інформації, яку неможливо розмітити іншим способом.

3d. Розширення schema.org

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

Примітка. 

Джерело: http://schema.org/docs/gs.html

© Google, Inc., Yahoo, Inc., Microsoft Corporation. 2011.

Текст доступний за ліцензією Creative Commons Attribution-ShareAlike License (version 3.0).

Оцініть статтю
Дякуємо за ваш відгук!