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

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

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

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

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

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

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

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

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

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

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

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

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

Итоговый код

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

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

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

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

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

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

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

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

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

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

Итоги

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

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

Примеры

Если вы не знаете, как добавить код разметки на сайт, воспользуйтесь инструментом Маркер .

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

Как разметить веб-страницу или письмо

Разметку можно разместить на HTML-странице или в HTML-файле письма электронной почты.

Как разметить веб-страницу

Выполните следующие действия:

Как разметить письмо в формате HTML

Выполните следующие действия:

Сохраните изменения, чтобы продолжить редактирование страницы или письма

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

Как удалить теги

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

Как удалить отдельный тег

1. Откройте образец страницы или сообщения электронной почты и нажмите на нужный тег.
2. В появившемся меню выберите Удалить тег .

Также вы можете найти нужный элемент в столбце "Мои элементы данных", навести на него указатель мыши и нажать "Х" справа.

Как удалить все теги

Расширенная разметка дат

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

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

Как добавлять один тег для даты

1. Начните выполнять разметку в соответствии с инструкциями для страницы или письма .
2. На странице добавления тегов выделите с помощью мыши дату, например 2 июня 2012 г.
3. В открывшемся меню выберите Дата > Дата/время или диапазон .
4. страницы или письма .

Добавление тегов для фрагментов дат

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

Учтите, что Мастер разметки не распознает даты, которые разделены на фрагменты и при этом представляют собой диапазон (например, 4–5 июня и 2012 ).

Как добавить теги для фрагментов дат

1. Начните выполнять разметку в соответствие с инструкциями для страницы или письма .
2. На странице добавления тегов выберите фрагмент даты с помощью мыши, например "июня ".
3. В открывшемся меню выберите Дата > Дополнительно > нужный фрагмент . Пример: Дата > Дополнительно > Месяц .

   Мастер разметки добавит дату в столбец "Мои элементы данных".

4. Продолжайте добавлять теги для фрагментов данных, пока отметите их все.
5. Завершите разметку в соответствие с инструкциями для страницы или письма .

Примеры тегов для дат

Ниже приведены примеры дат, которые вы можете отметить.

• Отдельная дата. Например, можно пометить следующие варианты:
  • 2012 г., 4 июня
  • 4 июня 2012 г.
  • 13.04.2012 – ваши теги могут включать другие разделители и четырехзначное значение года, например 13-4-2012 . В случае с датами, которые можно читать по-разному, Google интерпретирует первое число как месяц. Например, дата 6/4/12 распознается как 4 июня 2012 г., а 13/4/12 – как 13 апреля 2012 г.
  Вы можете отметить несколько дат на странице. Например, если отметить 4 июня 2012 г. и 6 июня 2012 г. , то это будет означать, что мероприятие пройдет дважды: первый раз 4 июня, а второй – 6 июня.
• Диапазон дней. Например, 4-7 июня 2012 г.
  Обратите внимание, что разделитель между начальной и конечной датой должен быть дефисом (-).

• Даты с указанием времени. Например, можно отметить следующие даты:
  • 4 июня 2012 г. 3 pm – дата и время (am или pm). Если не указано, утреннее или вечернее время, Google интерпретирует данные с учетом стандартного рабочего времени. Например, 11 будет считаться за 11 am, а 2 – за 2 pm.
  • 4 июня 2012 г., 15:00 – 24-часовой формат времени.
  • 4 июня 2012 г. 3 pm EST или 4 июня 2012 г. 3 pm -5:00 – время с указанием часового пояса или отклонения по UTC/GMT.
  • 4 июня 2012 г., 2-3 pm или 4-5 июня 2012 г., 2-3 pm – диапазоны времени с диапазоном дат или без него.
• Фрагменты дат.Вы можете использовать расширенные настройки тегов, чтобы отметить следующие фрагменты текста как отдельную дату:
  • День: 4 июня, среда . Год: 2013 .
  • 4 июня | Время: 7:30pm-9:30pm и 2012
  Google не распознает диапазоны дат, распределенные по нескольким тегам. Например, следующие теги для дат являются недействительными:
  • 4-5 июня и 2012

Как указать формат даты вручную

Мастер разметки распознает даты на странице в соответствии с правилами форматирования, заданными для языка этой страницы. Например, если на странице используется американский английский (en-US), дата 12-06-12 будет означать 6 декабря 2012 г. Но если на странице используется британский английский (en-GB), то та же дата будет интерпретироваться как 12 июня 2012 г. Мастер разметки автоматически определяет язык страницы и использует соответствующие правила.

Чтобы задать другой формат даты для Мастера разметки, выполните следующие действия:

1. В открывшемся окне выберите формат даты из соответствующего списка.
2. Нажмите Сохранить .

Как добавить недостающие данные

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

Добавить недостающие данные, а также изменить или удалить их, можно в любое время.

Как добавить, изменить или удалить данные

1. Нажмите Добавить отсутствующие теги в нижней части столбца "Мои элементы данных".
2. Выполните любое из следующих действий:
   • Выберите тег из списка и введите значение. Например, вы можете выбрать тег Категория и ввести значение "Русские народные песни".
   • Удалите существующие данные, нажав X в текстовом поле.
   • Измените значение в поле.
3. Нажмите Сохранить .
   Изменения отобразятся в столбце "Мои элементы данных"

Как изменить язык страницы

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

Для этого выполните следующие действия:

Нажмите на значок настроек и выберите .

1. В открывшемся окне укажите язык.
2. Нажмите Сохранить .

Что такое schema.org

schema.org – это результат совместной работы Google, Microsoft и Yahoo! по усовершенствованию Интернета путем создания общего стандарта для описания веб-данных. Если вы добавите на свои HTML-страницы разметку schema.org, многие компании и системы, включая Google Поиск, смогут распознать информацию на вашем сайте. Аналогичным образом, если вы добавите разметку schema.org в электронное письмо в формате HTML, его данные сможет распознавать не только Gmail, но и другие почтовые сервисы.

Schema.org - это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года.

Цель семантической разметки – сделать интернет более понятным, структурированным и облегчить поисковым системам и специальным программам извлечение и обработку информации для удобного её представления в результатах поиска.

Разметка происходит непосредственно в HTML-коде страниц с помощью специальных атрибутов и не требует создания отдельных экспортных файлов.

1. Зачем нужна микроразметка
2. Основные принципы разметки

Зачем нужна микроразметка

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

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

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

Познакомиться с описанием стандарта можно на официальном сайте в разделе документация .

Также существует неофициальный и пока неполный перевод стандарта на русский язык на сайте: http://ruschema.org/ .

Основные принципы разметки

Любая разметка Schema.org производится в два шага:

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

...

Разметка отдельных свойств с указанием на конкретное свойство схемы:

Льва Толстого, 16

Документ без разметки

Документ с разметкой Schema.org

Как начать использовать schema.org

Инструменты внедрения микроразметки

Как Яндекс использует размеченные данные

Семантическая разметка контента используется различными сервисами Яндекса:

Разметка товаров и их стоимости

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

• Разметка рецептов помогает Поиску формировать специальные сниппеты для страниц с такой разметкой.
• Разметка описаний фильмов помогает Поиску формировать специальные сниппеты для страниц с такой разметкой.
• Разметка творческих работ помогает Поиску формировать специальные сниппеты для страниц с такой разметкой.

Любой вебмастер хорошо знаком с 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 предусматривает возможность добавлять свойства и дочерние типы для имеющихся типов сущностей. Если вы заинтересованы в этом, ознакомьтесь с