Страницы Интернета

В мире, где правит Интернет и поисковые системы (Google, Bing, Yahoo!, Yandex, Baidu), поиск абсолютно любой информации — дело нескольких минут. Значение поисковых систем в нашей жизни сложно недооценить, поэтому неудивительно, что их развитие идет огромными темпами. Если вчера любой вебмастер мог полагаться исключительно на простую HTML-разметку, то сегодня этого будет уже недостаточно. Поисковые машины становятся умнее и предъявляют повышенные требования не только к тому, как должна быть отображена та или иная информация, но и к тому, какой смысловой посыл она несет. Например, если раньше было достаточно прописать <h1>Властелин колец: Возвращение короля</h1>, то сегодня этим уже не обойдешься. Почему? Дело в том, что человек быстро сообразит, идет ли в данном случае речь о фильме, о книге, об изображении и т.п., а вот поисковая система справится с этим не так легко и, следовательно, будет не так эффективно искать информацию, адекватную запросу пользователя. Чтобы решить проблему понимания информации поисковыми системами, используется микроразметка с помощью микроданных со словарем Schema.org. В данной статье мы поговорим о том:

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

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

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

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

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

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

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

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

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

<div>

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

       <span>Режиссер: Питер Джексон</span>

       <span>Фэнтези</span>

       <a href=”ссылка”>Смотреть фильм</a>

</div>

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

<div itemscope>

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

       <span>Режиссер: Питер Джексон</span>

       <span>Фэнтези</span>

       <a href=”ссылка”>Смотреть фильм</a>

</div>

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

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

<div itemscope itemtype=”http://schema.org/Movie”>

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

       <span>Режиссер: Питер Джексон</span>

       <span>Фэнтези</span>

       <a href=”ссылка”>Смотреть фильм</a>

</div>

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

<div itemscope itemtype=”http://schema.org/Movie”>

       <h1 itemprop=”name”>Властелин колец: Возвращение короля</h1>

       <span>Режиссер: <span itemprop=”director”>Питер Джексон</span></span>

       <span itemprop=”genre”>Фэнтези</span>

       <a href=”ссылка” itemprop=”movie”>Смотреть фильм</a>

</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример

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

Пример

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

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

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

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

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

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

Вывод

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

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

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

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

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