Мікророзмітка: що треба знати про словники та синтаксис | Бізнес Майстерня

Мікророзмітка: що треба знати про словники та синтаксис

Мікророзмітка: що треба знати про словники та синтаксис

словник

Що робити, якщо ваш унікальний, якісний і корисний контент Google зовсім не бачить? І це не з причини ранжування. Пошуковим системам можна і потрібно допомагати - спеціально для цих цілей і існує мікророзмітка. Завдяки їй пошукові роботи швидше і чіткіше знаходять потрібну користувачам інформацію на сторінках сайту, що, в свою чергу, підвищить вас в пошуковій видачі.

Але спочатку розберемося з головним.

Що таке мікророзмітка і як її впроваджувати?

Мікророзмітка - свого роду єдина мова, яку однаково розуміють і трактують пошукові роботи Google, Bing, Yahoo. Про це вони «домовилися» ще в далекому 2011 році. Ця мова складається зі спеціальних тегів (наприклад < div>, < span>) і їх вмісту. За допомогою мікророзмітки можна показати роботам, що певний текст або інші елементи на сторінці важливі і належать до певного типу даних (пошукові роботи ще недосконалі в трактуванні сенсу контенту і розстановці пріоритетів).

Наприклад, на сторінці «Про нас» або «Контакти» компанії варто виділити мікророзміткою блок з контактною інформацією - в такому випадку на запит користувача «контакти компанії N» робот безпомилково покаже потрібну сторінку і потрібні дані.

Інший приклад. Припустимо, ми хочемо, щоб роботи зрозуміли: ця маленька картинка зверху - логотип компанії.

бізмастер

Натисніть правою кнопкою миші на фото і виберіть «Копіювати URL картинки»:

картинка

Для розмітки логотипу слід вказати:

  • словник мікророзмітки
  • тип даних, нашому випадку - "Organization"
  • URL-адресу ресурсу
  • URL-адресу логотипу

Отримуємо фрагмент мікророзмітки для логотипу:


<script type="application/ld+json">
 {
   "@context": "http://schema.org",
   "@type": "Organization",
   "url": "http://www.example.com",
   "logo": "http://www.example.com/images/logo.png"
 }
</script>

Інструмент Structured Data Testing Tool від Google допомагає перевірити правильність оформлення мікророзмітки:

фрагмент

Результат:

результат

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

Якщо сайт великий, SEO-фахівець витрачає достатньо багато часу, визначаючи, які типи сторінок будуть «розмічені», яку саме інформацію слід виділити. Звичайно, для цього слід вивчити основи мови мікророзмітки - словники та синтаксис.

Словники мікророзмітки

Словники мікророзмітки - набори класів, властивостей, які дозволяють вказати на суть вмісту сторінки. Словників дуже багато, розглянемо найпопулярніші.

Як працювати з Schema.org

Schema.org потрібен в першу чергу для формування розширеного сніпета і підвищення релевантності сторінки.

Приклад в результатах пошуку:

приклад

Словник включає різний вміст, властивості і атрибути. Для кожного з них використовується свій тег:

  • itemscope - описує кожен блок окремо, дозволяє описати інформацію на рівні сутності
  • itemtype - вказує тип сутності
  • itemprop - дозволяє вказати додаткові властивості. Наприклад, сутність - театральна подія. В такому випадку можна вказати назву, дату вистави, місце проведення:

<div itemscope="" itemtype="http://schema.org/TheaterEvent">
<span itemprop="name">Viva Штраус</span>
<div itemprop="location" itemscope="" itemtype="http://schema.org/PerformingArtsTheater">
<meta itemprop="name" content="ХАТОБ"/>
<link itemprop="sameAs" href="http://hnatob.com/"/>
<meta itemprop="address" content="Харків, Україна"/>
</div>
    <span itemprop="startDate" content="2016-25-12T19:00">Sun 25 December 2017 19:00</span>
</div>

Детальна документація по Schema.org - на офіційному сайті.

Що таке мікроформати

Мікроформати (microformats.org) - невеликі шаблони HTML, які дозволяють охарактеризувати людей, події, тексти. Мікроформати дозволяють розпізнати сенс окремих фрагментів на сторінці. Особливість від інших словників в тому, що мікроформати об'єднують в собі і словник, і синтаксис мікророзмітки.

Приклад розмітки контактів:


<p class="h-card">
 <img class="u-photo" src="http://one.org/photo1.png" alt="" />
 <a class="p-name u-url" href="http://one.org">Іван Калита</a>
 <a class="u-email" href="mailto:[email protected]>[email protected]</a>, 
 <span class="p-street-address">Ярослава Мудрого, 15</span>
 <span class="p-locality">Харків</span>
 <span class="p-country-name">Україна</span>
</p>

Google здатний визначити більшу кількість мікроформатів:

  • hCard - для розмітки контактів (телефон, адреса, контактні дані)
  • hRecipe - для розмітки кулінарних рецептів, дозволяє вказати інгредієнти, інструкції до приготування, фото, кількість порцій
  • hReview - для розмітки на сторінках відгуків, дозволяє розмічати текст відгуку, оцінку, переваги і недоліки продукту, дату.
  • hProduct і GoodRelations - розмітка товарів на сайті
  • формат розмітки організації і компанії
  • hCalendar - розмітку заходів, дозволяє вказати дату початку і закінчення заходу, місце проведення

Формат для розмітки відео - дозволяє вказати тривалість, назву, опис відеоконтенту, вказати посилання.

У microformats.org для розмітки застосовуються html-теги.

Приклад розмітки:

<div class="vcard">
<img class="photo" src="http://example.com/gagarin.jpg" />
<strong class="fn">Микола Амосов</strong>
<span class="title">Лікар-хірург</span> 
<span class="org">Київський центр серця</span>
<a class="url" href=http://example.com/Амосов>Сторінка М. Амосова</a>
<div class="bday"> 
  <span class="value-title" title="1934-03-09">6 грудня 1913</span>
</div>
<span class="note">Найкращий хірург України</span>
<span class="adr">
  <span class="type">work</span>
  <span class="locality">Київ</span>
  <span class="country-name">Святошин</span>
  <span class="postal-code">468320</span>
</span>
</div>

Як працювати з Open Graph

Open Graph - словник, створений Facebook, щоб кожен сайт міг коректно відображатися в соціальній мережі. Елементами цього словника можна розмітити тільки один об'єкт - людину, продукт або компанію.

Кілька обов'язкових тегів:

  • og: title - назва об'єкта
  • og: type - тип об'єкту. Якщо на сторінці більше одного об'єкта, необхідно обрати головний і вказати його тип. У різних типах можна вказувати різні додаткові властивості
  • og: image - URL зображення
  • og: url - канонічний URL, який буде додаватися в Facebook
майстерня

Також виділяють ряд необов'язкових тегів, які можна використовувати в залежності від контенту на сторінці:

  • og: audio - посилання на аудіофайл, який відноситься до об'єкту опису
  • og: description - короткий опис
  • og: locale - мова і країна, вказується в форматі мова_країна. Значення за замовчуванням - en_US
  • og: locale: alternate - альтернативні мови, на яких є опис об'єкта
  • og: site_name - назва сайту
  • og: video - посилання на відео, яке відноситься до об'єкту опису

Що таке FOAF

FOAF (Friend of a Friend) описує людину і зв'язку між людьми. За допомогою цього словника можна вказати ступінь близькості людей. FOAF використовує пошук блогами і дозволяє максимально докладно описати блоги користувачів.

Що таке Dublin Core

Dublin Core активно використовується в бібліотеках та музейній справі. Дозволяє максимально докладно описати експонати і книги.

Приклад:

<meta name="DC.Title" content="Заголовок веб-сторінки">
<meta name="DC.Creator" content="Назва сайту або им'я творця">
<meta name="DC.Subject" content="Тема">
<meta name="DC.Description" content="Коротки опис">
<meta name="DC.Publisher" content="Творець">
<meta name="DC.Contributor" content="Співзасновник">
<meta name="DC.Date" content="Дата створення">
<meta name="DC.Type" content="Тип">
<meta name="DC.Format" content="Формат">
<meta name="DC.Identifier" content="URL сторінки (ID ресурсу)">
<meta name="DC.Source" content="Джерело">
<meta name="DC.Language" content="Мова">
<meta name="DC.Coverage" content="Геотаргетинг">
<meta name="DC.Rights" content="Авторське право">

Що таке Data Vocabulary

Data Vocabulary раніше активно розроблявся Google, але зараз він повністю об'єднався з Schema.org.

Відома мікророзмітки «хлібні крихти» - це якраз зі словника Data Vocabulary.

Приклад:

<div class="breadcrumbs">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.bizmaster.xyz/" itemprop="url">
<span itemprop="title">Bizmaster</span>
</a>
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.bizmaster.xyz/about/" itemprop="url">
<span itemprop="title">Про нас</span>
</a>
</span>
   </span>
</div>

Навіщо потрібен Good Relations

Good Relations використовується для продуктів в електронній торгівлі. Дозволяє розширено описати каталоги реклами, книги, призначену для користувача електроніку, автомобілі, квитки на концерти, тури, заходи і так далі. Цей словник зустрічається на деяких зарубіжних сайтах (strobelight-shop.com, lux-case.se).

Приклад мікророзмітки:

<div itemscope itemtype="http://purl.org/goodrelations/v1#Individual"
    itemid="#product">
 Weight: <link itemprop="weight" href="#weight">
</div>
<div itemprop="weight" itemscope 
    itemtype="http://purl.org/goodrelations/v1#QuantitativeValue" itemid="#weight">
    <span itemprop="hasValue">50</span> kg
    <meta itemprop="hasUnitOfMeasurement" content="KGM" >
</div>

Синтаксис мікророзмітки

Синтаксис - спосіб використання словника. Він визначає, як будуть вказані елементи словника на сторінці. Знову-таки немає єдиного стандарту синтаксису мікророзмітки.

1. Мікродані (microdata) містять кілька основних елементів:

  • itemscope визначає, що в тезі знаходяться дані опису об'єкта
  • itemtype вказує посиланням на тип об'єкту
  • itemprop визначає властивості об'єкта

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

Наприклад:

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Чохол для Iphone</span>
  <span itemprop="price">500 грн</span>
   <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <img class="aligncenter" src="four-stars.jpg" />
    <meta itemprop="ratingValue" content="4" />
   <meta itemprop="bestRating" content="5" />
На основі <span itemprop="ratingCount">25</span> голосів користувачів
</div>
</div>

2. RDFa і RDFa Lite використовуються рідко через труднощі в реалізації. Можуть описувати будь-яку сутність - людину, об'єкт, подію.

Приклад:

<div vocab="http://schema.org/" typeof="Invoice">
<h1 property="description">January 2015 Visa</h1>
<a property="url" href="http://acmebank.com/invoice.pdf">Invoice PDF</a>
<div property="broker" typeof="BankOrCreditUnion">
<b property="name">ACME Bank</b>
</div>
<span property="accountId">xxxx-xxxx-xxxx-1234</span>
<div property="customer" typeof="Person">
<b property="name">Jane Doe</b>
</div>
<time property="paymentDueDate">2015-01-30</time>
<div property="minimumPaymentDue" typeof="PriceSpecification">
<span property="price">15.00</span>
<span property="priceCurrency">USD</span>
</div>
<div property="totalPaymentDue" typeof="PriceSpecification">
<span property="price">200.00</span>
<span property="priceCurrency">USD</span>
</div>
<meta property="billingPeriod" content="2014-12-21/P30D" />starts:2014-12-21 30 days
<link property="paymentStatus" href="PaymentDue" />
</div>

3. JSON-LD - описують об'єкти на сторінці сайту за допомогою словника пов'язаних даних. Розмітка оформляється у вигляді «ключ - значення». Цей синтаксис визначає простір зарезервованих ключів, які зможуть зв'язати об'єкт і опис в різних комбінаціях.

Приклад:

{
 "name": "Manu Sporny",
 "homepage": "http://manu.sporny.org/",
 "image": "http://manu.sporny.org/images/manu.png"
}

Об'єкт JSON - набір пар «ключ - значення», які вказуються в форматі: { "title": "Конференція", "date": "2014-11-30T12: 00: 00.000Z"}. Імена ключів одного об'єкта не повинні дублюватися.

Типи даних:

  • масив - набір значень, вказується в форматі: [0, 1, 2, 3]
  • рядок - набір символів Unicode, вказується в подвійних лапках: "Вася"
  • число - звичайні числа, але не можна вказувати нуль перед числом: [01]
  • true і false - бінарне значення
  • null - відсутнє значення. Зазвичай використовується для очищення даних

Висновки

Перед впровадженням мікророзмітки слід визначити, який вміст і які типи сторінок варто «розмічати».

Потім потрібно розподілити загальні блоки мікророзмітки. Наприклад, мікророзмітки «хлібних крихт» буде повторюватися від сторінки до сторінки, змінюватися буде тільки рівень вкладеності. А ось контакти організації, швидше за все, будуть размічатися тільки на сторінці «Контакти» або «Про нас».

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

Два базових поняття мікророзмітки - словники та синтаксис. Словники задають мову, яка вказує на суть контенту сторінки, а синтаксис визначає, як будуть вказані елементи словника на сторінці.

Словники мікророзмітки (перші три найпопулярніші):

  • Schema.org
  • мікроформати
  • Open Graph
  • FOAF
  • Dublin Core
  • Data Vocabulary
  • Good Relations

Синтаксиси мікророзмітки:

  • Microdata
  • RDFa і RDFa Lite
  • JSON-LD
Фото: flickr.com
Обробка: Vinci
назад
далі