Не тільки Яндексу. Микроразметка на найбільших сайтах рунета: навіщо нею користуються і чому вона стане в нагоді і вам

Ми вже розповіли вам про світ семантичної розмітки — про те, які бувають словники, чому стільки стандартів синтаксису, а також розібрали, продукти, в яких вона використовується.

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



Люди, які відповідають за розробку та всю технічну частину таких сайтів, як Holodilnik.uk, Lenta.uk, Interfax.uk і Ivi.uk, відповіли на питання про те, як на практиці відбувається впровадження мікророзмітки і яких результатів вона дозволяє досягти. А ми, зі свого боку, розповіли, які типи ми б порекомендували таким сайтам і для чого.

Інтернет-магазини

Денис Єгоров, керівник напрямку інтернет-маркетингу Holodilnik.uk:
На сайті holodilnik.ru ми вирішили впровадити одразу два типу розмітки, Open Graph і Schema.org/Product. Причина такого вибору проста — один з цих типів підтримує пошуковик на «Я», а другий — пошуковик на «G»:) Впроваджувати її було досить легко, і про свій вибір нам не довелося пошкодувати.



Звичайно, багато хто зараз задаються питанням, яка ефективність того чи іншого впровадження, в тому числі і яка ефективність впровадження мироразметки — на все потрібні ресурси, які потім повинні себе виправдати. Питання це, дійсно, цікавий. На момент впровадження ми вважали мікророзмітку необхідним поліпшенням, і у нас не було мети безпосередньо відслідковувати її ефективність. Однак за рік, що минув з моменту її впровадження, ми отримали наступне: глибина перегляду відвідувачів з пошукових систем зросла майже в 2 рази, при цьому показник відмов знизився в 3-4 рази. Кількість досягнення мети зросла на 20-30%. Погодьтеся, це непоганий показник. І хоча, звичайно, ми не пов'язуємо весь цей ріст тільки з впровадженням однієї лише мікророзмітки, значна частка зміни цих показників, безумовно, її заслуга.


Типовий сайт Інтернет-магазину складається з сторінок з товарами, каталогом, контактами та інформацією про доставку. Розмітивши сторінки з товарами і контактами, можна поліпшити своє подання в пошукових системах.

Для сторінок з товарами Schema.org існує великий тип Schema.org/Product, за допомогою якого можна описати практично будь-яку річ. Завдяки такій розмітці в Яндексі формуються структуровані фрагменти з описом товару і ціною.



Для формування таких фрагментів потрібні зазначені поля name, description, price і priceCurrency:

<section itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name"> масажер Beurer MG 81 </h1>
<span itemprop="description"> Масажер Beurer MG81 - це сучасний, елегантний і багатофункціональний прилад. Великі масажні головки ергономічної форми виконують глибокий вібраційний (ударний) масаж на будь-якій ділянці тіла. Додатково пацієнт ділянку тіла можна прогріти інфрачервоним нагрівальним елементом. Також можливо підключити 2 різні масажні насадки. Вібромасажер з інфрачервоним випромінювачем може проводити масаж з різною інтенсивністю. Ви можете проводити масаж і самостійно, і з допомогою іншої людини. Довгий шнур дозволяє проводити сеанс масажу в зручному місці, незалежно від розташування розетки. Також у масажера зручна і не змінна ручка для простого і надійного застосування.</span>
<span itemprop="пропонує" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="RUB" />
<span itemprop="price" >3320</span>
<span class="b-price__sign">руб.</span>
</span>
</section>

Великий вплив на рішення про покупку надають відгуки. Якщо у вас є відгуки, ми рекомендуємо додати спеціальну розмітку: Product для цього є властивість AggregateRating, а в микроформатах є тип hReview.

У Google на основі розмітки формуються спеціальні фрагменти.



Для цього необхідно вказати значення поля AggregateRating:

<div itemscope itemtype="http://schema.org/Product">
<div itemprop="пропонує" itemscope itemtype="http://schema.org/Offer">
<h1 itemprop="name" content="Смартфон Apple iPhone 6 4.7" 16Gb Space Gray</h1>
<span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<meta itemprop="ratingValue" content="4,3" />
<meta itemprop="ratingCount" content="15" />
<meta itemprop="bestRating" content="5" />
</span>
</div>
</div>

Для сторінки з контактами підходить розмітка Organization від Schema.org або мікроформати hCard. C їх допомогою можна брати участь в партнерській програмі Яндекса: потрапити в довідник і поліпшити відповіді не тільки в пошуку, але і на Яндекс.Картах.



При використанні мікроформати необхідно вказати назву організації, адресу та телефон:

<div class="TabbedPanelsContentGroup vcard">
<span class="fn org">Онлайн-мегамаркет OZON.ua</span>: рік за роком
<p>Офіс в Москві</p>
<div class="adr">
<p> 
<span class="postal-code">125252</span>
<abbr class="country name" title="Росія"></abbr>
<abbr class="region" title="Московська Область"></abbr>, р.
<span class="locality">Москва</span>,
<span class="street address">Чапаєвської провулок, д. 14</span>
</p>
</div>
<span class="url" title="http://www.ozon.ua"></span>
<abbr class="tel" title="+74955102727"></abbr>
<span class="geo">
<span class="latitude">
<span class="value-title" title="55.798362"></span>
</span>
<span class="longitude">
<span class="value-title" title="37.517774"></span>
</span>
</span>
</div>

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



Для формування превью досить розмітки назви, короткого опису і картинки.

<meta property="og:title" content="Важко без крокодила" />
<meta property="og:description" content="Ці вірші письменник-сатирик і публіцист Віктор Шендерович склав майже тридцять років тому. Він спостерігав, як зростає його донька, і згадував власне дитинство: ті далекі часи, коли телефони були з дисками і проводами, а величезна... " />
<meta property="og:type" content="book" />
<meta property="og:url" content="http://www.labirint.ua/books/453612/" />
<meta property="og:image" content="http://img1.labirint.ua/books/453612/big.jpg" />

Для сторінки з переліком товарів можна додати розмітку ItemList, щоб отримати спеціальний острів з каталогом:



Розмітка полів name, description, image, url потрібна для формування таблиці, а для вказівки цін offers.priceCurrency, offers.price.

<div itemscope itemtype="http://schema.org/ItemList">
<h1 itemprop="name"> Сковороди Rondell</h1>
<link itemprop="url" href="http://home.wikimart.ua/kitchen_one/cooking_utensils/pans/brand/RONDELL/"/> 
<span itemprop="numberOfElements" class="count">{{totalModelsCount}}</span>
<span itemprop="numberOfElements" class="count">{{currentModelsCount}}</span>
</div>

Платформа «Острова» знаходиться на стадії бета-тестування

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

ЗМІ

Олександр Ломакін, технічний директор Lenta.uk:
Lenta.ru ми використовуємо три типи семантичної розмітки: Open Graph, Twitter Cards і Schema.org.
З першими двома стандартами від Facebook і Twitter все просто — наші матеріали досить багато «шерят» і «лайкають», тому в соціальних мережах вони повинні виглядати нітрохи не гірше, ніж на основному сайті. З допомогою розмітки ми це контролюємо, размечая фотографію, заголовок і короткий опис.



Schema.org все трохи інакше. Крім того, щоб наш сайт красиво відображався в результатах пошуку, ми хочемо допомагати пошуковим системам отримувати і правильно індексувати структуровані дані.

У підсумку наші матеріали стали помітніше як в соціальних мережах, так і в результатах видачі пошукових систем. Але, що саме головне, ми отримали додатковий трафік. Чесно кажучи, я не розумію, чому велика кількість ресурсів забивають і не використовують мікророзмітку. Адже навіть на такий великий сайт, як Lenta.uk, додати розмітку дуже просто. Тому ми не хочемо зупинятися на наявній розмітці і в найближчому майбутньому плануємо впровадити ще один тип — мікроформати hNews, який зробить наші матеріали більш читабельними в сервісах типу Readability.
Михайло Воблов, керівник розробки Interfax.uk:
Ми задумалися над впровадженням мікророзмітки в той момент, коли усвідомили важливість соціальних мереж, зокрема Facebook, і трафіку, що від них надходить. Навчитися відображати там наші матеріали у зручній формі з правильною картинкою і з потрібної текстової вставкою, — ось яке завдання перед нами стояло. І вона вирішувалася за допомогою Open Graph, саме тому цей тип став першою впровадженої розміткою на нашому сайті.



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


На сайтах ЗМІ містяться сторінки з різними видами контенту — як текстами, так і мультимедійними матеріалами.

На всі сторінки статей, новин і репортажів, на наш погляд, вкрай важливо додати Open Graph — як правило, на окремі новини посилаються і користувачі, і групи у своїх постах. З тих же причин рекомендуємо використовувати Twitter Cards.



<meta content="summary" property="twitter:card">
<meta content="@lentaruofficial" property="twitter:site">
<meta content="228661749" property="twitter:site:id">
<meta content="article" property="og:type">
<meta content="«Яндекс.Музика» ввела функцію рекомендацій нових треків" property="og:title">
<meta content="http://icdn.lenta.ua/images/2014/09/17/15/20140917150310534/original_bb8b02c32aa88565e4147f7cda1bebed.jpg" property="og:image">
<meta content="«Яндекс» оновив свій музичний сервіс, головною особливістю якого стала система персональних рекомендацій.Система ґрунтується на піснях, які слухають друзі користувача «ВКонтакте» і Facebook, також розповідає про музичні новинки, наприклад, що звучать в блокбастерах або на фестивалях." property="og:description">

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



Можна зазначити автора, заголовок і короткий зміст. В даному випадку острів будується на основі заголовка та змісту:

<div itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">Дитячий театральний фестиваль "Велика перерва" відкривається в Москві</h1>
<div itemprop="description">Традиційно програма фестивалю складається з основної і спеціальної програм. Якщо основну афішу формують із зарубіжних і російських вистав, то додаткову входять майстер-класи і зустрічі, тема яких - театральні технології і мистецтво для дітей.</div>
</div>

Платформа «Острова» знаходиться на стадії бета-тестування

На сторінку з контактами можна додати розмітку Organization або hCard.

Відеохостинги

Денис Чудінов, керівник напрямку оптимізації Ivi.uk:
Ми почали замислюватися над впровадженням мікророзмітки лише в 2012 році, в той час як Яндекс ще в 2010 році став враховувати перші типи мікророзмітки. Але краще пізно, ніж ніколи :) Проте виявилося, що і в 2012 році в Рунеті не було практично ніяких прикладів її використання, всі були тільки чули про неї, але зовсім не розуміли, як і впроваджувати. Тому вчитися доводилося на власному досвіді: нам нічого не залишалося робити, як самим розглядати різні варіанти, вивчати документацію наявних стандартів і підглядати у західних колег. Загалом, експериментували. У підсумку вирішили впровадити два типи: Open Graph і Schema.org/Movie, так як вони допомагають передавати дані пошуковим системам і красиво відображатися в соціальних мережах.

Для нас це впровадження проходило непросто як з точки зору розробки, так і з точки зору розуміння, навіщо вона потрібна — на той момент було не дуже очевидно, що дасть микроразметка. Загалом було ясно тільки те, Open Graph потрібен для соціальних мереж, а Schema.org для пошуковиків. Крім того, на той момент у нас не було окремої метрики для вимірювання ефективності розмітки, та й не дуже було зрозуміло, як ефект від її впровадження можна виміряти. Однак минуло небагато часу, і ми стали помічати, що з фрагментів тексту в Яндексі стали пропадати «ліві тексти», вони стали більш інформативними. І це ж стали помічати наші користувачі, що не могло нас не радувати.



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


Всі відеоматеріали можна докладно описати з допомогою типу VideoObject від Schema.org або розширення Open Graph від Яндекса. Розмітка дозволить брати участь у партнерських програмах Яндекса і Google і добре відображатися як в результатах великого пошуку, так і в пошуку агрегаторів відео.



В розмітці зазначаються дані відео: назва, довжина, номер серії і так далі.

<meta property="og:type" content="video.episode"/>
<meta property="og:title" content="Кровні узи: Серія 1"/>
<meta property="og:url" content="http://www.ivi.ua/watch/krovnyie_uzyi/99844"/>
<meta property="og:image" content="http://thumbs.ivi.ua/f5.vcp.digitalaccess.ua/contents/4/0/b66681c45c20400a4212c0c92b80d6.jpg"/>
<meta property="og:video" content="https://www.ivi.ua/video/player?siteId=s132&_isB2C=1&videoId=99844&autoStart=1&sharing_to=fb&share_embed=0"/>
<meta property="og:video:url" content="http://www.ivi.ua/video/player?siteId=s132&_isB2C=1&videoId=99844&autoStart=1&sharing_to=fb&share_embed=0"/>
<meta property="og:video:secure_url" content="https://www.ivi.ua/video/player?siteId=s132&_isB2C=1&videoId=99844&autoStart=1&sharing_to=fb&share_embed=0"/>
<meta property="og:video:type" content="application/x-shockwave-flash"/>
<meta property="og:video:duration" content="5536"/>
<meta property="video:episode" content="1"/>
<meta property="video:series" content="http://www.ivi.ua/watch/krovnyie_uzyi"/>
<meta property="video:duration" content="5536"/>
<meta property="video:actor" content="http://www.ivi.uk/person/Konstantin-Solovev-335"/>
<meta property="video:actor" content="http://www.ivi.uk/person/Vsevolod-Shilovskiy-7892"/>
<meta property="video:director" content="http://www.ivi.ua/temporary/person/176276"/>

А з допомогою розмітки Schema.org/Movie можна отримати структуровані фрагменти з описом фільмів в Яндексі:



Для цього необхідно розмітити докладну інформацію про фільм:

<div itemscope itemtype="http://schema.org/Movie"> 
<meta itemprop="contentRating" content="MPAA "/>
<meta itemprop="duration" content="01:22" />
<h1 itemprop="name">Кавказька полонянка, або Нові пригоди Шурика</h1>
режисер<td itemprop="director"><a href="/name/191587/">Леонід Гайдай</a></td>
<ul>
<li itemprop="actors"><a href="/name/284624/">Олександр Дем'яненко</a></li>
<li itemprop="actors"><a href="/name/192726/">Наталія Варлей</a></li>
</ul> 
<div itemprop="description">Відправившись в одну з гірських республік збирати фольклор, герой фільму Шурик закохується в симпатичну дівчину; спортсменку, відмінницю, і просто красуню. Але її несподівано викрадають, щоб насильно видати заміж. Наївний Шурик не відразу зміг збагнути, що коїться у нього під носом, однак потім відважно кинувся звільняти кавказьку полонянку</div> 

Користувачі можуть шукати фільми не тільки за назвою, але і за іншими параметрами — жанру, режисерові або акторського складу. Така розмітка допоможе знаходити потрібні результати на вашому сайті.

На даний момент 30% сторінок, відомих Яндексу, мають семантичну розмітку. Відповіді представників сайтів — невеличка, але дуже показова частина досвіду використання розмітки. Якщо у вас теж є — діліться в коментарях!

Ми дякуємо нашим партнерам за відповіді та допомогу в складанні цієї статті.

На цьому серія навчальних постів, присвячених семантичної розмітки, підходить до кінця. Ми писали про різних словники і стандартах синтаксису, продуктах на основі розмітки, а в цій статті розглянули живі приклади сайтів Рунета, використовують і рекомендують розмітку.

Сподіваємося, що ці статті допомогли вам зрозуміти, що з себе представляє семантична розмітка і яку користь може принести вам. У свою чергу, ми, команда семантичного веба в Яндексі, будемо продовжувати створювати продукти та інструменти, здатні допомогти в роботі з семантичної розміткою, і продовжувати писати про неї.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.