Какая микроразметка лучше. Семантическая микроразметка "Яндекса": как сделать и проверить. Микроразметка помогает роботу

Какая микроразметка лучше. Семантическая микроразметка "Яндекса": как сделать и проверить. Микроразметка помогает роботу

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

Микроразметка - стандарт семантической оптимизации. Стандарт был представлен поисковиками Google, Bing и Yahoo летом 2011 года. Осенью того же года стало известно о поддержке стандарта отечественной поисковой системой Яндекс. Микроразметка позволяет роботам точнее определять и структурировать информацию на страницах сайтов. По данным Яндекса, на август 2012 года микроразметку используют порядка 10% сайтов рунета.

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

Различают такие виды разметки, как: микроформаты, микроданные и RDFа.

Микроданные

Способ разметки (актуальный в HTML5), который описывает специальные данные. Например, данная разметка может содержать отзывы, информацию о дате и времени мероприятия, человеке и т.д. Микроданные применяют простые атрибуты HTML-тегов (

, ). С их помощью присваиваются небольшие описательные имена свойствам и элементам.

Микроформаты

Это простые сущности, служащие для описания типа информации на странице. У каждой сущности есть свои свойства. К примеру, если мы описываем мероприятие, то его свойствами будет место, дата, время проведения и т.д. Микроформаты подразумевают применение атрибута class в таких тегах, как

и .

Ещё один способ разметки. Работает по той же схеме: с сущностями (и их свойствами) и элементами. Главное преимущество - расширенные возможности.

Сегодня специалисты Гугл и Яндекс рекомендуют использовать для разметки метод микроданных (Schema.org). Метод сочетает в себе простоту и широкие возможности.

О пользе микроразметки

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

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

Но давайте перейдём от абстрактного описания к примерам.

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

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


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

Что такое Schema.org?

Schema.org - набор словарей, используемых для описания объектов и сущностей на страницах сайтов. Стандарт использует микроданные.

В стандарте Schema.org есть порядка 550 классов, но их число неуклонно растёт. Некоторые классы поддерживаются сервисами Яндекса.

Пример кода для карточки товара:

Кровать Мелисса с мягкой спинкой

8 350 руб.
Цена указана за кровать Мелисса с мягкой спинкой; размером спального места 900х2000 мм. Подушки у спинки кровати изготовляются из искусственной кожи. В комплектацию входит ортопедическое основание на ножках.

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

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

Влияние микроразметки на ранжирование

В Яндексе

Разметка делает ресурс более заметным для пользователей в поисковой выдаче. Яндекс же радеет за то, чтобы пользователи получали ту информацию, которая пытались найти. Поэтому и была внедрена метрика «счастье пользователя». Если сайт с микроразметкой повышает «счастье пользователя», то он ранжируется выше.

В Google

По данным на октябрь 2012 года, Google не берёт в расчёт микроразметку для повышения позиций сайтов.

Валидатор микроразметки

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

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ...

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

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

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

Яндекс Контакты:
Адрес: Льва Толстого, 16, 119021, Москва,
Телефон: +7 495 739–70–00, Факс: +7 495 739–70–70, Электронная почта: [email protected]

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

Яндекс Контакты:
Адрес: Льва Толстого, 16 119021 Москва,
Телефон:+7 495 739–70–00, Факс:+7 495 739–70–70, Электронная почта: [email protected]

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

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

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

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

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

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

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

В мире, где правит Интернет и поисковые системы (Google, Bing, Yahoo!, Yandex, Baidu), поиск абсолютно любой информации — дело нескольких минут. Значение поисковых систем в нашей жизни сложно недооценить, поэтому неудивительно, что их развитие идет огромными темпами. Если вчера любой вебмастер мог полагаться исключительно на простую HTML-разметку, то сегодня этого будет уже недостаточно.

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

, то сегодня этим уже не обойдешься. Почему?

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

В данной статье мы поговорим о том:

    что такое микроразметка;

    какие бывают виды микроразметки;

    чем полезна микроразметка;

    как описывать данные с помощью Schema.org;

    как микроразметка влияет на поисковую выдачу и используется в поисковой оптимизации;

    что такое расширенные сниппеты для Google и Yandex и как их использовать;

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

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

О микроразметке

Словарь микроданных Schema.org появился в 2011 году, когда Google, Microsoft и Yahoo! (позже к ним присоединился и российский Yandex) решили унифицировать схемы семантической разметки. Schema.org — единый словарь тегов, который может использоваться вебмастерами для разметки страниц так, чтобы поисковые системы Google, Yandex, Bing и Yahoo! могли “читать” информацию на них.

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

    Микроданные . Используется с HTML и Schema.org для описания специальных данных. Например, если это фильм, то мы можем специально прописать его название, жанр, режиссера, актеров, рейтинг и т.п.

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

    RDFa . То же используется вместе с сущностями, свойствами и элементами. Используется не так часто, как микроданные и микроформаты, так как уступает им в функциональности.

Отметим, что в данной статье мысделаем акцент на микроданных и словаря Schema.org.

Описываем данные с помощью Schema.org

Теперь, когда Вы примерно представляете, что такое микроразметка, начнем углубляться в детали. Для начала поговорим о том, как описать данные с помощью Schema.org. Почему мы выбрали Schema.org и микроданные? Дело в том, что это наиболее популярный, надежный и эффективный способ микроразметки. Он не так сложен как RDFa и, к тому же, рекомендован Google.

Микроформаты и Schema.org

Schema.org — это словарь тегов для разметки микроданных в HTML5, в котором также присутствуют различные сущности, атрибуты и их свойства. На данном этапе, поговорим о тех основных атрибутах: itemscope, itemtype и itemprop.

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

    Itemtype . Этот атрибут работает в паре с itemscope и определяет тип выделенной сущности с помощью иерархии типов в Schema.org.

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

Теперьрассмотрим вышеописанное на конкретном примере. Предположим, что Вы хотите внедрить микроразметку на странице уже упомянутого нами фильма “Властелин колец: Возвращение короля”. Скорее всего, часть HTML-кода без микроразметки выглядит примерно так:

Властелин колец: Возвращение короля

Режиссер: Питер Джексон Фэнтези Смотреть фильм

Выделим блок, который посвящен фильму, с помощью itemscope.

Властелин колец: Возвращение короля

Режиссер: Питер Джексон Фэнтези Смотреть фильм

Теперь поисковой робот будет понимать, что всю информацию между

и
надо рассматривать как одно целое.

Властелин колец: Возвращение короля

Режиссер: Питер Джексон Фэнтези Смотреть фильм

Властелин колец: Возвращение короля

Режиссер: Питер Джексон Фэнтези Смотреть фильм

Обратите внимание, что тегами с атрибутом itemprop в большинстве случаев надо оборачивать конкретный текст. В примере выше мы добавили дополнительную пару тегов , чтобы поисковые роботы не рассматривали слово “режиссер” в качестве самого режиссера.

Что еще нужно знать о микроданных и Schema.org?

    в Schema.org есть много схем с заданными свойствами (о самых популярных из них мы поговорим ниже). Их количество постепенно увеличивается.

    основных свойств четыре (в реальности их гораздо больше — см.свойства Thing): name, description, URL и image. Дочерние сущности и схемывсегдаполучают свойства “родителей”.

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

    при разметке надовсегдаиспользовать ожидаемый тип и текст, обращайте внимание на вложенные сущности, дочерние и родительские типы. Например, у Вас есть цепочка Thing — Place — TouristAttraction. Задавая схему TouristAttraction, будьте готовы использовать свойства, принятые в данной цепочке. Если этого не делать, то поисковые системы просто не смогут “понять”, что Вы им хотели сказать.

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

Польза микроразметки и поисковая выдача. Расширенные спиппеты

Микроразметка помогает поисковым системам не только лучше отображать, но и лучше понимать, размещенную на странице информацию. Именно микроразметка дает поисковым роботам подробную “карту” того, как следует обработать и проиндексировать информацию. Именно микроразметка, в конечном счете, позволяет значительно улучшить релевантность страницы как для поисковых систем, так и для пользователей. Следовательно, улучшается и поисковая выдача. Считается, что микроразметка может увеличить поступление трафика на сайт примерно на 30%. Согласитесь, что такая поисковая оптимизация — хорошее решение!

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

Сайт в выдаче без микроразметки

Сайт в выдаче с микроразметкой

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

Расширенный сниппет для Google

Google позволяет помешать небольшое описание веб-страницы (сниппет) в выдаче. Чем детальнее и информативнее сниппет, тем легче пользователю понять, насколько содержание веб-сайта релевантно его запросу. Добиться информативности сниппета можно с помощью микроразметки микроданными со Schema.org. Например, если речь идет о веб-сайте ресторана, то с помощью микроразметки можно не только указать его название, но и добавить цены, рейтинг, время работы, адрес, фотографии блюд и т.п. В общем, расширенный сниппет просто не может повредить.

Создать расширенный сниппет для Google можно:

    выбрав формат разметки (в нашем случае это микроданные);

    проверив разметку с помощью специальных валидаторов (о них речь то же пойдет ниже).

Пример кода расширенного сниппета для Google

Пример расширенного сниппета для Google в выдаче

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

Расширенный сниппет для Yandex

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

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

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

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

Популярные схемы микроразметки

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

Итак, какие же схемы микроразметки являются самыми популярными и могут помочь SEO? Если верить данным, предоставленным компаниейSimilarTech , то получается, что самыми популярными в мире являются схемы:

  • AggregateRating Schema

  • SearchAction Schema

    MobileApplication Schema

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

Offer Schema

На русский язык “offer” переводится “предложение”. Фактически, суть Offer Schema состоит в предложении чего-то. Например, сайт предлагает купить такую-то книгу или фильм, арендовать квартиру, посмотреть сериал онлайн, отремонтировать машину и т.п. Одно из таких предложений Вы можете увидеть на расширенном сниппете ниже.

Пример сниппета

Offer Schema является дочерней сущностью Intangible, которая, в свою очередь, закреплена за самой общей сущностью Thing.

WebPage Schema

WebPage Schema, как можно догадаться, является схемой микроразметки для отдельной веб-страницы. В Schema.org предполагается, что эта схема может “захватывать” некоторые присущие странице свойства (например, breadcrumb — хлебные крошки). Даже если свойство не выделено в блоке микроразметки с помощью itemscope, но находится на странице, то поисковые боты все равно “поймут”, что оно относится к блоку. Отметим, однако, что лучше задавать свойства отдельно.

WebPage Schema является дочерней сущностью CreativeWork, которая, в свою очередь, закреплена за самой общей сущностью Thing.

AggregateRating Schema

AggregateRating Schema — это средний рейтинг сайта или веб-страницы, который вычисляется на основе различных оценок и отзывов, оставленных клиентами и пользователями. Отображается в виде звездочек; рядом указывается количество отзывов, на основе которых вычислен рейтинг. Из этого следует, что AggregateRating Schema всегда используется в паре с Review Schema. Смотри расширенный сниппет ниже.

Пример сниппета

AggregateRating Schema является дочерней сущностью Rating.

Product Schema

Product Schema — популярная схема, которая используется для отображения конкретного товара или услуги. Например, это может быть пара ботинок, билет на концерт, автомобиль, серия сериала или фильм и т.п. Смотри расширенный сниппет ниже.

пример сниппета

Product Schema является дочерней сущностью Thing.

Review Schema

Review Schema — это схема для информативного отображения отзывов на товар, услугу, фильм, альбом, магазин, ресторан и т.п. Смотри расширенный сниппет ниже.

пример сниппета

Review Schema является дочерней сущностью CreativeWork, которая, в свою очередь, закреплена за самой общей сущностью Thing.

Rating Schema

Rating Schema позволяет отобразить рейтинг сайта или веб-страницы в цифровом выражении. Например, рейтинг такого-то ресторана — 3,5 звезды, а такого-то магазина — 4 звезды. В отличие от AggregateRating, Rating вычисляется только на основе оценок и без учета отзывов.

Rating Schema является дочерней сущностью Intangible, которая, в свою очередь, закреплена за самой общей сущностью Thing. Rating — родительская схема для AggregateRating Schema.

SearchAction Schema

SearchAction Schema позволяет совершить поиск по ресурсу прямо из выдачи. Топовые сайты в США делают акцент именно на этой схеме (по даннымSimilarTech). Смотри расширенный сниппет ниже.

пример сниппета

SearchAction Schema является дочерней сущностью Action, которая, в свою очередь, закреплена за самой общей сущностью Thing. SearchAction — родительская схема для FindAction Schema.

MobileApplication Schema

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

Mobile Application Schema является дочерней сущностью SoftwareApplication, которая, в свою очередь, является дочерней сущность CreativeWork, а та закреплена за Thing.

WebSite Schema

WebSite Schema — схема для отображения набора связанных веб-страниц или других элементов, которые размещены на едином веб-домене и имеют один URL.

WebSite Schema является дочерней сущностью CreativeWork, которая, в свою очередь, закреплена за самой общей сущностью Thing.

Валидация и проверка микроразметки на Schema.org

Разметка на Schema.org нуждается в тестировании и проверке так же, как и верстка веб-страницы и код какой-либо программы. Рекомендуем всегда проводить валидацию разметки, ведь именно от нее зависит то, насколько эффективно поисковые боты “прочитают” контент сайта. Корректность разметки можно проверить с помощью следующих инструментов:

    Structured Data Testing Tool . Этот инструмент от Google прост в использовании и позволяет довольно быстро проверить разметку как на целом сайте, так и в части HTML-кода.

    Валидатор микроразметки . Этот инструмент от Yandex работает так же, как и вышеописанный Structured Data Testing Tool: введите URL сайта или часть HTML-кода, нажмите кнопку “Проверить” и наслаждайтесь.

    Structured Data Linter . Этот инструмент в целом похож на два вышеописанных. Единственным отличием является возможность загружать файл с HTML-кодом сайта для анализа.

Надеемся, что эти инструменты принесут Вам пользу.

Вывод

Итак, что можно сказать напоследок? Микроразметка уже здесь, ей активно пользуются все больше и больше вебмастеров и SEO специалистов для более грамотной и эффективной поисковой оптимизации. Микроразметка хороша для всех: пользователь получает доступ к более релевантной и структурированной информации; поисковые боты лучше “читают” и индексируют сайт; вебмастер и SEO специалист получают удовольствие от возросшего трафика и большего количества правильных посетителей.

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

С чего начать? Если Вы читаете данную статью, то, думаем, очевидно, что начать надо с 9 схем микроразметки, которые были описаны выше. Если у Вас нет времени на все 9, то остановитесь хотя бы на самых нужных для Вашего бизнеса. Например, если Вы держите Интернет-магазин, то логичнее будет начать с Offer, Product, Review, Rating и SearchAction. Если Вы владеете корпоративным сайтом, то начните с WebSite и WebPage. В общем, решать Вам.

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

Сегодня грамотная и успешная поисковая оптимизация во многом зависит от микроразметки, так что не теряйте времени даром. Спасибо, что были с нами!

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы тоже уже запарились разбираться в устройстве сайта Schema.org и в том, как использовать его монструозный список для создания микроразметки на собственном сайте? Тогда эта подробная и доходчивая статья раз и навсегда прояснит все для вас, и вопросов больше не останется. Гарантирую!

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

Ну, смотрите сами: вот я хочу разобраться, как мне добавить микроразметку на свою страницу со статьей. Я захожу на сайт Schema.org, перехожу в раздел Schemas , далее по ссылке Full list of types, shown on one page и получаю огромный список сущностей (Thing):

И что дальше? Среди этих шести свойств явно чего-то не хватает, а именно: названия статьи, автора, даты написания и пр. Есть какие-то невнятные articleBody , articleSection , pageEnd и т.д. Ну, и что мне с этим делать? Если кликнуть по свойству, то ничего нового не обнаружишь:

И так по всему списку. Абсолютно не дружественный интерфейс, заточенный, разве что, под труЪ программистов, которым все ясно с полуслова, причем нерусского.

Гуд! Давайте разбираться, что здесь и с чем едят, на этом Schema.org. Чтобы все непонятки исчезли, а поисковики погладили нас по головке за использование микроразметки на нашем сайте, потому что это кошерно.

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

Зачем нужна микроразметка и при чем тут Schema.org

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

На странице Яндекс.Вебмастер, посвященной микроразметке , приводится вполне наглядный пример куска страницы сайта без разметки и с разметкой:

Почувствуйте, как говорится, разницу. Если не почувствовали, объясняю: без микроразметки бот поисковика не может сам определить, о чем конкретно идет речь на странице сайта. Слово «аватар» может иметь массу значений. Чтобы дать понять поисковому роботу, что в статье говорится о конкретном фильме, мы добавляем специальные метки и объявляем, что все они относятся к сущности типа Фильм (Movie).

В документе с разметкой добавлена куча нейтральных тэгов span с различными атрибутами вида itemprop="" . Здесь есть также два непонятных атрибута: itemscope и itemtype и добавлена ссылка на раздел Movie того самого сайта schema.org. Окей! перейдем по этой ссылке и посмотрим, что там есть:

Еще один список свойств (Properties), но среди них есть всего лишь два из тех, что использованы в примере Яндекса - director и trailer . Где же остальные: name и genre ? Яндекс, что ли, сам их придумал?

Дело в том, что у schema.org есть определенная иерархия, и ее можно видеть как раз на странице с общим списком всех сущностей (Thing). Здесь пора уже пояснить, что это такое - сущность.

Сущность (Thing) в Schema.org означает какую-то конкретную вещь, причем самим словом Thing можно обозначить любую из возможных вещей. В нее вложены все остальные типы вещей. Не все на свете, разумеется, но чаще всего используемые для описания в интернете: статьи, новости, события, личности, книги, программы и т.д.

Каждая из вложенных вещей может содержать свой «набор» сущностей похожего типа. Например, в сущность с именем Событие (Event) могут входить события разного вида: бизнес-события, детские мероприятия, фестивали, музыкальные тусовки и пр.

Ясное дело, что если сущности имеют иерархию, то есть, своеобразную вложенность, то они вполне могут перенимать свойства (Properties) от своих родителей. Сущность Фестиваль перенимает свойства от сущности Событие, а также перенимает свойства самой главной в списке сущности - Thing .

Теперь вы понимаете, откуда Яндекс взял недостающие свойства name и genre для примера микроразметки фильма? Свойство genre есть у родительской сущности CreativeWork , в которую вложена Movie ; а свойство name есть у самой главной сущности Thing , в которую входит сущность CreativeWork . Все просто!

Таким образом, мы можем использовать свойства как конкретной сущности, так и ее родителей. По сути, на странице любой вложенной сущности на сайте Schema.org выложен список свойств не только ее самой, но и родительских. Просто проматывайте страницу вниз, и вы увидите их последовательно.

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

Почему Schema.org?

Так почему именно Schema.org, а не кто-либо другой? Кто вообще такие эти ребята? Как говорит Википедия , это инициативная группа товарищей от крупнейших поисковых систем Google, Yahoo!, Bing и Яндекс, которые в 2011 г. решили добавить к специальный набор семантических же метаданных, что должно улучшать результаты поисковой выдачи.

В качестве основного формата разметки веб-страницы метаданными разработчики schema.org предлагают микроразметку - теги и атрибуты для разметки структурированной информации на веб-страницах, появившиеся в стандарте HTML5.

Что такое itemscope и itemtype и для чего они нужны

C itemprop - Свойством (Properties), надеюсь, вы уже разобрались. Кто еще не понял - это самая мелкая деталь микроразметки, обозначающая конкретное свойство объекта. Например:

Джеймс Кэмерон

Эта строка просто говорит, что товарищ по имени Джеймс Кэмерон не грузчик с Привоза, а настоящий Режиссер.

itemtype - означает конкретную сущность, которую мы описываем при помощи микроразметки. Например, Фильм (Movie).

itemscope - означает Сущность вообще. Это атрибут просто говорит поисковикам, что здесь есть какая-то сущность с микроразметкой и им, поисковикам, следует на это обратить внимание.

Обычно эти два атрибута пишутся один за другим и добавляются оба-два какому-нибудь блоку DIV на сайте. Сначала идет itemscope , а за ним itemtype + добавляется ссылка на раздел конкретной сущности в Schema.org:

Сущности могут быть вложены одна в другую. Например, в более крупную сущность Article могут входить другие сущности, вроде NewsArticle , Report и др. Часто глобальные сущности вроде Article добавляют прямо к тэгу body на странице сайта:

Остальные сущности добавляются по мере их появления на странице. Каждая конкретная сущность также предваряется атрибутами itemscope itemtype . Соответственно, на странице сайта таких конструкций может быть несколько, и они должны соблюдать вложенность - все как и с обычными тэгами HTML.

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

Микроразметку можно добавить непосредственно в HTML код страницы, а можно воспользоваться сторонними плагинам для CMS типа WordPress и др.

Для привязки атрибутов itemscope , itemtype и itemprop можно использовать уже имеющиеся HTML тэги блоков, абзацев текста, ссылок и списков, а можно добавлять нейтральные тэги span .

Если нужно в микроразметку добавить свойство url (ссылка), но не изображать ее как ссылку, можно воспользоваться тэгом link . Посетители увидят ее просто как текст, а поисковый бот прочтет ее, как нужно.

Некоторые ушлые вебмастера используют тэг meta в теле страницы. Тэг meta , Карл!!! Я не советую этого делать. Во-первых, это тэг заголовка страницы head и там ему самое место. А во-вторых, поисковики не жалуют за это, так что бдите.

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

Насколько подробно стоит делать микроразметку на сайте?

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

Поисковики похвально относятся к микроразметке, но так же внимательно следят и за скоростью загрузки страниц. Если количество вашей микроразметки в 5 – 10 раз превышает количество полезного содержимого на странице, то скорость загрузки может значительно снизиться. Ведь каждая конструкция itemscope itemtype посылает на сайт schema.org и тащит оттуда необходимые инструкции.

Поэтому развлекайтесь с микроразметкой, как угодно, но знайте меру!

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

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

Если вы чего-то нахомутали, то валидатор выдаст соответствующее сообщение(я). Либо Ошибку, либо Предупреждение, либо и то и другое вместе. Читайте их, вникайте и тут же исправляйте. Ошибки следует исправлять обязательно, на предупреждения можно забить, но лучше тоже исправить, от греха подальше.

Как сделать микроразметку в шаблоне WordPress

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

Микроразметку добавить в шаблон WordPress не просто, а очень просто! Возьмем, к примеру, страницу с отдельными постами, которые обычно выводятся шаблоном single.php . Все что нужно, это внедрить следующие куски кода по месту:

itemscope itemtype=http://schema.org/Article – добавить в тэг DIV с атрибутом post или entry;

itemprop="name" – добавить в тэг h1 или h2 ;

itemprop="url" – добавить в тэг h1 или h2 вместе с тэгом link . Пример:

itemprop="author" – добавить в кусок кода, выводящий имя автора. Пример:

itemprop="datePublished" – дата публикации в формате "Y-m-d" . Пример:

itemprop="articleBody" – вставляем в блок вывода текста статьи;
itemprop="articleSection" – вывод рубрики;
itemprop="image" – ссылка на картинку к посту;
и т.д.

Более толково весь этот процесс расписан Рекомендую!

Я надеюсь, теперь вы легко сможете разобраться в микроразметке Schema.org.

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

Оставайтесь на связи!



© 2024 beasthackerz.ru - Браузеры. Аудио. Жесткий диск. Программы. Локальная сеть. Windows