—контейнера и не должны быть указаны вне его границ. Иначе это будет считаться ошибкой, и микроразметка точно работать не будет.

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

Аналогично можно описать любую схему: для меню «хлебные крошки» можно использовать шаблон из справочной системы Google (исходные коды по ссылке). Ознакомиться с применением кода можно, например, на сайте «Связного ».

Исходный код меню «хлебные крошки»

Для каждого из стандартных описаний вы всегда можете найти информацию о том, где и какие поля располагаются: так, для разметки товаров возможно указание цены блоком , аналогично указывается разметка отзывов и комментариев. Самое важное — найти необходимый шаблон, а они достаточно подробно описаны.

Наибольшая сложность состоит в том, как именно вписать в имеющиеся оформление и стили указанные блоки и элементы. Тут за помощью можно обратиться к более опытным коллегам.

Пример использования «Маркера»

Как говорилось выше, создать микроразметку можно и без знания шаблонов с помощью сервиса Google «Маркер ».

Первый шаг — указать адрес страницы и тип необходимых данных:

Выбор типа разметки

Выбор полей осуществляется мышью:

Выбор полей для разметки мышью

После выделения необходимых полей и задания типов для них вы получите указания, какие строки кода необходимо изменить и в каких местах:

Итоговый код

В данном случае все даже проще, чем ранее. Столкнуться со сложностями можно будет, только если страницы сайта не статические, а динамические и создаются посредством кода PHP, например, при написании микроразметки на платформе WordPress. В таком случае необходимо будет править файлы index.php (и, возможно, header.php).

Особенности использования

1. Наиболее ярко использование микроразметки может себя проявить в определенных тематиках. Для сайта с рецептами можно достаточно заметно увеличить трафик за счет установки привлекательных сниппетов. Если в выдаче по запросу будет присутствовать только один сайт с изображением и аккуратно прописанным описанием, то он будет привлекать гораздо большее внимание, чем другие.

2. Для интернет-магазина при наличии выгодно выделяющих вас среди конкурентов цен также возможно повышение трафика. Выгоду от предложения становится видно в выдаче: если стоимость одна из наиболее низких, то наличие разметки положительно повлияет на конверсию.

Другие примеры, как обычно, остаются на ваше собственное изучение.

Проверка правильности микроразметки

Одним из важнейших шагов перед выкладкой готовой разметки является валидация — проверка правильности написания разметки . Выполнить ее можно с помощью специальных сервисов «Валидатор микроразметки » в составе Яндекс.Вебмастера и Testing Tool в составе Google Developers.

Работать с данными сервисами очень просто — копируем в поле ввода код и получаем либо ответ «все хорошо»:

Валидатор от Яндекс

либо предупреждение, где написана ошибка, если вы что-то перепутали в порядке (как я предупреждал ранее):

Итоги

Правильное использование микроразметки может дать вам некоторые преимущества, которыми не стоит пренебрегать. Данная тема очень глубока, и описать ее в двух словах достаточно сложно, поэтому рекомендую ознакомиться со ссылками в тексте и почитать, что о разметке говорят сами поисковые системы: какие форматы они поддерживают на сегодняшний день, как их заставить работать на свои цели.

В остальном желаю успехов в начинаниях на поприще семантической разметки!

Любой вебмастер хорошо знаком с HTML-разметкой. Обычно HTML-теги указывают браузеру, как отображать информацию, заключенную в тег. Например, тег

Аватар

означает, что строку «Аватар» следует отображать в формате заголовка первого уровня. Однако HTML-тег не предоставляет никакой информации о смысловом значении этой строки: «Аватар» может относиться к чрезвычайно успешному 3D-фильму или к картинке в пользовательском профиле. Это усложняет поисковым системам задачу нахождения информации, адекватной запросу пользователя.

Schema.org предоставляет общедоступный словарь, с помощью которого вебмастера могут размечать страницы, так чтобы они были понятны самым распространенным поисковым системам: Яндексу, Google, Microsoft и Yahoo!.

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

Теперь поисковые системы смогут понять не только то, что http://www.avatarmovie.com - это ссылка, но и то, что это ссылка на трейлер фантастического фильма «Аватар» режиссера Джеймса Кэмерона.

Вложенные сущности

Иногда значение свойства может само являться сущностью, с собственным набором свойств. Например, режиссер фильма может быть описан как сущность с типом Person, у которой есть свойства name (имя) и birthDate (дата рождения). Чтобы указать, что значение свойства представляет собой сущность, необходимо добавить атрибут itemscope сразу после соответствующего itemprop .

Типы и свойства schema.org

Кроме типов Movie и Person, упомянутых в разделе , schema.org описывает множество разнообразных типов сущностей, для каждого из которых определен набор свойств.

Наиболее обобщенный тип сущности - это Thing (нечто), у которого есть четыре свойства: name (название), description (описание), url (ссылка) и image (картинка). Более специализированные, частные типы имеют общие свойства с более универсальными. Например, Place (место) - частный случай Thing, а LocalBusiness (местная фирма) - частный случай Place. Частные типы наследуют свойства родительского типа. (Более того, тип LocalBusiness является и частным случаем Place, и частным случаем Organization, поэтому наследует свойства обоих родительских типов.)

Вот список некоторых популярных типов сущностей:

• Дополнительно: машиночитаемая версия информации

  Многие страницы можно разметить, используя только атрибуты itemscope , itemtype и itemprop (описанные в разделе Как размечать контент с помощью микроданных) вместе с типами и свойствами schema.org (описанными в разделе Как использовать словарь schema.org).

  Однако в некоторых случаях роботу сложно однозначно интерпретировать свойство сущности. Этот раздел описывает, как добавить машиночитаемую версию информации в разметку страниц.

  Даты, время и длительность: используйте тег с атрибутом datetime

  Не всегда роботам удается правильно понять дату и время. Например, «04/01/11» - это 11 января 2004 г., 4 января 2011 г. или 1 апреля 2011 г.? Чтобы однозначно задать дату, используйте тег вместе с атрибутом datetime . Значение атрибута datetime - дата в формате YYYY-MM-DD . Следующий HTML-код точно определяет дату как 1 апреля 2011 г.:

  04/01/11

  Время суток задается в формате hh:mm либо hh:mm:ss , с префиксом T . Время может быть указано вместе с датой:

  8 мая, 19:30

  Рассмотрим пример в контексте: HTML-код с информацией о концерте, который состоится 8 мая 2011 г. Разметка типа Event включает название события, описание и дату.

  itemscope itemtype="http://schema.org/Event" >

  itemprop="name" >Spinal Tap

  itemprop="description" >Одна из самых громких музыкальных групп всех времен воссоединится для незабываемого двухдневного шоу. Концерт состоится 8 мая в 19:30

  Длительность описывается аналогичным образом, с помощью тега и атрибута datetime . Значение атрибута предваряется префиксом P (от англ. period). Например, указать в рецепте, что время приготовления составляет полтора часа, можно следующим образом:

  itemprop="cookTime" datetime="PT1H30M"> 1 ½ часа

  H обозначает количество часов, а M - количество минут.

  Форматы даты, времени и длительности соответствуют стандарту ISO 8601 .

  Перечисления и ссылки на канонические страницы: используйте тег link с атрибутом href

  Перечисления

  Некоторые свойства имеют ограниченный набор возможных значений. Программисты называют их перечислениями. Например, интернет-магазин может использовать тип сущности Offer для подробного описания товарного предложения. Свойство availability (наличие) обычно имеет одно из нескольких возможных значений: In stock (в наличии), Out of stock (отсутствует), Pre-order (на заказ) и т. д. Значения перечисляемых свойств можно указывать в виде URL, аналогично типам сущностей schema.org.

  Вот товарное предложение, размеченное как сущность типа Offer, с соответствующими свойствами:

  Blend-O-Matic $19.95 Уже в продаже!

  А вот то же самое предложение, размеченное с использованием и href , что позволяет однозначно указать одно из допустимых значений свойства availability:

  Blend-O-Matic $19.95 Уже в продаже!

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

  Над пропастью во ржи Автор Джером Сэлинджер itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">Страница в Википедии

  Как видите, атрибут itemprop="url" можно использовать для ссылки на страницу другого сайта (в этом случае, Википедии), которая описывает ту же самую сущность. Ссылки на сторонние сайты помогают поисковым системам лучше понимать, о чем речь на вашей странице.

  Над пропастью во ржи Автор Джером Сэлинджер

  Недостающая или неявная информация: используйте тег с атрибутом content

  Иногда важная информация не может быть размечена из-за способа ее отображения на странице. Например, информация представлена на рисунке (изображение рейтинга 4 звезды из 5) или во Flash-объекте (например, длительность видеоролика) либо она подразумевается, но не указана на странице в явном виде (например, валюта цены).

  В таких случаях можно использовать тег с атрибутом content . В следующем примере картинка иллюстрирует рейтинг 4 звезды из 5:

  Blend-O-Matic $19.95 25 оценок

  А вот тот же пример с размеченной информацией о рейтинге.

  Blend-O-Matic $19.95

  itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating" > itemprop="ratingCount" >25 оценок

  Этим приемом не следует злоупотреблять. Используйте тег с атрибутом content только для той информации, которую невозможно разметить иным способом.

  Расширение schema.org

  Большинству сайтов и организаций не потребуется расширять schema.org. Тем не менее schema.org предусматривает возможность добавлять свойства и дочерние типы для имеющихся типов сущностей. Если вы заинтересованы в этом, ознакомьтесь с

А также разобрали, в каких продуктах она используется .

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

Люди, которые отвечают за разработку и всю техническую часть таких сайтов, как 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 :

массажёр Beurer MG 81

Массажер Beurer MG81 - это современный, элегантный и многофункциональный прибор. Крупные массажные головки эргономичной формы выполняют глубокий вибрационный (ударный) массаж на любом участке тела. Дополнительно массируемый участок тела можно прогреть инфракрасным нагревательным элементом. Также возможно подключить 2 разные массажные насадки. Вибромассажер с инфракрасным излучателем может проводить массаж с различной интенсивностью. Вы можете проводить массаж и самостоятельно, и с помощью другого человека. Длинный сетевой шнур позволяет проводить сеанс массажа в удобном месте независимо от расположения розетки. Также у массажера удобная и не скользящая ручка для простого и надежного применения. 3320 руб.
Большое влияние на решение о покупке оказывают отзывы. Если у вас есть отзывы, мы рекомендуем добавить специальную разметку: в Product для этого есть свойство AggregateRating , а в микроформатах есть тип hReview .

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

Для этого необходимо указать значение поля AggregateRating :

"Смартфон Apple iPhone 6 4.7" 16Gb Space Gray

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

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

Онлайн-мегамаркет OZON.ru: год за годом

Офис в Москве

125252 , г. Москва, Чапаевский переулок, д. 14

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

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

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

Сковороды Rondell

{{totalModelsCount}} {{currentModelsCount}}

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

СМИ

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

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

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

Детский театральный фестиваль "Большая перемена" открывается в Москве

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

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

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

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

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

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

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

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

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

В разметке указываются данные видео: название, длина, номер серии и так далее.

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

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

Кавказская пленница, или Новые приключения Шурика

режиссер

• Александр Демьяненко
• Наталья Варлей

Отправившись в одну из горных республик собирать фольклор, герой фильма Шурик влюбляется в симпатичную девушку; спортсменку, отличницу, и просто красавицу. Но ее неожиданно похищают, чтобы насильно выдать замуж. Наивный Шурик не сразу смог сообразить, что творится у него под носом, однако затем отважно ринулся освобождать кавказскую пленницу

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

На данный момент 30% страниц, известных Яндексу, имеют семантическую разметку. Ответы представителей сайтов - небольшая, но очень показательная часть опыта использования разметки. Если у вас он тоже есть - делитесь в комментариях!

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

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

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

Теги: Добавить метки

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

В открывающем теге добавляем атрибут itemscope. Это означает, что данный тег содержит некую сущность. Обозначим тип сущности атрибутом itemtype, сразу после itemscope. Названия типов имеют вид URL. Обозначение типов микроданных можно найти на официальном сайте Schema.org. У нас же название типа http://schema.org/Article.

...

После объявления сущности, обозначим ее свойства. Синтаксис свойств сущностей можно найти на официальном сайте Schema.org. Для объявления свойств используется атрибут itemprop. Аналогично находим на странице тег, содержащий заголовок нашей статьи. Теперь добавим атрибут с названием свойства. У нас название свойства - заголовок name.

CMS с точки зрения SEO

Аналогично объявляются все свойства сущности. Ниже перечислим:

3 декабря 2014 года CMS

Содержимое статьи

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

Если у вас будут возникать вопросы или сомнения, всегда обращайтесь на официальный сайт. На нем собрана все необходимая информация по сущностям и ее свойствам, а также примеры семантической разметки Schema.org использования в разных ситуациях.