Примеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отдельная дата. Например, можно пометить следующие варианты:
- 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 г. Мастер разметки автоматически определяет язык страницы и использует соответствующие правила.

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

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

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

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

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

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

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

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

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

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

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

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

Что такое schema.org

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

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

Аватар

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

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

itemprop="name" >Аватар

Режиссер: itemprop="director" >Джеймс Кэмерон (род. 16 августа 1954 г.) itemprop="genre" >Фантастика itemprop="trailer" >Трейлер

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

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

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

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

Аватар

itemprop="director" itemscope itemtype="http://schema.org/Person" >Режиссер: Джеймс Кэмерон (род. 16 августа 1954 г.)

Фантастика Трейлер

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

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

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

Упрощает жизнь роботам

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

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

Упрощает поиск человеку

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

Как выглядит описание при наличии микроразметки:

Как выглядит описание в отсутствие микроразметки:

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

Данное преимущество ресурсов с микроразметкой заметили специалисты «Яндекса». Как они утверждают, такие сайты «цепляют глаз» пользователя, что не может не отразиться на его посещаемости. Причем речь идет не о случайных прохожих, которых завела «не туда» хитрая ссылка программиста, а о нужных людях - например, покупателях. Также «Яндекс» отмечает, что микроразметка сайта делает более удобным поиск для пользователей. Создатели портала даже выделили особый компонент качества поиска - «счастье пользователя». Те страницы, которые делают людей «счастливыми», поисковик поднимает вверх .

Микроразметка может выполняться в соответствии с разными стандартами. Вот наиболее распространенные:

Еще три года назад все крупные поисковики взяли в качестве основного стандарта разметки по смысловому значению вариант Schema.org. Он включает в себя несколько классов, которые описывают разнообразные схемы и их особенности. Составление разметки осуществляется в два захода:

Указывается сама схема разметки;
Выделяются конкретные ее особенности.

Например, нужно создать схему об адресах некоторых организаций.

В отсутствие микроразметки она будет выглядеть так:

А теперь пропишем выбранную для разметки схему:

Itemscope указывает на то, что между тегами

есть какая-то схема (сущность). Какого типа данная схема, поясняет itemtype . У нас это адрес организации, поэтому присутствует слово Organization . Больше информации о схеме Вы найдете .

Теперь перейдем к описанию особенностей (свойств) схемы.

Атрибут itemprop помогает выделить улицу (т.е. streetAddress ), индекс (postalCode ), город (addressLocality ). Подобным образом составляются и другие схемы.

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

На данный момент ни Яндекс, ни Google не используют возможности Schema.org на полную мощь. Оба этих наиболее популярных поисковика работают лишь с некоторыми сущностями этого стандарта. Можно полагать, что в скором времени их перечень расширится, однако прямо сейчас микроразметки стоит составлять со следующими схемами:

Яндекс	Google
Адреса и организации	Мероприятия
Словарные статьи	Организации
Отзывы об организациях	Поддерживаемые типы приложений
Отзывы об автомобилях	Разметка для видео
Тест-драйвы	Расширенное описание веб-страниц: оценки в отзывах
Картинки	Расширенное описание веб-страниц: рецепты
Видео	Расширенное описание веб-страниц: элементы навигации
Рецепты	Расширенное описание веб-страниц: люди
Описание фильмов	Расширенное описание веб-страниц: музыка
Аккорды	Расширенное описание веб-страниц: отзывы
	Расширенное описание веб-страниц: приложения
	Расширенное описание веб-страниц: товары

Микроразметка Яндекс

Вот несколько примеров схем в микроразметке Яндекс :

Адреса и организации

Данная сущность присутствует практически на каждом ресурсе, которая сообщает координаты какой-либо компании. При помощи указанной схемы и пользования сервисом «Яндекс.Справочник» изображение описания в результатах поиска выглядит гораздо информативнее:

Словарные статьи

Сущность, имеющаяся во всевозможных справочниках, энциклопедиях, словарях и д.п. При использовании микроразметки Ваш ресурс подходит для платформы «Яндекс.Словари», которая значительно упорядочивает описание:

Отзывы об автомобилях

Сайты, где имеются отклики посетителей о транспортных средствах, стоит разметить в соответствии со схемой Review - тогда они попадут в приложение «Яндекс.Авто». Вот как будет выглядеть конкретный отзыв:

А таким его увидят пользователи в результатах поиска:

Другие схемы, рассматриваемые Яндексом, описаны .

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

Микроразметка Google

Google микроразметка в этом плане продвинулась гораздо дальше. Вот где ее удобно применять.

В Google Search Console – есть пункт «Структурированные данные».

Рис 1 – ошибки в микроразметке

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

Рис 2 – ошибки микроразметки Hentry

В нашем случае мы видим, что имеются 106 ошибок, которые относятся к разметке формата hentry (microformats.org)

– микроразметка, встроенная в ядро WordPress. Так как она встраивается автоматически и не адаптирована под сторонние шаблоны - чаще всего работает неправильно, и это приводит к тому, что Google Search Console обнаруживает такие ошибки:

Рис 2.1 – ошибки Hentry: author, entry-title, updated

Но, при этом инструмент для проверки микроразметки от Google – абсолютно спокойно сообщает, что нет никаких ошибок и никаких предупреждений по этому поводу.()

Рис 3 – гугл не видит ошибок hentry

На нашем сайте мы будем использовать признанную всеми поисковыми системами единогласно микроразметку – schema.org .

Этот стандарт поддерживает как Яндекс , так и Google .

Поэтому, встроенную микроразметку hentry, которая в Google Search Console выдает нам 106 ошибок – необходимо просто удалить.

Так как hentry добавляется в ядро wordpress -,что позволяет удалить ее через фильтры, потому как в шаблонах этих классов не видно.

Исходный код для удаления hentry:

Add_filter("post_class", "fc_remove_hentry", 20); function fc_remove_hentry($classes) { if (($key = array_search("hentry", $classes)) !== false) { unset($classes[$key]); } return $classes; }

Код необходимо добавить в functions.php

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

Рис 4 – удаление разметки hentry со всего сайта

После сохранение файла и повторной валидации страницы через инструмент для проверки микроразметки от Google – hentry должна будет пропасть.

Проверьте несколько страниц, которые имели ошибки, чтобы убедится, что hentry полностью удалена с сайта.

В Google Search Console вы увидите положительную динамику уменьшения количества ошибок. С течением времени они исчезнут вовсе, остается только ждать.

Рис 5 – положительная динамика уменьшения ошибок hentry

Как удалить ошибку:

ОШИБКА: поле http://ogp.me/ns#image отсутствует или пусто

Рис 6 – ошибка Open Graph ns#image

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

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

В нашем случае на сайте присутствует плагин - SEO Ultimate, который имеет специальный раздел, отвечающий за разметку Open Graph. А это значит, что ошибка связанная с http://ogp.me содержится именно в плагине SEO Ultimate.

Заходим по следующему пути SEO Ultimate -> Open Graph -> Default Values -> Default Image

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

Рис 7 – как исправить ошибку Open Graph ns#image

Добавляем URL адрес картинки, которую бы мы хотели видеть по умолчанию. Напомню что The Open Graph protocol отвечает за вывод красивых постов в социальных сетях, в фейсбуке, твиттере, вконтакте и так далее. То есть эта картинка, которую вы зададите по умолчанию, будет фигурировать в постах социальных сетей, репостах и так далее. Выбирайте брендовую и респектабельную фотографию.

После сохранения изменений – ошибка пропадает.

Рис 8 – ошибка Open Graph ns#article

Но по-прежнему остается ошибка, связанная с неизвестным префиксом article.

Мы с вами уже в курсе, что у нас на сайте установлен плагин SEO Ultimate. Продолжаем копать в этом же направлении.

Рис 9 – как исправить ошибку Open Graph ns#article

Устанавливаем Open Graph Type – Website.

Рис 10 – правильная разметка Open Graph

После всех изменений валидатор разметки Яндекс больше не выдает никаких ошибок:

Рис 11 – валидная разметка Open Graph

Добавляем микроразметку хлебных крошек

Хлебные крошки - это цепочка ссылок от главной страницы до страницы, где сейчас находится пользователь.

Для начала нужно проанализировать сайт на наличие хлебных крошек.

Рис 12 – хлебные крошки на сайте

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

Рис 13 – хлебные крошки выводятся через Breadcrumb NavXT

Открываем админ панель нашего сайта и заходим в редактирование плагина Breadcrumb NavXT.

Рис 14 – Настройки Breadcrumb NavXT

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

В нашем случае нас интересуют:

Шаблон ссылки на страницу блога
Шаблон на главную
Рубрика блога Шаблон
Шаблон ссылки на рубрику

Все шаблоны имеют стандартный вид типа:

%htitle%

Чтобы получить правильную микроразметку, нам нужно разметить этот исходный код с помощью стандарта http://schema.org/BreadcrumbList

Dresses
Real Dresses

Разберем по порядку, какие элементы содержит разметка, и как их следует применять:

itemscope itemtype=”http://schema.org/BreadcrumbList”

Этот элемент обозначает начало размечаемой области. Все что будет внутри этого элемента – это будет разметка хлебных крошек.

В примере элемент находится внутри нумерованного списка – тег

Это не обязательно, можно использовать

, или другие подобные теги.

Нужно смотреть по обстоятельствам и помнить что от того какой тег вы используете такой CSS и подключится к хлебным крошкам. То есть внешний вид ваших хлебных крошек зависит от того в какие теги вы обрамите http://schema.org/BreadcrumbList .

В нашем случае мы добавим эту строку кода через исходный код виджета breadcrumb_navxt_widget.php

Так как через стандартный редактор кода админ панели WordPress это файл недоступен, мы будем использовать фтп доступ через filezilla.

Рис 15 – Настройки виджета Breadcrumb NavXT

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

Рис 16 – код который обрамляет Breadcrumb NavXT

Находим в файле breadcrumb_navxt_widget.php следующий код:

Echo "

"; И меняем его: echo "

"; //Display the regular output breadcrumb bcn_display(false, $instance["linked"], $instance["reverse"]); echo "

Сохраняем файл и перезаписываем его на сервере, в результате получаем то что нам нужно.

Рис 17 –обозначение разметки BreadcrumbList

Он обозначает новую принадлежность к другому типу данных - schema.org/ListItem

А также он описывает свойство – itemListElement. Это свойство уже относится к размечаемым элементам в хлебных крошках. То есть это свойство нам нужно использовать в нашем исходном коде при выводе непосредственно хлебных крошек.

В нашем случае мы будем использовать это в плагине Breadcrumb NavXT.

В начало кода, отвечающего за хлебные кошки –

%htitle%

Мы добавим строку:

%htitle%

Нужно разметить элемент itemprop=”item”, из примера видим, что он отвечает за разметку URL адреса хлебных крошек.

Добавляем его перед href=”%link%” Получаем в итоге:

Далее размечаем свойство itemprop=”name”, то есть имя, которое соответствует нашему URL адресу, уже размещенному нами. Нам необходимо %htitle%, который в нашем случае отвечает за нужное имя – обрамить свойством itemprop=”name”.

Получаем

%htitle%

В конце нам нужно добавить обозначение позиции элемента в иерархической системе, используя свойство itemprop=”position”.

Для этого добавляем строку кода

Главное – делать все аккуратно и в пределах открытых

или

И так, исходя из имеющегося исходного кода:

%htitle%

На основе примера получается следующий код:

%htitle%

Также приведем примеры уже готовых кодов разметки для Breadcrumb NavXT.

%htitle% %htitle%

%htitle%

С Микроразметкой:

%htitle%

В итоге, после успешного добавления микроразметки, мы увидим следующие результаты проверки с помощью .

Рис 18 – валидная микроразметка хлебных крошек

Видео

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

Сниппет с микроразметкой

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

Простой сниппет

Детальный сниппет

Есть типы контента, для которых микроразметка обязательна:

видеоролики;

фильмы;

рецепты;

мероприятия;

отзывы;

товары;

программы;

рефераты;

рестораны.

Стандарты микроразметки

Яндекс рекомендует микроразметку Schema.org. Это стандарт семантической разметки, принятый в 2011 г. корпорациями Google, Yahoo и Bing для улучшения структурированности информации на сайте, передачи ее смысла поисковым роботам.

Он использует микроданные для семантической разметки документа.

Микроданные - теги, употребляемые в языке HTML5.

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

Соответствие контента и сущностей



Мероприятие
Организация

Товарное предложение
Несколько товаров




Ресторан


Картинки
Программы	SoftwareApplication
Мобильные приложения	MobileApplication
Интернет-программы

Вопросы и ответы	Question и Answer

Как делают микроразметку

Прописывают ее прямо в html-коде. Используют три основных атрибута:

Itemscope – указывает роботу о присутствии микроразметки.

Itemtype - описывает тип сущности.

Itemprop - указывает свойства сущности.

Первые два атрибута применяются совместно. Для itemprop прописывают значения разных полей. Стандартные: name, description, image, url. Другие поля - специальные и зависят от сущности контента.

Пример кода с разметкой для организации.

Проверяем корректность микроразметки в Яндексе

Еще в 2012 г. Яндекс запустил инструмент, с помощью которого можно проверить микроразметку. Валидатор доступен в «Яндекс.Вебмастер».

Нужно скопировать адрес страницы или вставить часть кода, если сайт еще не запущен.

После проверки валидатором доступен перечень несоответствий, которые делятся на ошибки и предупреждения. Яндекс публикует расшифровку результатов. Валидатор микроразметки от Яндекса - не единственный. Также можно проверить с помощью validator.ru и Structured Data Linter. Однако Яндекс поддерживает микроформаты, микроданные, RDFa, OpenGraph и рекомендуемую schema.org, а также проверяет на соответствие требованиям своих сервисов и партнерской программы.

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

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

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

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

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

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

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

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

Аватар

itemprop="name" >Аватар

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

Аватар

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

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

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

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

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

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

Упрощает жизнь роботам

Упрощает поиск человеку

Микроразметка Яндекс

Адреса и организации

Словарные статьи

Отзывы об автомобилях

Микроразметка Google

Видео

Сниппет с микроразметкой

Стандарты микроразметки

Соответствие контента и сущностей

Как делают микроразметку

Проверяем корректность микроразметки в Яндексе