Полное руководство по работе со структурированными данными. Что такое микроразметка и какие типы микроразметки поддерживают Яндекс и Google Микроразметка главной страницы

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

Но вначале разберемся с главным.

Что такое микроразметка и как ее внедрять?

Микроразметка — своего рода единый язык, который одинаково понимают и трактуют поисковые роботы Google, Яндекс, Bing, Yahoo. Об этом они «договорились» еще в далеком 2011 году. Язык этот состоит из специальных тегов (например , ) и их содержимого. С помощью микроразметки можно показать роботам, что определенный текст или другие элементы на странице важны и принадлежат к определенному типу данных (поисковые роботы еще несовершенны в трактовке смысла контента и расстановке приоритетов).

Например, на странице «О нас» или «Контакты» компании стоит выделить микроразметкой блок с контактными данными — в таком случае на запрос пользователя «контакты компании N» робот безошибочно покажет нужную страницу и нужные данные.

Другой пример. Допустим, мы хотим, чтобы роботы поняли: эта маленькая картинка сверху — логотип компании.

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

Словарь микроразметки.

Тип данных. В нашем случае — “Organization”.

URL-адрес ресурса.

URL-адрес логотипа.

Получаем фрагмент микроразметки для логотипа:

{ "@context": "http://schema.org", "@type": "Organization", "url": "http://www.example.com", "logo": "http://www.example.com/images/logo.svg?3" }

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

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

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

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

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

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

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

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

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

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

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

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

Также существует неофициальный и пока неполный перевод стандарта на русский язык на сайте: 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 Инструменты внедрения микроразметки Как Яндекс использует размеченные данные

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

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

Вы тоже уже запарились разбираться в устройстве сайта 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 . Пример: