Information

Founded
Location
Россия
Website
www.yandex.ru
Employees
over 10,000 employees
Registered

Habr blog

Pull to refresh
466.75
Rating
Яндекс
Как мы делаем Яндекс

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

Яндекс corporate blogMicroformatsSearch enginesSemantics
Мы уже рассказали вам о мире семантической разметки — о том, какие бывают словари, почему столько стандартов синтаксиса, а также разобрали, в каких продуктах она используется.

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



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

Интернет-магазины


Денис Егоров, руководитель направления интернет-маркетинга Holodilnik.ru:

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



Конечно, многие сейчас задаются вопросом, какова эффективность того или иного внедрения, в том числе и какова эффективность внедрения мироразметки — на все нужны ресурсы, которые потом должны себя оправдать. Вопрос этот, действительно, интересен. На момент внедрения мы считали микроразметку необходимым улучшением, и у нас не было цели напрямую отслеживать ее эффективность. Однако за год, прошедший с момента ее внедрения, мы получили следующее: глубина просмотра посетителей из поисковиков выросла почти в 2 раза, при этом показатель отказов снизился в 3-4 раза. Количество же достижения цели выросло на 20-30%. Согласитесь, это неплохой показатель. И хотя, конечно, мы не связываем весь этот рост только с внедрением одной лишь микроразметки, значительная доля изменения этих показателей, безусловно, ее заслуга.

Андрей Кузьмичёв, руководитель направления поисковой оптимизации Ozon.ru:

В Ozon.ru мы внедрили разметку разных стандартов, потому что каждая из них дает выигрыш в чем-то своем: микроформат hCard и Schema.org дают качественное представление в поисковых системах, а Open Graph — в социальных сетях. В общем и целом, благодаря этой разметке наши сниппеты стали более качественными и структурированными.



На достигнутом мы останавливаться не собираемся, как, видимо, и поисковые системы. Чем больше новых типов микроразметки они начинают учитывать, тем больше у магазинов становиться возможностей как-то выделиться на поиске. Так, недавно стала учитываться разметка Schema.org/Product по новой партнерской программе Яндекса для разметки товаров. Однако для некоторых категорий мы будем использовать семантическую разметку товаров совместно с программой «Товары и цены», которая пока иногда дает преимущества по скорости обновления данных о продуктах. И такая задача уже стоит у наших программистов.


Типичный сайт Интернет-магазина состоит из страниц с товарами, каталогом, контактами и информацией о доставке. Разметив страницы с товарами и контактами, можно улучшить свое представление в поисковых системах.

Для страниц с товарами в 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="offers" 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="offers" itemscope itemtype="http://schema.org/Offer">
    <h1 itemprop="name"> "Смартфон 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.ru</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.ru"></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.ru/books/453612/" />
<meta property="og:image" content="http://img1.labirint.ru/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.ru/kitchen_one/cooking_utensils/pans/brand/RONDELL/"/>          
      <span itemprop="numberOfElements" class="count">{{totalModelsCount}}</span>
      <span itemprop="numberOfElements" class="count">{{currentModelsCount}}</span>
</div>

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

Учитывая, что сайты могут предлагать разные товары, эти типы разметки подойдут всем интернет-магазинам, у кого есть страницы с описанием и ценой для каждого товара.

СМИ


Александр Ломакин, технический директор Lenta.ru:

В Lenta.ru мы используем три типа семантической разметки: это Open Graph, Twitter Cards и Schema.org.
С первыми двумя стандартами от Facebook и Twitter все просто — наши материалы достаточно много «шерят» и «лайкают», поэтому в социальных сетях они должны выглядеть ничуть не хуже, чем на основном сайте. С помощью разметки мы это контролируем, размечая фотографию, заголовок, и краткое описание.



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

В итоге наши материалы стали заметнее как в социальных сетях, так и в результатах выдачи поисковых систем. Но, что самое главное, мы получили дополнительный трафик. Честно говоря, я не понимаю, почему большое количество ресурсов забивают и не используют микроразметку. Ведь даже на такой большой сайт, как Lenta.ru, добавить разметку очень просто. Поэтому мы не хотим останавливаться на имеющейся разметке и в ближайшем будущем планируем внедрить еще один тип — микроформат hNews, который сделает наши материалы более читабельными в сервисах типа Readability.

Михаил Воблов, руководитель разработки Interfax.ru:

Мы задумались над внедрением микроразметки в тот момент, когда осознали важность социальных сетей, в частности, 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.ru/images/2014/09/17/15/20140917150310534/original_bb8b02c32aa88565e4147f7cda1bebed.jpg" property="og:image">
<meta content="«Яндекс» обновил свой музыкальный сервис, главной особенностью которого стала система персональных рекомендаций.Cистема основывается на песнях, которые слушают друзья пользователя по «ВКонтакте» и Facebook, также рассказывает о музыкальных новинках, например, звучащих в блокбастерах или на фестивалях." property="og:description">

Для новостных сводок и различных текстов подходит разметка CreativeWork, с помощью которой в Яндексе строится структурированный сниппет и остров с карточкой новости.



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

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

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

На страницу с контактами можно добавить разметку Organization или hCard.

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


Денис Чудинов, руководитель направления оптимизации Ivi.ru:

Мы начали задумываться над внедрением микроразметки лишь в 2012 году, в то время как Яндекс еще в 2010 году стал учитывать первые типы микроразметки. Но лучше поздно, чем никогда :) Однако оказалось, что и в 2012 году в Рунете не было практически никаких примеров ее использования, все были только наслышаны о ней, но совершенно не понимали, как и что внедрять. Поэтому учиться приходилось на собственном опыте: нам ничего не оставалось делать, как самим рассматривать разные варианты, изучать документацию имеющихся стандартов и подсматривать у западных коллег. В общем, экспериментировали. В итоге решили внедрить два типа: Open Graph и Schema.org/Movie, так как они помогают передавать данные поисковым системам и красиво отображаться в социальных сетях.

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



Сейчас мы продолжаем внедрение микроразметки, в этот раз уже с куда более четкими целями и метриками — чтобы подключиться к обновленной партнерской программе Яндекс.Видео, так как ожидаем после этого существенного увеличения количества посещений с этого сервиса.


Все видеоматериалы можно подробно описать с помощью типа 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.ru/watch/krovnyie_uzyi/99844"/>
<meta property="og:image" content="http://thumbs.ivi.ru/f5.vcp.digitalaccess.ru/contents/4/0/b66681c45c20400a4212c0c92b80d6.jpg"/>
<meta property="og:video" content="https://www.ivi.ru/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.ru/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.ru/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.ru/watch/krovnyie_uzyi"/>
<meta property="video:duration" content="5536"/>
<meta property="video:actor" content="http://www.ivi.ru/person/Konstantin-Solovev-335"/>
<meta property="video:actor" content="http://www.ivi.ru/person/Vsevolod-Shilovskiy-7892"/>
<meta property="video:director" content="http://www.ivi.ru/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% страниц, известных Яндексу, имеют семантическую разметку. Ответы представителей сайтов — небольшая, но очень показательная часть опыта использования разметки. Если у вас он тоже есть — делитесь в комментариях!

Мы благодарим наших партнеров за ответы и содействие в составлении этой статьи.

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

Надеемся, что эти статьи помогли вам понять, что из себя представляет семантическая разметка и какую пользу может принести вам. В свою очередь, мы, команда семантического веба в Яндексе, будем продолжать создавать продукты и инструменты, способные помочь в работе с семантической разметкой, и продолжать писать о ней.
Tags:Семантическая разметкаSchema.orgOpen Graphмикроформаты
Hubs: Яндекс corporate blog Microformats Search engines Semantics
Rating +45
Views 104.6k Add to bookmarks 589
Comments
Comments 9

Popular right now