Мікророзмітки і структуровані дані: що потрібно знати SEO-фахівця про словниках і синтаксисі

Що таке мікророзмітки і як її впроваджувати?
Словники мікророзмітки
Як працювати з Schema.org?
Що таке мікроформати?
Як працювати з Open Graph?
Що таке FOAF?
Що таке Dublin Core?
Що таке Data Vocabulary?
Навіщо потрібен Good Relations?
синтаксис мікророзмітки
висновки

Що робити, якщо ваш унікальний, якісний і корисний контент в упор не бачить 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 2016 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>

Яндекс розрізняє кілька мікроформатів:

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

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

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"> 9 березня 1934 </ 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 активно використовується в бібліотеках та музейну справу. Дозволяє максимально докладно описати експонати і книги.

приклад:

Що таке Data Vocabulary?

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

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

приклад:

<Div class = "breadcrumbs"> <span itemscope itemtype = "http://data-vocabulary.org/Breadcrumb"> <a href="http://netpeak.ua/" itemprop="url"> <span itemprop = "title"> Netpeak </ span> </a> <span itemprop = "child" itemscope itemtype = "http://data-vocabulary.org/Breadcrumb"> <a href = "http://netpeak.ua / 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 lazy" 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 - відсутнє значення. Зазвичай використовується для очищення даних.

висновки

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

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

Приклад впровадження «хлібних крихт» - в кейсі .

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

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

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