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

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

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

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

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

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

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

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

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

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

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

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

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

Итоговый код

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

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

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

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

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

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

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

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

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

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

Итоги

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

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

Собственно говоря, HTML так и называется «гипертекстовый язык разметки». Его можно назвать языком «макроразметки» - разметки контента всего содержимого web-страницы.

Свои требования к разметке предъявляют и поисковые системы - Яндекс и Google. Требование можно сформулировать так: организация содержимого, облегчающее анализ страницы. Чем строже будет организовано содержимое, тем точнее и быстрее поисковый робот проводит свою работу, тем успешнее индексация и продвижение сайта.

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

Для пользователя следствием удачного применения микроразметки является более полный сниппет (превью сайта) в результатах поиска. У хорошо размеченных сайтов выше кликабельность (CTR) в поисковой выдаче. Это значит вы будете получать больше органического трафика и ваши позиции будут расти за счет этого.

Для осуществления разметки используются специальные атрибуты в рамках HTML-кода. Вся необходимая информация собирается в одном html-файле без привлечения внешних ресурсов. Приводим пример микроразметки, предлагаемой Google (здесь тема сайта «Картинки»):

Яндекс использует несколько отличную от Гугл систему микроразметки:

Сравните тот же самый код страницы, но уже без микроразметки:

5 популярных форматов микроразметки:

Все форматы находятся в постоянном развитии, и пока уникальная разметка существует не для всех сфер.

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

Как внедрить микроразметку?

Механизм применения микроразметки на примере формата Schema.org. Три шага:

1. Описание заключается в контейнер – ему присваивается имя и тип:
   
   
   …
   
2. Внутри контейнера происходит описание конкретного свойства.
3. Вне контейнера в конкретных точках применения происходит разметка информации со ссылкой на конкретное свойство схемы:
   Александра Пушкина, 114

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

Так как объём информации по каждой теме довольно широк, возникает необходимость её проверки на соответствие стандартам. Яндекс, и Google, имеют специальные валидаторы для проверки микроразметки на сайте.

Проверка микроразметки в Яндекс Вебмастере

Перед нами вся необходимая информация для проведения анализа:

Теперь, в многостраничном поле ввода под двухцветным заголовком «URL документа или вставьте фрагмент HTML-кода» размещаем адрес проверяемой страницы.

Тут возникает только одна проблема – страница должна содержать эту самую микроразметку. Если микроразметки нет, то под заголовком «Результат проверки» просто показывается сообщение, что разметка на странице не обнаружена.

Запуск проверки проводится кнопкой «Проверить» или комбинацией горячих клавиш Ctrl + Enter.

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

Если вы просто ввели HTML-код страницы, то результат работы будет представлен адресом локального хоста:

Если у вас возникают вопросы по поводу сервиса валидации микроразметки Яндекса, то можно обратиться к страницам помощи, которые служба размещает по адресу: https://yandex.ru/support/webmaster/yandex-indexing/validator.xml

Валидатор Яндекса кроме полной проверки пяти перечисленных форматов микроразметки, проверят также формат специально размеченных данных и специальные сниппеты.

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

• Страница не может быть загружена для анализа;
• Микроразметка не обнаружена – может произойти по двум причинам – или разметки действительно нет, или она неверно оформлена;
• Отсутствие необходимого поля – это уже элемент именно проверки, например, при описании картинки не указан её адрес;
• Невозможно определить чему принадлежат некоторые поля – обычно они выходят за свою разметку;
• Не выполнены условия организации сниппетов;
• В свойстве “content” meta-тега находится ссылка, что недопустимо.

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

• Некорректное значение поля – например, некорректный формат даты;
• Неверно задан тип данных – обращаем внимание, что наряду со стандартными типами, определёнными W3C, Яндекс определяет и некоторые свои типы;
• Отсутствие разметки, которая должна использоваться вместе с используемой.

Как результат успешно проведённой Яндексом валидации – в результатах поиска Яндекса страница будет представлена структурированным сниппетом. Это обычно происходит через 10-14 дней.

Проверка микроразметки в Google

Аналогичным образом проводится валидация микроразметки в Google: https://developers.google.com/structured-data/testing-tool/

Схема расстановки микроразметки, на которую ориентируется Google, называется Schema.org. Во многом идея работы «американца» ничем не отличается от работы российского варианта валидации.

Как видим, здесь тоже есть возможность ввести адрес проверяемой страницы или непосредственно html-код.

Запуск проверки производится кнопкой «Запустить тест». Несмотря на то, что оба валидатора работают по одной схеме Schema.org, результаты их работы несколько отличаются. Вот результат работы Google:

Практика показывает, что валидатор Google предъявляет менее строгие требования к разметке и находит меньше ошибок. Более того, Гугл не информирует владельца сайта, через какой промежуток времени разметка вступит в силу и будет видна в результатах поиска.

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

Google с Яндексом не дают веб-мастерам спокойно спать - то они вводят новые способы ранжирования сайтов в выдаче – из последних, учет адаптивности шаблона на сайте.
То перестают учитывать ссылочное при ранжировании или вводят какие-то очередные фильтры.
А теперь, дошла очередь до семантической разметки сайта.
Вообще, для Google с Яндексом микроразметка и микроформаты – это основная тенденция в этом году.
Собственно, ее стандарт появился еще в 2011 году, но, если ранее ПС предлагали добавить ее на сайт добровольно, то теперь добровольно-принудительно:), поскольку сайты, не имеющие ее, стали индексироваться хуже, им сложнее попасть в топ выдачи.

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

«Вот это у меня название статьи, а это изображение, а вот тут идут комментарии.
Это имена комментаторов, а это я, автор сайта, собственной персоной. Не перепутай ничего!».

Из документации Яндекс о микроразметке сайтов:

2. Зачем нужна семантическая разметка сайта?

Она помогает выстроить структурированную иерархию всех данных страницы для поисковых роботов, а также роботов социальных сетей, что улучшит представление сайта в результатах поиска.
Размеченная таким образом страница станет более понятной и прозрачной для роботов всех ПС.
Хотя, представители Яндекса утверждают, что наличие семантической разметки не влияет на позицию сайта, но опыт и наблюдения показывают, что размеченный сайт индексируется ПС намного быстрее и качественнее, а в выдаче показывается на 3-5 позиций выше не размеченных сайтов.
Такая разметка полезна для коммерческих сайтов (всяких-разных сервисов, интернет-магазинов, ресторанов). Также, она помогает продвижению корпоративных веб-ресурсов, самых различных сайтов и блогов.
Сравните сниппеты в выдаче Гугл и Яндекс с микроразметкой и без нее:
Микроразметка Google, рейтинг:




Первый сниппет показывает хлебные крошки, рейтинг, дату публикации.
Микроразметка Яндекс для организаций:




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




Первый сниппет показывает хлебные крошки, дату публикации.
Микроразметка Яндекс, рецепты:




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

3. Какую пользу приносит использование семантической разметки?

1. Лучшую, более быструю индексацию новых статей и сайта в целом.
2. Увеличение доверия к сайту со стороны ПС.
3. Лучшие, более информативные сниппеты в выдаче – за счет показа дополнительной информации: рейтинга, цены, контактных данных (адреса, телефона) и т.п.
4. Улучшение поведенческих факторов сайта (больше переходов из поисковой выдачи).

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

4. Виды микроразметки

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

Подписаться

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

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

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

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

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

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

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