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

03.08.2019

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В мире, где правит Интернет и поисковые системы (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. В общем, решать Вам.

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

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

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

Что такое семантическая разметка?

Подходящего определения на просторах Интернета мне найти не удалось, поэтому я его решил составить его из 4 наиболее подходящих определений.

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

Получилось немного замудрено… Однако из данного определения мы понимаем, что семантическая разметка - это некие правила, подчиняющиеся определенным стандартам или словарям. Которые, в свою очередь, призваны помочь поисковым системам (и не только) понимать содержимое страниц сайтов.

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

Виды разметки данных

    Data Vocabulary - стандарт разметки данных, которая разрабатывала компания Google до июня 2011 года.

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

    Dublin Core, или Дублинское ядро - стандарт, разработанный в 1995 году. Семантика Дублинского ядра была создана международной междисциплинарной группой профессионалов библиотечного и музейного дела, компьютерных наук. Представляет собой набор из метатегов, 15 основных и 3-х дополнительных свойств.

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

    FOAF, или Friend of a Friend - «друг друга» - стандарт, созданный Либби Миллером и Дэном Брикли в 2000 году. Используется в основном для домашних страниц и социальных сетей. Решает задачу построения связей между людьми и объединению их.

    Microformats, или же микроформаты - стандарт, созданный в 2005 году сообществом заинтересованных энтузиастов из WC3.

    Данный стандарт был очень популярным до появления Schema.org и на многих сайтах используется до сих пор. На момент написания статьи Яндекс поддерживает следующие Microformats: hCard - формат разметки контактов (адресов, телефонов и т.д.); hRecipe - формат описания кулинарных рецептов; hReview - формат разметки отзывов.

Вроде со стандартом определились, с синтаксисом тоже.

Для начала определимся, какая основная цель разметки. Если вы прочитали статью о том, что с разметкой вам гарантировано место в топ-10, то это не так. Цель микроразметки - улучшить понимание сайта в глазах робота, отправить в базы знаний поисковых систем информацию, повысить CTR вашего сниппета (что косвенно может увеличить и ваш трафик и позиции). Но надо понимать, что это всё косвенные показатели. Сайты с использованием микроразметки и без неё ранжируются одинаково.

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

Более подробно разберем три наиболее встречаемых примера:

Разметка карточки товаров schema.org

Товарные карточки - размечаем по сущности Product. Реализация данного вида поможет получить нам следующий сниппет в Яндексе:

Не путать с товарным сниппетом в выдаче Яндекса, полученным при использовании.yml файла из Яндекс.Маркета или сервиса «Товары и цены» вебмастера Яндекса.

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

У кого есть подобная проблема на кулинарных сайтах, возможно, у вас такая же причина. Каждый раз убеждаюсь, что справка - наше всё.)) Также хочется отметить качество саппорта Яндекса, выразить благодарность за оперативные ответы - переписка происходила практически в реальном времени.

Теперь перейдем к реализации разметки кулинарных сайтов.




40 мин.

Название рецепта



Порций 6


……………………И т.д ингредиенты……………………………



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











2100




.....




В Гугле наш красивый сниппет:

Мы разместим скриншот снипетта в Яндексе, когда информация обновится (ориентировочно через две недели).

UPD от 05.06.2017: Как и обещали, добавляем скрин из Яндекса:

Полезные ресурсы о schema.org

  1. Валидаторы микроразметки:
    • Валидатор от Яндекса https://webmaster.yandex.ru/tools/microtest/
    • Валидатор от Google https://search.google.com/structured-data/testing-tool/
  2. Поддерживаемые стандарты и форматы Яндекса: https://yandex.ru/support/webmaster/site-content/data-transmit.xml
  3. Ускорить появление размеченной информации в Google вам поможет инструмент « ».
  4. Посмотреть, как выглядит определенная страница в выдаче, вам поможет оператор site:адрес проверяемой страницы. Работает как в Google, так и в Яндексе.
  5. Также от компании Гугл есть прекрасный инструмент «Мастер разметки структурированных данных» - https://www.google.com/webmasters/markup-helper/?hl=ru
  6. Для стандарта Open Graph от компании Facebook:

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


История «рождения» микроразметки

Словари для микроразметки начали создаваться сразу двумя разными источниками: Open Graph и Schema.org. Родоначальниками Open Grapf стали сотрудники facebook. Основная цель, которую они преследовали создавая данный словарь - сделать так, чтобы любой сайт мог быть частью социальной сети facebook и корректно в ней отображаться. Равным образом Schema.org создавалась поисковыми системами для того, чтобы можно было делать удобные сниппеты с данными.

Так что же такое микроразметка?

Микроразметка — единый язык семантической оптимизации, который одинаково понимают и интерпретируют поисковые роботы Google , Яндекс , Bing , Yahoo . Этот язык включает в себя определённые специальные теги, например, такие как

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

Например, на странице « Контакты » компании X стоит обозначить микроразметкой блок с контактными данными. Тогда, на запрос пользователя «контакты компании X» робот безошибочно покажет нужную страницу и нужные данные. Грамотное продвижение сайта - залог эффективного привлечения клиентов .

Начнем со словарей

Как уже упоминалось выше, наиболее распространенными словарями микроразметки являются Open Graph и Schema.org .

По статистическим данным Яндекса известно, что словарь Open Graph используют 15% всех сайтов рунета. Этот показатель является преобладающим среди всевозможных словарей для микроразметки. Сегодня разметку Open Graph понимает не только facebook, как это планировалось сначала, но и многие другие популярные социальные сети, такие как Google+, Twitter, Вконтакте и т.д. На своем официальном сайте создатели Open Graph заявляют, что создание данного словаря - это возможность представления данных веб-страницы как социальных граф. Стоит отметить, что язык строился на основании уже существующих технологий.

В свою очередь, язык микроразметки Schema.org создавался совместно с крупнейшими поисковыми компаниями Google, Yandex, Bing, Yahoo!. Основная цель, которую преследовали разработчики - дать пользователю возможность увидеть в сниппете выдачи дополнительные данные о компании не заходя на сайт, и, таким образом, сделать поиск более быстрым и удобным. Со Schema.org сниппет содержит более полное описание страницы, может включать рейтинг, выводить стоимость «от и до», включать разметку хлебных крошек и т.д.


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

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

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

  • itemscope - описывает каждый блок отдельно, позволяет описать информацию на уровне сущности;
  • itemtype - указывает тип сущности;
  • itemprop - позволяет указать дополнительные свойства. Например, сущность — кинопремьера. В таком случае можно указать название, дату, место проведения.

Помимо Open Graph и Schema.org . существуют и другие, менее популярные словари:

  • FOAF (Friend of a Friend) - словарь основан на идее связей между людьми, вещами, их отношением друг к другу;
  • Data-Vocabulary.org - словарь разрабатывался командой Google до Schema.org. На сегодня разработка данного словаря остановлена, а разработчики Data-Vocabulary.org перешли в Schema.org;
  • Dublin Core - словарь, созданный для библиотечных нужд в далеком 1995 г., имеет набор базовых параметров;
  • Good Relations - словарь, созданный для описания товаров из сферы торговли в интернете, позволяет описывать товар, его цену, место, где его можно приобрести.

Микроразметка для разных типов сайта

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

Интернет-магазин

Как правило, интернет-магазин состоит из каталога товаров/услуг, продуктовых страниц, информации о доставке и оплате, контактов. Разместив эти данные в сниппете , можно не только улучшить представление пользователя о товаре/услуге на этапе поиска, но и повысить вероятность того, что он перейдёт на сайт интернет-магазина.

Товарные страницы

В Schema.org для разметки товарных страниц используются схемы Product и Offer или AggregateOffer в Schema.org/Product . Информация продуктовых страниц может быть представлена в виде структурированных сниппетов с описанием товара и ценой в выдаче Яндекса.

Для этого необходимо в коде указать поля name, offers, price, pricecurrency и т.д. Например:

Контакты

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

Отзывы

Если на страницах товаров есть отзывы, их также можно разметить при помощи свойства AggregateRating в Product . В результате в выдаче Google в сниппете появится рейтинг и отзывы:

Код выглядит следующим образом:

Картинки

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


Код выглядит следующим образом:


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

Информационные порталы и СМИ

Микроразметка для СМИ - чрезвычайно значимый элемент оптимизации. Информационные и новостные ресурсы проходят ранжирование и индексацию специальными быстророботами. Чтобы ускорить этот процесс используют семантическую разметку.

Новостные страницы в большинстве своем используют мультимедийный контент. Поэтому, наиболее часто используемый язык микроразметки Schema.org/Article размечается следующими атрибутами:

  • itemscope itemtype=http://schema.org/WPHeader - указывает на общий контент;
  • itemscope itemtype=http://schema.org/Article - указывает на тело статьи;
  • itemprop=»name» - обозначает заголовок;
  • itemprop=»author» - авторство;
  • itemprop=»datePublished» (Обязательно время в формате «Y-m-d») - дата публикации;
  • itemprop=»articleBody» - текст статьи;
  • itemprop=»articleSection» - рубрика;
  • itemprop=»image» - изображение.

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

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

Соответственно, код будет представлен следующим образом:

Также, не стоит забывать, что не всегда пользователи ищут фильм конкретно по названию. В поисковую строку они могут вводить имя актёра или режиссёра, к примеру. Поэтому, для того, чтобы сайт показывался в выдаче по данным запросам, необходимо использовать разметку Schema.org/Movie , которая позволит получить структурированный сниппет в Яндексе. Для этого необходимо указать подробные данные о фильме: название, жанр, описание, актеров и т.д.


Коммерческий сайт

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


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


Адекватность семантической разметки на страницах сайта можно проверить при помощи Валидатора микроразметки от Яндекса или Google . Они поддерживают все известные форматы микроразметки, в том числе OpenGraph и Schema.org.

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

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

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

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

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


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

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

    ​ фильмы;

    ​ рецепты;

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

    ​ отзывы;

    ​ товары;

    ​ программы;

    ​ рефераты;

    ​ рестораны.

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

Яндекс рекомендует микроразметку 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, а также проверяет на соответствие требованиям своих сервисов и партнерской программы.

Похожие статьи