Мікророзмітки schema.org - як догодити google і yandex одночасно?

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

Якщо Ви ще не зустрічалися раніше з мікророзмітки і чуєте про це вперше, тоді перед прочитанням даної статті вивчіть наступну:

• Види мікророзмітки сайту

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

У даній статті я хочу показати про те, як на практиці зробити мікророзмітки на своєму сайті, щоб її добре сприйняли і Google і Yandex одночасно. Тому що багато хто стикається з проблемами: для Yandex мікророзмітки нормально проходить валідацію (про це читайте нижче), а ось для Google з`являються помилки, і навпаки. Так це дійсно так. Але завжди можна знайти компроміс!

За допомогою правильної мікророзмітки Schema.org можна дійсно поліпшити індексацію свого сайту пошуковими роботами. Тому що Ви зможете передавати найважливіші дані і вказувати які з статей необхідно проіндексувати ще раз, якщо вони були змінені. Тобто пошуковому роботу інформація подається відразу "на блюдечку". Для цього і була створена мікророзмітки пошуковими системами.

Як перевірити "правильність" мікророзмітки Schema.org?

Для перевірки валідації ( "правильності") мікророзмітки призначені спеціальні сервіси, які були розроблені пошуковими системами. Ми будемо в даній статті перевіряти мікророзмітки для пошукової системи Yandex і Google.

Ось посилання на два сервісу перевірки валідації мікророзмітки Schema.org:

• Валідатор мікророзмітки від Google
• Валідатор мікророзмітки від Yandex

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

Як користуватися валідаторами мікророзмітки?

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

Отже, почнемо з валідатора від Google. Сторінка виглядає наступним чином:

Є два варіанти перевірки валідації сторінки:

1. За допомогою прямої вставки HTML коду
2. За допомогою вставки URL адреси сторінки, яку необхідно перевірити

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

Другий варіант перевірки необхідно використовувати тоді, коли Ви вже внесли мікророзмітки на свій сайт. Це робиться в самому кінці.

Після перевірки в валідаторі Google з`явиться зліва код Вашої HTML сторінки, а праворуч - яка мікророзмітки там присутній і чи є там помилки:

З валідатором Google я думаю все зрозуміло. Перейдемо до валідатора від Yandex.

Коли Ви зайдете на сайт з валідатором мікророзмітки від Yandex, Ви побачите дещо іншу картину, але сенс там залишається той же:

Тут інтерфейс трохи простіше і знову ж таки є два варіанти перевірки Вашого HTML коду: за допомогою вставки вихідного коду сторінки, або за допомогою вставки лише URL необхідної сторінки.

Після того як Ви перевірили свою сторінку на валідність мікророзмітки, Yandex покаже свої помилки трохи в іншому форматі, прямо поруч з мікророзмітки:

Валідатор Yandex і Google будуть давати Вам рекомендації відразу російською мовою. Але і цього буває мало, тому що у всіх помилки різні і залежать від конкретного контексту сторінки і HTML структури.

Де перевіряти свою мікророзмітки Ви зараз знаєте. Тому негайно перейдіть на свій сайт, скопіюйте URL посилання першій же статті і перевірте її на затвердження.

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

Крок 1. Що необхідно розмітити на сторінці?

Словник мікророзмітки Schema.org дуже великий. Тут можна знайти формат розмітки практично будь-якого типу записів. У минулій статті я приводив основний список форматів, які підтримуються дана мікророзмітки: адреси і організації, відео, програми, реферати, зображення, статті, фільми і так далі.

Тому першим кроком необхідно визначитися з основним шаблоном і правильно його підготувати. А у ж потім переносить на реальний сайт.

У даній статті я покажу як зробити приклад для сайту, під керуванням CMS WordPress. А на даній CMS найчастіше створюють блоги. Тому будемо писати розмітку для такого типу сторінок, як "Стаття".

Відео: мікророзмітки відео по schema.org

Далі нам необхідно визначити, яку сутність зі словника ми будемо використовувати. На офіційному ресурсі Schema.org є наступна структура: Article. Але всередині неї є підструктури, які ми можемо використовувати. Спускаючись все глибше по підструктурам я знайшов наступний тип: BlogPosting. Він є приватним варіантом суті Article. І він відмінно підходить для розмітки записів на блогах.

Зараз визначимося зі структурою. Властивостей там дуже багато. Ось скріншот лише невеликої частини з усіх можливих:

Відео: Навіщо потрібна мікророзмітки (Schema.org) - за версією Яндекс

Але, на щастя, не всі властивості є обов`язковими. Це радує. Ось наочний приклад розмітки сторінки:

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

Крок 2. Формуємо шаблон мікророзмітки

Що саме будемо розмічати стало зрозуміло. Залишилося зібрати правильну структуру.

Основна суть мікророзмітки (технічно): додати до необхідних тегам додаткові атрибути. Іноді додати додаткові теги для структури.

Без прелюдій перейдемо відразу до справи. Після численних спроб зробити мікророзмітки Schema.org валидной для Google і Яндекса вийшла наступна структура:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546

lt;div itemscope itemtype="Http://schema.org/BlogPosting"gt;lt;link itemprop="MainEntityOfPage" itemscope href="Посилання на статтю" /gt;lt;div itemprop="Publisher" itemscope itemtype="Https://schema.org/Organization"gt;lt;div itemprop="Logo" itemscope itemtype="Https://schema.org/ImageObject"gt;lt;img alt="Лого SiteHere.ru" itemprop="Image url" src="Http://sitehere.ru/favicons/favicon-160x160.jpg"/gt;lt;meta itemprop="Width" content="160"gt;lt;meta itemprop="Height" content="160"gt;lt;/divgt;lt;meta itemprop="Telephone" content=";"gt;lt;meta itemprop="Address" content="Росія"gt;lt;meta itemprop="Name" content="SiteHere.ru"gt;lt;/divgt;lt;meta itemprop="DatePublished" content="2016-01-24"gt;lt;meta itemprop="DateModified" content="2016-01-24"gt;lt;span itemprop="Author" itemscope itemtype="Http://schema.org/Person"gt;lt;span itemprop="Name"gt; Юрій Німецьlt;/spangt;lt;/spangt;lt;div itemprop="ArticleBody"gt;lt;h1 itemprop="Headline"gt; Темаlt;/h1gt;lt;span itemprop="Image" itemscope itemtype="Https://schema.org/ImageObject"gt;lt;img itemprop="Image url" alt="Опис картинки" width="500" height="280" src="Http://sitehere.ru/images/microrazmetka-schema-org.jpg"/gt;lt;meta itemprop="Width" content="500"gt;lt;meta itemprop="Height" content="280"gt;lt;/spangt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nam tempora doloribus velit dicta iusto alias veritatis inventore, unde eum. Atque voluptatem unde, ipsum autem dolor facere, veniam quas ut.lt;/pgt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nam tempora doloribus velit dicta iusto alias veritatis inventore, unde eum. Atque voluptatem unde, ipsum autem dolor facere, veniam quas ut.lt;/pgt;lt;/divgt;lt;/divgt;

Так виглядає звичайна стаття без сторонніх додатків. Код вийшов дійсно немаленький. Зараз поясню буквально по рядках і розповім де які присутні нюанси:

• Рядок 1: оголошуємо тип контенту, який буде розмічений.
• Рядок 5: тут вказуємо URL адресу сторінки, на якій зараз знаходиться користувач, тобто адреса поточної статті.
• Рядок з 8 по 18: невелика підструктура, в якій має бути вказано більш детально відомості про сайті: логотип (адреса до зображення і його розміри), телефон, адреса і назва компанії (сайту).

• Рядок 9 по 13: ще одна підструктура з виведенням зображення, тобто логотипу. Всі зображення, які необхідні для мікророзмітки необхідно виводити саме в такій структурі, де крім адреси до зображення в meta-тегах ще вказується інформація про його розмірах.
• Рядок 14: вказуємо телефон, якщо він є.
• Рядок 15: реальну адресу, якщо працюєте в офісі, наприклад.
• Рядок 16: тут пишемо назву компанії.

Зараз прошу не лякатися великої опису і самого HTML коду. Я намагався все прокоментувати, щоб Ви бачили з чого складається звичайна стаття і які атрибути необхідно прописати.

Якщо Ви розібралися в структурі мікророзмітки Schema.org для статті, то виконали вже 80% роботи. Залишилося небагато, але ця "трохи" вимагає технічних знань. Тому що зараз необхідно перенести дану структуру на реальну діючу сайт.

Крок 3. Впроваджуємо мікророзмітки Schema.org на реальний сайт

Багато хто використовує різні CMS. Тому одного унікального коду, який би працював відразу на будь-якому сайті. Але у Вас є код мікророзмітки, який вийшов у мене в ході численних пошуків. Вам залишиться поступово впровадити цю розмітку на своєму сайті. І зараз я дам поради, які допоможуть Вам у цьому:

1. Починайте розмітку з основних структур. Тобто для початку розмітьте основну сутність, всередині якої знаходяться всі інші елементи. Тому спочатку необхідно знайти блок, в якому міститься все: зображення, автор, дата і так далі;
2. Далі займіться розміткою блоку "Organization". Тому що він не змінюється динамічно. Його необхідно один раз зробити і помістити всередину суті "BlogPosting". Даний блок потім сховайте за допомогою CSS стилів.
3. Потім необхідно розмітити дату публікації і дату останньої зміни. Зробити це нескладно. У кожній CMS є своя функція, яка відповідає за це. Так як це мета-теги, то приховувати нічого не потрібно. Наприклад в WordPress цей фрагмент мікророзмітки буде виглядати наступним чином:
4. HTML КОД

   1234	lt;meta itemprop="DatePublished" content="Lt;? Php the_time ( `o-m-d`)? Gt;"Gt;lt;meta itemprop="DateModified" content="Lt;? Php the_modified_date ( `o-m-d`) -? Gt;"Gt;

5. Далі відзначте подструктуру "articleBody". Саме в ній Вам необхідно буде вказати заголовок і головне зображення статті.
6. І останнім кроком виправте розмітку головного зображення в статті. Так як це, частіше за все, зробити технічно найскладніше, то залиште даний елемент на кінцівку.

зміст

• Як перевірити "правильність" мікророзмітки Schema.org?
• Як користуватися валідаторами мікророзмітки?
• Крок 1. Що необхідно розмітити на сторінці?
• Крок 2. Формуємо шаблон мікророзмітки
• Крок 3. Впроваджуємо мікророзмітки Schema.org на реальний сайт

висновок

Багато, можливо, почнуть обурюватися, що немає готового рішення, якого всі так чекали. Всі хочуть чарівну таблетку: "скопіював-gt; вставив". Такого не буде, якщо Ви хочете реальних і відчутних результатів. У Вас індивідуальний шаблон, у якого своя власна структура. Тому наберіться терпіння і розберетеся в тому, як влаштована мікророзмітки Schema.org.

Що стосується технічної частини, то скажу ось що: або віддайте цю справу професіоналу, або самостійно розберіться в тому, що я описав в даній статті

Успіхів!