Микроразметка страницы контактов. Что такое микроразметка и как ее проверить. Что такое структурированные данные

15.02.2019

Аудио

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

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

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

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

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

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

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

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

Валидация и проверка микроразметки на 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. Он включает в себя несколько классов, которые описывают разнообразные схемы и их особенности. Составление разметки осуществляется в два захода:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Микроразметка помогает роботу

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

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

Микроразметка помогает пользователю

Благодаря данным из микроразметки формируется расширенное описание (сниппет) документа в результатах поиска, что в свою очередь делает ваш сниппет полезнее и привлекательнее для клика, а значит, увеличивает CTR.

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

Сниппет страницы без микроразметки:

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

Косвенное влияние микроразметки на ранжирование сайта подтверждает и сам Яндекс:

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

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

В 2011 году мировые поисковые системы приняли schema.org за единый стандарт семантической разметки. В связи с этим рассмотрим этот стандарт более подробно.

Schema.org представляет собой набор классов, описывающих различные схемы и их свойства. Формирование разметки происходит в два этапа:

Указание схемы разметки.
Указание отдельных свойств схемы.

Рассмотрим пример формирования схемы «Адреса и организации» .

Без разметки:

Указываем схему, которую мы хотим использовать:

Itemscope обозначает, что код в блоке

…

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

, представляет собой адрес организации (Organization). Подробнее о схеме можно прочитать .

Описываем свойства схемы:

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

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

Сегодня Яндекс и Google поддерживают не все сущности, представленные в schema.org, но список постоянно пополняется.
Ниже представлена таблица схем, которые поддерживают Google и Yandex:

Рассмотрим некоторые примеры разметки отдельно для Yandex и Google.

Примеры разметки по схемам, поддерживаемым Яндекс

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

Эта схема разметки подойдет почти всем сайтам, на которых есть адрес организации. Используя эту разметку и участвуя в сервисе «Яндекс.Справочник», можно улучшить отображение сниппета в результатах поиска:

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

Если сайт справочного или словарного типа, то размечая страницу по этой схеме, можно принять участие в программе «Яндекс.Словарей» (подробнее ), что улучшит отображение сниппета:

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

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

И в результатах поиска:

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

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

У Google таких ограничений нет. Например, схема Review будет работать не только для автомобильных сайтов (как у Яндекса), но и для любых ресурсов, которые содержат отзывы.

Примеры разметки по схемам, поддерживаемым Google

Отзывы

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

Пример сниппета отдельного отзыва:

Пример сниппета сводного отзыва:

Мероприятия

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

Товары

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

Такой сниппет становится заметнее и будет привлекать больше покупателей.

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

Полезные инструменты

Для удобства формирования разметки есть специальные инструменты.

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

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

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

Еще по теме:

Евгений Аралов

SEO-аналитик сайт

Продвигаю сайты с 2009 года.

Выступал на конференциях AllInTop, Optimization

Публикую полезные статьи на различных блогах: сайт, optimizatorsha.ru, searchengines.ru и веду Telegram-канал.

Сейчас руковожу SEO-отделом в компании SiteClinic: строю и координирую команду, обучаю специалистов.

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

Если Вы еще не встречались раньше с микроразметкой и слышите об этом впервые, тогда перед прочтением данной статьи изучите следующую:

Много о микроразметке Schema.org писать в данной статье не буду, потому что мы подробно все рассмотрели в .

В данной статье я хочу показать о том, как на практике сделать микроразметку на своем сайте, чтобы ее хорошо восприняли и Google и Yandex одновременно. Потому что многие сталкиваются с проблемами: для Yandex микроразметка нормально проходит валидацию (об этом читайте ниже), а вот для Google появляются ошибки, и наоборот. Да, это действительно так. Но всегда можно найти компромисс!

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

Как проверить "правильность" микроразметки Schema.org?

Для проверки валидации ("правильности") микроразметки предназначены специальные сервисы, которые были разработаны поисковыми системами. Мы будем в данной статье проверять микроразметку для поисковой системы Yandex и Google.

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

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

Как пользоваться валидаторами микроразметки?

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

Итак, начнем с валидатора от Google. Страница выглядит следующим образом:

Есть два варианта проверки валидации страницы:

С помощью прямой вставки HTML кода
С помощью вставки URL адреса страницы, которую необходимо проверить

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

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

После проверки в валидаторе Google появится слева код Вашей HTML страницы, а справа — какая микроразметка там присутствует и есть ли там ошибки:

С валидатором Google я думаю все понятно. Перейдем к валидатору от Yandex.

Когда Вы зайдете на сайт с валидатором микроразметки от Yandex, Вы увидите несколько иную картину, но смысл там остается тот же:

Здесь интерфейс немного проще и опять же есть два варианта проверки Вашего HTML кода: с помощью вставки исходного кода страницы, либо с помощью вставки лишь URL необходимой страницы.

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

Валидатор Yandex и Google будут давать Вам рекомендации сразу на русском языке. Но и этого бывает мало, потому что у всех ошибки разные и зависят от конкретного контекста страницы и HTML структуры.

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

Очень много ошибок? Не волнуйтесь, все можно исправить. Главное разобраться в этом постепенно исправить все ошибки.

Шаг 1. Что необходимо разметить на странице?

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

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

В данной статье я покажу как сделать пример для сайта, под управлением CMS WordPress. А на данной CMS чаще всего создают блоги. Поэтому будем писать разметку для такого типа страниц, как "Статья".

Далее нам необходимо определить, какую сущность из словаря мы будем использовать. На официальном ресурсе Schema.org есть следующая структура: Article . Но внутри нее есть подструктуры, которые мы можем использовать. Спускаясь все глубже по подструктурам я нашел следующий тип: BlogPosting . Он является частным вариантом сущности Article . И он отлично подходит для разметки записей на блогах.

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

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

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

Шаг 2. Формируем шаблон микроразметки

Что именно будем размечать стало понятно. Осталось собрать правильную структуру.

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

Без прелюдий перейдем сразу к делу. После многочисленных попыток сделать микроразметку Schema.org валидной для Google и Яндекса получилась следующая структура:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

<div itemscope itemtype= "http://schema.org/BlogPosting" > <link itemprop= "mainEntityOfPage" itemscope href = "Ссылка на статью" / > <div itemprop= "publisher" itemscope itemtype= "https://schema.org/Organization" > <div itemprop= "logo" itemscope itemtype= > <img alt = "Лого www.сайт" itemprop= "image url" src = "http://www.сайт/favicons/favicon-160x160.png" / > <meta itemprop= "width" content = "160" > <meta itemprop= "height" content = "160" > </ div > <meta itemprop= "telephone" content = "-" > <meta itemprop= "address" content = "Россия" > <meta itemprop= "name" content = "www.сайт" > </ div > <meta itemprop= "datePublished" content = "2016-01-24" > <meta itemprop= "dateModified" content = "2016-01-24" > <span itemprop= "author" itemscope itemtype= "http://schema.org/Person" > <span itemprop= "name" > Юрий Немец</ span > </ span > <div itemprop= "articleBody" > <h1 itemprop= "headline" > Заголовок</ h1 > <span itemprop= "image" itemscope itemtype= "https://schema.org/ImageObject" > <img itemprop= "image url" alt = "Описание картинки" width = "500" height = "280" src = "http://www..png" / > <meta itemprop= "width" content = "500" > <meta itemprop= "height" content = "280" > </ span > <p > </ p > <p > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nam tempora doloribus velit dicta iusto alias veritatis inventore, unde eum. Atque voluptatem unde, ipsum autem dolor facere, veniam quas ut.</ p > </ div > </ div >

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

Строка 1: объявляем тип контента, который будет размечен.
Строка 5: здесь указываем URL адрес страницы, на которой сейчас находится пользователь, то есть адрес текущей статьи.
Строка с 8 по 18: небольшая подструктура, в которой необходимо указать более подробно сведения о сайте: логотип (адрес до изображения и его размеры), телефон, адрес и название компании (сайта).

Строка 9 по 13: еще одна подструктура с выводом изображения, то есть логотипа. Все изображения, которые необходимы для микроразметки необходимо выводить именно в такой структуре, где помимо адреса до изображения в meta-тегах еще указывается информация о его размерах.
Строка 14: указываем телефон, если он есть.
Строка 15: реальный адрес, если работаете в офисе, например.
Строка 16: здесь пишем название компании.

Строка 21: дата публикации статьи. Здесь будьте очень внимательны, потому что ее указывать необходимо в специальном формате: "ГОД-МЕСЯЦ-ДЕНЬ ". И обязательно разделитель должен быть знак "— ".
Строка 24: дата последнего изменения статьи, чтобы подсказать поисковику какую из статей необходимо переиндексировать, если она была изменена в последнее время. Здесь также действуют правила из предыдущего пункта.
Строка с 27 по 29: указываем в специальной подструктуре информацию об авторе статьи.
Строка 32 по 45: основная контентная часть Вашей статьи, внутри которой необходимо отметить несколько элементов:
- Строка 35: заголовок Вашей статьи. Его помечаем следующим образом, добавляя к тегу заголовка свойство — itemprop="headline" ;
- Строка 38 по 42: как Вы уже видели ранее, здесь располагается подструктура с изображением. Но в данном случае здесь мы указываем на главное изображение в статье;

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