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


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

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

В данной статье мы рассмотрим не менее важный инструмент от популярной поисковой системы Google — инструмент проверки структурированных данных.

 

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

  1. микроданные;
  2. микроформаты;
  3. RDF.

Микроразметкой можно описать следующие типы контента, которые поддерживает Google:

  • отзывы;
  • люди;
  • товары;
  • компании и организации;
  • рецепты;
  • мероприятия;
  • музыка.

 

Способы проверки микроразметки валидатором от Google

По функционалу проверки микроразметки, поисковые системы Google и Яндекс схожи.

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

  1. по URL-у — способ удобен, если страница размещена в Интернете, необходимо просто скопировать адрес страницы и вставить в соответствующую строку
  2. по HTML- коду- способ удобен, если страница не опубликована в сети, необходимо скопировать фрагмент кода и вставить в соответствующее поле

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

Сравнение результатов валидаторов от Google и Яндекса.

А теперь подходим к самому интересному, сравнив результаты работы валидаторов от Google и от Яндекса.

Для большей наглядности, используем тот же фрагмент HTML-кода, что и при проверке микроразметки в валидаторе Яндекса.

  &lt;span itemscope itemtype=&quot;http://<a href="https://semantica.in/blog/kak-vnedrit-mikrorazmetku-schema-org-na-sajt-chast-1.html">schema.org</a>/LocalBusiness&quot;&gt;  	&lt;b&gt;Семантика&lt;/b&gt;&lt;/br&gt;  	&lt;span itemprop=&quot;address&quot; itemscope itemtype=&quot;http://schema.org/PostalAddress&quot;&gt;  		&lt;span itemprop=&quot;address&quot;&gt;Воронеж&lt;/span&gt;&lt;/br&gt;  		&lt;span itemprop=&quot;streetAddress&quot;&gt;ул.  

рпедо, д. 15&lt;/span&gt; &lt;/span&gt;&lt;/br&gt; &lt;time itemprop=&quot;openingHours&quot; datetime=&quot;Mo, Tu, We, Th, Fr 09:00−22:00&quot;&gt; Пн-Пт, с 09:00 до 22:00 &lt;/time&gt;&lt;/br&gt; &lt;span itemprop=&quot;telephone&quot;&gt;+7 (473) 279-96-26&lt;/span&gt; &lt;/span&gt;

Напомним, что при проверке данного фрагмента HTML-кода валидатор Яндекса показал одну ошибку и одно предупреждение. Рассмотрим результат инструмента от Google:

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

 

Подведем итог

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

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


 

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

semantica.in

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

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

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

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

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

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

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

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


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

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

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

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

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

 

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

Отзывы

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

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

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

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

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

Мероприятия


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

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

Товары

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

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

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

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

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


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

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

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

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

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

siteclinic.ru

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

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


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

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

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

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

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

Микроразметка для кулинарного сайта

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

Сайт без микроразметки

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


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

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

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

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

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

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

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

Сайт без разметки для организаций

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

Разметка для организаций

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

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

 

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

Микроразметка для организаций

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

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

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


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

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

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

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

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

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

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

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

Разметка Яндекс: словари

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

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

Отзывы на Яндекс Маркет

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

Яндекс микроразметка: отзывы

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

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

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

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

Отзывы

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

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

Микроразметка google отзывы

А так – сводного отзыва:

Сводные отзывы google

Мероприятия

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

Микроразметка Google расписание

Товары

Несложно догадаться, что указанная схема подойдет владельцам виртуальных магазинов. Набрав в поисковой строке «телевизор LG», пользователь сразу же увидит не только ссылку на Ваш сайт, но и получит многие другие интересующие его данные о товаре – стоимость, характеристики и т.п.:

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

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

Google работает со многими другими схемами микроразметки. 

www.seo.kasper.by

Статьи о продвижении

Любая статья, размещенная на Вашем сайте, считается поисковыми системами «творческой работой».

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

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

Условия вывода сниппетов при разметке статьи

Рис 1 – условия вывода сниппетов при разметке статьи

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

Возможные варианты сниппетов от гугл при разметке статьи

Рис 2 возможные варианты сниппетов от гугл при разметке статьи

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

http://schema.org/Article:

  • http://schema.org/NewsArticle — схема для разметки новостных статей
  • http://schema.org/BlogPosting — схема для разметки статей в блоге
  • http://schema.org/ScholarlyArticle — схема для разметки научных статей

Исходя из того, что на нашем сайте присутствует блог — https://fireseo.ru/blog/, в которым мы размещаем авторские материалы, нам надо использовать разметку — http://schema.org/BlogPosting (разметка публикаций в блоге).

Но если зайти на сайт, который описывает эту разметку — http://schema.org/BlogPosting, то можно увидеть следующее описание:

Thing > CreativeWork > Article > SocialMediaPosting > BlogPosting

Между Article и BlogPosting – еще находится SocialMediaPosting, который передает схеме BlogPosting по наследству дополнительные свойства sharedContent. Эти новые унаследованные свойства используются для разметки других форматов данных, находящихся в социальных сетях. Проще говоря, этот тип разметки нужно использовать для разметки постов в соц сетях. Пример разметки SocialMediaPosting.

Если же открыть — http://schema.org/NewsArticle

То здесь мы видим прямую иерархию:

fireseo.ru

Микроразметка на примере

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

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

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

 

Видео по микроразметке:

Для чего нужна микроразметка?

Если вы еще не внедрили микроразметку на своем ресурсе, то поторопитесь с этим. И вот 2 причины поторопиться это сделать:

  • во-первых, так удобнее пользователю. Если HTML-код помогает оформить данные, то микроразметка помогает подробно объяснить, что именно мы имели в виду. Не только рассказать о ресурсе, но и показать часть его содержимого. Разметка помогает оптимизировать поиск, сделать этот процесс менее времязатратным;
  • во-вторых, это полезно с коммерческой точки зрения. Когда покупатель видит в поисковой выдаче множество ответов на свой вопрос, то ему легче выбрать сайт, который предоставляет всю информацию о себе именно в выдаче. Соответственно, больше шансов, что он перейдет по показанной ссылке.

Виды микроразметки сайта

  • Schema.org — язык роботов поисковых систем Яндекс и Google. Отметим, что его также понимают Bing и Yahoo, и другие роботы менее известных поисковых систем. Schema.org — самый распространенный язык микроразметки. несколько лет назад его приняли за всеобщий стандарт разметки данных. 
  • OpenGraph — способ разметки информации, используемый роботами социальных сетей. Разработала его Facebook, но подхватили Вконтакте, Twitter, Google+, LinkedIn и все остальные. Используется для отображения превью в новостной ленте пользователя. Также этот язык понимает Яндекс.Видео.
  • JSON-LD — способ описания содержания страницы с помощью языка связанных данных. Описанная таким образом информация видна для роботов, но скрыта от людей. Чтобы было понятно: этот язык различает Яндекс.Почта, но оставляет без внимания поисковой робот Яндекса. Может быть использован в качестве дополнения к Schema.org (кстати, структурированные таким образом данные выглядят красивее).
  • Микроформаты — альтернативный способ разметки гипертекста через атрибут “class”. Например, задаем тег<div class=”adr”></div>, то есть сообщаем роботу о том, что внутри <div>помещен адрес.

Что такое микроразметка Schema.org?

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

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

Что можно размечать?

Практически всё (существует более 100 схем), но не вся разметка будет использована поисковыми системами. Что точно стоит размечать:

  • Товары
  • Контакты
  • Статьи
  • Отзывы / рейтинги
  • Комментарии
  • Видео
  • Люди (персоны)
  • Рецепты

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

<div itemscope itemtype="http://schema.org/Product"> <!--Указывается схема Product-->  	<!--В поле name указывается наименование товара-->  	<div itemprop="name"><h1>Кровать Мелисса с мягкой спинкой</h1></div>  	<!--В поле image указывается ссылка на картинку товара-->  	<a itemprop="image" href="products_pictures/large_krovat.jpg">  		<img src="products_pictures/medium_krovat.jpg" title="Кровать Мелисса с мягкой спинкой">  	</a>  	<!--Указывается схема Offer-->  	<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">  		<div>8 350 руб.</div>  		<!--В поле price указывается цена товара-->  		<meta itemprop="price" content="8350.00">  		<!--В поле priceCurrency указывается валюта-->  		<meta itemprop="priceCurrency" content="RUB">  	</div>  	<!--В поле description дается описание товара-->  	<div itemprop="description">Цена указана за кровать Мелисса с мягкой спинкой; размером спального места 900х2000 мм. Подушки у спинки кровати изготовляются из искусственной кожи. В комплектацию входит ортопедическое основание на ножках.</div>  	</div>  

Микроразметка контактов

<div itemscope itemtype=”http://schema.org/Organization”>
<span itemprop=”name”>superwebmaster</span>
Контакты:<div itemscope itemtype=”http://schema.org/ProstalAddress”>
Адрес:
<span itemprop=”streetAddress”>проспект Ленина,11</span>
<span itemprop=”prostalCode”>454055</span>
<span itemprop=”addressLocality”>Челябинск</span>
</div>
Телефон:<span itemprop=”telephone”>+7-908-04-29-***</span>
</div>

Микроразметка статьи

<div itemscope itemtype="http://schema.org/Article">
<header>
<h1 itemprop="headline name">Пример микроразметки статьи</h1>
</header>
<span itemprop="datePublished" content="ГОД-МЕСЯЦ-ДЕНЬ">Дата размещения</span> 
<span itemprop="author">Солтык Алексей</span>
<div itemprop="description"> 
<p>Текст краткого описания</p> 
<p>...</p>
</div>
<h2 itemprop="alternativeHeadline">Подзаголовок статьи</h2>
<div itemprop="articleBody">
<article> 
<img itemprop="image" src="URL адрес изображения" title="Какое-то изображение в статье" alt="Альтернативное название"> 
<p>Размечаем содержимое статьи!</p> 
<p>...</p>
</article>
</div>
</div>

Микроразметка отзывов (рейтинга)

<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="Название страницы"> 
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer"> 
<meta itemprop="price" content="0.00"> 
</span> 
<p itemprop="description">Описание страницы</p> 
<div class="left" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> 
<meta itemprop="ratingValue" content="4.63" /><!-- Количество отображаемых звезд -->
<meta itemprop="ratingCount" content="9" /><!-- Количество голосов --> 
</div>
</div>

Микроразметка комментариев

<div itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/UserComments">  <span itemprop="commentTime" content="2017-05-23T12:14:22">23.05.2017 12:14:22</span>  <span itemprop="creator">Алексей</span>:  <div itemprop="commentText">Мощная статья. Спасибо!</div>  </div>

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

<h1 itemprop="name">Анджелина Джоли</h1><br/>  <img itemprop="image" src="//domen.ru/wp-content/uploads/iphone360_20866-1.jpg" alt="Анджелина Джоли">  <b>ФИО на английском:</b> <span itemprop="alternateName">Angelina Jolie</span><br />  <b>Дата рождения:</b> 04 июня 1975 года<br />  <meta itemprop="birthDate" content="1975-06-04"/>  <b>Рост:</b> <span itemprop="height">1.69 м</span><br />  <b>Знак зодиака:</b> близнецы<br />  <b>Место рождения:</b> <span itemprop="birthPlace">Лос-Анджелес, Калифорния, США</span><br />  <b>Карьера:</b> <span itemprop="jobTitle">Актриса, Продюсер, Режиссер, Сценарист</span><br />  <b>Жанры:</b> драма, триллер, боевик<br />  <b>Супруг:</b> <span itemprop="spouse">Джонни Ли Миллер (развод), Билли Боб Торнтон (развод), Брэд Питт, шестеро детей</span><br />

Микроразметка рецептов

<div itemscope itemtype="http://schema.org/Recipe"> 
<h1 itemprop="name" >Курица в пиве с рисом</h1> 
Этот рецепт найден в Тибетском монастыре в 1871 году во время экспедиции графа Никанора Уйского. Он был написан в VI веке до нашей эры на глиняной табличке. 
<img itemprop="resultPhoto" src=​"profit.jpg" /> 
<ul> 
<li>Автор рецепта: <span itemprop="author">Граф Уйский</span></li> 
<li>После приготовления вы получите <span itemprop="recipeYield" >4 порции</span></li> 
<li>Время приготовления: <meta itemprop="totalTime" content="PT45M"/>45 минут</li> 
</ul> 
<h2>Ингредиенты</h2> 
<ul>
 <li itemprop="ingredients"> 1 курица </li>
 <li itemprop="ingredients" > 5 л пива </li> 
<li itemprop="ingredients" > соль </li> 
<li itemprop="ingredients" > перец </li> 
<li itemprop="ingredients" > специи по вкусу </li> 
</ul> 
<h2>Способ приготовления</h2> 
<ul itemprop="recipeInstructions"> 
<li><img itemprop="image" src=​"creks.jpg" alt="нарезанная кусочками курица"/> Курицу нарезать на кусочки, выложить в форму для запекания, посолить, поперчить, добавить специи по вкусу. </li>
 <li><img itemprop="image" src=​"feks.jpg" alt="курица залитая пивом"/> Курицу залить пивом, поставить в духовку. </li> 
<li><img itemprop="image" src=​"peks.jpg" alt="курица в духовке"/> Жарить при температуре 180 градусов в течение 40—45 минут. </li>
 </ul> 
<span itemprop="recipeCategory">Блюда из курицы</span> 
<div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> Пищевая ценность: 
<ul> 
<li>Калории: <span itemprop="calories">120 ккал.</span>,</li> 
<li>Жиры: <span itemprop="fatContent">7 г.</span></li> 
<li>Углеводы: <span itemprop="carbohydrateContent">1 г.</span></li> 
</ul> 
</div> Приятного аппетита! </div>

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

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

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

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

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

 Влияет ли наличие микроразметки на позиции сайта в поисковой выдаче? Администрации поисковых систем отрицают эту зависимость, но, при этом, рекомендуют использовать schema.org. Конструкторы сайтов содержат модуль для работы с OpenGraph. При этом вопрос об оптимальном выборе остается открытым.

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

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

  1. Structured Data Testing Tool. Особенность сервиса состоит в том, что можно на примерах увидеть, как выполняется микроразметка. Просто скопируйте пример в свой шаблон и подставьте $переменные$ в код.
  2. Разделы “Структурированные данные” и “Маркер” в Search Console от Google, которые позволят настроить микроразметку.
  3. Валидатор микроразметки от «Яндекс».
  4. Яндекс.Справочник. Добавьте информацию о своей организации и в результатах поиска “Яндекс” будет показываться адрес, телефон и график работы.

Выводы

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

Не имеет значения какую разметку вы будите использовать – schema.org или какую-нибудь другую, главное, чтобы она была выполнена правильно и без ошибок и выделяла ключевые моменты страницы. Систематически проверяйте ее с помощью «Валидатора» и «Инструмент проверки структурированных данных», проводите глубокий разбор вашей деятельности и у вас все получится.

webmaster-seo.ru

Собственно говоря, HTML так и называется «гипертекстовый язык разметки». Его можно назвать языком «макроразметки» — разметки контента всего содержимого web-страницы.

Свои требования к разметке предъявляют и поисковые системы — Яндекс и Google.  Требование можно сформулировать так: организация содержимого, облегчающее анализ страницы. Чем строже будет организовано содержимое, тем точнее и быстрее поисковый робот проводит свою работу, тем успешнее индексация и продвижение сайта.

Все требования подобного рода и собраны в микроразметку сайта.

Для пользователя следствием удачного применения микроразметки является более полный сниппет (превью сайта) в результатах поиска. У хорошо размеченных сайтов выше кликабельность (CTR) в поисковой выдаче. Это значит вы будете получать больше органического трафика и ваши позиции будут расти за счет этого.

Для осуществления разметки используются специальные атрибуты в рамках HTML-кода. Вся необходимая информация собирается в одном html-файле без привлечения внешних ресурсов. Приводим пример микроразметки, предлагаемой Google (здесь тема сайта «Картинки»):

<meta property="og:image" content="http://example.com/rock.jpg" />    <meta property="og:image:width" content="300" />    <meta property="og:image:height" content="300" />    <meta property="og:image" content="http://example.com/rock2.jpg" />    <meta property="og:image" content="http://example.com/rock3.jpg" />    <meta property="og:image:height" content="1000" />  

Яндекс использует несколько отличную от Гугл систему микроразметки:

<div itemscope itemtype="http://schema.org/Organization">   <span itemprop="name">Название организации</span>   Контакты:   <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">   Адрес:   <span itemprop="streetAddress">Александра Пушкина, 114</span>   <span itemprop="postalCode">746228</span>   <span itemprop="addressLocality">Владивосток</span>,   </div>   Телефон:<span itemprop="telephone">+7 999 777–77–77</span>,   Факс:<span itemprop="faxNumber">+7 999 111–11–11</span>,   Электронная почта: <span itemprop="email">myorg@list.ru</span>  </div>  

Сравните тот же самый код страницы, но уже без микроразметки:

<div>   <span>Название организации</span>   Контакты:   <div>   Адрес: Александра Пушкина, 114,   746228,   Владивосток,   </div>   Телефон: +7 999 777-77-77,   Факс: +7 999 111-11-11,   Электронная почта: myorg@list.ru  </div>  

5 популярных форматов микроразметки:

  • Schema.org — совместная разработка Гугл, Yahoo и Microsoft, к которой со временем примкнула и Яндекс;
  • OpenGraph — разработка компании Facebook, которой придерживаются все её разработки и разработки тесно сотрудничающих с Facebook её партнёров;
  • Микроформаты – целая серия форматов, описывающих различные тематические направления web-страниц, от кулинарных рецептов до социальных взаимоотношений;
  • RDF — Resource Description Framework («среда описания ресурса») – разработка консорциума W3C, носящая глобальный характер среды описания данных. В настоящий момент действует 3 версия (1.1) данного формата. Его полное описание доступно на http://www.w3.org/TR/2015/REC-rdfa-core-20150317/;
  • Микроданные (microdata) – ещё одна разработка W3C

Все форматы находятся в постоянном развитии, и пока уникальная разметка существует не для всех сфер.

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

Как внедрить микроразметку?

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

Механизм применения микроразметки на примере формата Schema.org. Три шага:

  1. Описание заключается в контейнер – ему присваивается имя и тип:
    <div itemscope itemtype=»http://schema.org/Organization» >

    </div>
  2. Внутри контейнера происходит описание конкретного свойства.
  3. Вне контейнера в конкретных точках применения происходит разметка информации со ссылкой на конкретное свойство схемы:
    <span itemprop=»streetAddress»>Александра Пушкина, 114</span>

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

Так как объём информации по каждой теме довольно широк, возникает необходимость её проверки на соответствие стандартам. Яндекс, и Google, имеют специальные валидаторы для проверки микроразметки на сайте.

Проверка микроразметки в Яндекс Вебмастере

Идем в Вебмастер Яндекса: https://webmaster.yandex.ru/tools/microtest/

Перед нами вся необходимая информация для проведения анализа:

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

Теперь, в многостраничном поле ввода под двухцветным заголовком «URL документа или вставьте фрагмент HTML-кода» размещаем адрес проверяемой страницы.

Тут возникает только одна проблема – страница должна содержать эту самую микроразметку. Если микроразметки нет, то под заголовком «Результат проверки» просто показывается сообщение, что разметка на странице не обнаружена.

Запуск проверки проводится кнопкой «Проверить» или комбинацией горячих клавиш Ctrl + Enter.

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

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

Если вы просто ввели HTML-код страницы, то результат работы будет представлен адресом локального хоста:

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

Если у вас возникают вопросы по поводу сервиса валидации микроразметки Яндекса, то можно обратиться к страницам помощи, которые служба размещает по адресу: https://yandex.ru/support/webmaster/yandex-indexing/validator.xml

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

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

  • Страница не может быть загружена для анализа;
  • Микроразметка не обнаружена – может произойти по двум причинам – или разметки действительно нет, или она неверно оформлена;
  • Отсутствие необходимого поля – это уже элемент именно проверки, например, при описании картинки не указан её адрес;
  • Невозможно определить чему принадлежат некоторые поля – обычно они выходят за свою разметку;
  • Не выполнены условия организации сниппетов;
  • В свойстве “content” meta-тега находится ссылка, что недопустимо.

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

  • Некорректное значение поля – например, некорректный формат даты;
  • Неверно задан тип данных – обращаем внимание, что наряду со стандартными типами, определёнными W3C, Яндекс определяет и некоторые свои типы;
  • Отсутствие разметки, которая должна использоваться вместе с используемой.

Как результат успешно проведённой Яндексом валидации – в результатах поиска Яндекса страница будет представлена структурированным сниппетом. Это обычно происходит через 10-14 дней.

Проверка микроразметки в Google

Аналогичным образом проводится валидация микроразметки в Google: https://developers.google.com/structured-data/testing-tool/

Схема расстановки микроразметки, на которую ориентируется Google, называется Schema.org. Во многом идея работы «американца» ничем не отличается от работы российского варианта валидации.

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

Как видим, здесь тоже есть возможность ввести адрес проверяемой страницы или непосредственно html-код.

Запуск проверки производится кнопкой «Запустить тест». Несмотря на то, что оба валидатора работают по одной схеме Schema.org, результаты их работы несколько отличаются. Вот результат работы Google:

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

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

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

gruzdevv.ru

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

Многие слышали о микроразметке, но никогда ее не применяли. Основная причина — непонимание, что это такое и зачем нужно. Сейчас мы все по порядку расскажем.

Семантическая разметка или микроразметка была введена поисковыми системами относительно недавно (начиная с 2011 года). Основная цель — сделать сайт более понятным для поисковой системы. Сразу приведем пример.

Поисковику важно понимать, есть на сайте телефон или его нету. От этого зависит очень многое. Телефон можно найти по маске +7 ххх хх-хх-хх и подобным. В этом сложности нет. Но как отличить телефон от факса? Если сам сайт не «сообщит», какой номер к чему относится, то сделать это невозможно.

Такая же сложность есть и с текстом. Как отличить кулинарный рецепт от статьи на тему приготовления пищи?

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

Приведем самый простой пример:

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

  <div>   <span>DH Agency</span>   Контакты:   <div>   Санкт-Петербург, ул. Верности 6      </div>   Телефон: +7 000 00–00–00,    Факс: +7 000 00–00–00,    Электронная почта: info@dh-agency.ru  </div>  

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

  <div itemscope itemtype="http://schema.org/Organization">   <span itemprop="name">DH Agency</span>   Контакты:   <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">   Адрес:  <span itemprop="addressLocality">Санкт-Петербург</span>   <span itemprop="streetAddress">ул. Верности 6</span>   </div>   Телефон:<span itemprop="telephone">+7 000 00–00–00/span>,   Факс:<span itemprop="faxNumber">+7 000 00–00–00</span>,   Электронная почта: <span itemprop="email">info@dh-agency.ru</span>  </div>  

Довольно просто и интуитивно понятно, не так ли? Нужно знать только синтаксис. Вся разметка делается в коде сайта, никаких дополнительных файлов создавать не придется.

Сразу ответим на самые популярные вопросы.

Зачем сайту микроразметка?

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

К примеру, Яндекс может написать цену на товар рядом с Вашим сайтом.

Цена в сниппете

Кроме этого, микроразметка помогает точнее разобраться в коммерческих факторах — телефонах, адресах, ценах и подобных.

Наличие разметки влияет на позиции сайта?

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

  1. Микроразметка влияет на сниппеты и делает сайт заметнее в выдаче. Что в итоге приводит к увеличению посещаемости при прочих равных условиях.
  2. Яндекс и Гугл любят качественный и понятные сайты. Микроразметка, это еще одна ступень приведения сайта в «порядок».

Всем ли сайтам это нужно?

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

  • Кулинарные рецепты;
  • Вопросы и ответы;
  • Отзывы;
  • Цены на товары;
  • Описания товаров;
  • Некоторые другие категории.

Какие бывают виды?

Существует несколько вариантов (синтаксисов) сообщить роботу, что находится у Вас на сайте. Самый распространенный и используемый — разметка «по правилам» shema.org. Именно ее и рекомендует Яндекс.

Кроме данной разметки существует еще Open Graph (разработан Facebook). Данный вид разметки больше ориентирован на соц. сети и используется ВК, ФБ, Твиттер, Гугл Плюс и другими.

Существует так же еще один формат —  JSON-LD, но он используются только Яндекс Почтой. Изменить информацию в сниппетах при его помощи не получится.

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

Schema.org

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

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

  <div itemscope itemtype="http://schema.org/Organization" >  Тут будут находиться Ваши данные  </div>  

(Вас не должно пугать наличие ссылки на сторонний ресурс. Не стоит прописывать тэгов rel=»nofollow» и подобные.)

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

  <span itemprop="streetAddress">Россия, Санкт-Петербург, ул. Верности</span>  

Подробный синтаксис можно посмотреть на официальном сайте — http://schema.org. (Не официальный перевод на русский язык — http://ruschema.org)

Open Graph

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

Пример ссылки в Facebook

Данную разметку используют все популярные социальные сети — ВКонтакте, Фэйсбук, Твиттер, Линкедин. Яндекс при помощи Open Graph передает данные в свой сервис «Видео».

Кроме формирования привью данный формат подходит для разработчиков приложений.
Синтаксис и подробную информацию можно найти на официальном сайте — http://ogp.me

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

Это достаточно популярный способ семантической разметки для HTML страниц. Он позволяет поисковым роботам понимать смысловые значения контента. Сделан он довольно «необычным» способом. Что бы передать поисковому роботу информацию, элементу присваивается атрибут «class», который имеет значение схожее с именем свойства. К примеру, адрес будет выглядеть таким образом:

  <div class="adr"> Россия, Санкт-Петербург, ул. Верности, 6 </div>  

В отличии от других форматов Вам не придется прописывать «лишних» тэгов.

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

Подробная информация о синтаксисе доступна на официальном сайте — http://microformats.org/wiki/Main_Page

Какой формат лучше использовать?

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

Рекомендации Яндекса

Следовать данным рекомендация или нет — дело Ваше.

Примеры

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

Пример микроразметки контактов:

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

  <div itemscope itemtype="http://schema.org/Organization">   <span itemprop="name">Фабрика плюшевых ежей "С иголочки"</span>   Контактная информация:   <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">   Адрес фабрики:  <span itemprop="addressLocality">Москва</span>   <span itemprop="streetAddress">ул. Ленина 140</span>   </div>   Телефон:<span itemprop="telephone">+7 945 00–00–00/span>,   Факс:<span itemprop="faxNumber">+7 945 00–00–00</span>,   Электронная почта: <span itemprop="email">info@example.ru</span>  </div>  

Пример микроразметки товара:

Эффективнее всего микроразметка проявляет себя при описании товаров. В сниппете появляется цена, преимущества, описание товара и другая важная информация.
С микроразметкой
Цена в сниппете
Без микроразметки
Без микроразметки товаров

  <div itemscope itemtype="http://schema.org/Product">  <span itemprop="name">Плюшевый еж "Уф Уф"</span>  <span itemprop="brand">Фабрика плюшевых ежей "С иголочки"</span>  <span itemprop="model">Номер модели 964893NM</span>  <img itemprop="image" src="Ссылка на изображение ежа" />  <span itemprop="description">Текстовое описание товара.</span>  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">  <meta itemprop="priceCurrency" content="Валюта - рубли, доллары, евро" />  <span itemprop="price">Стоимость товара</span>  <span itemprop="seller">Продавец товара</span>  </div>  </div>  

Пример микроразметки статьи:

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

  <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="https://schema.org/ImageObject">   <img alt="Логотип сайта" itemprop="image url" src="Ссылка на логотип сайта"/>   <meta itemprop="width" content="размер в пикселях">   <meta itemprop="height" content="размер в пикселях">   </div>   <meta itemprop="telephone" content="Телефон">   <meta itemprop="address" content="Адрес">   <meta itemprop="name" content="Название">   </div>      <meta itemprop="datePublished" content="Дата публикации">      <meta itemprop="dateModified" content="Дата последнего редактирования статьи">      <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="размеры в пикселях" height="размеры в пикселях" src="Ссылка на изображение"/>   <meta itemprop="width" content="размеры в пикселях">   <meta itemprop="height" content="размеры в пикселях">   </span>      <p>Тут идет основной текст статьи, который можно разбить на абзацы. Разрешено использование всех html тэгов разметки.</p>      </div>  </div>  

Пример микроразметки «хлебных крошек»

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

    <ul itemscope itemtype="http://schema.org/BreadcrumbList">   <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">  <a href="/" title="Основной раздел" itemprop="item">  <span itemprop="name">Основной раздел</span><meta itemprop="position" content="0">  </a>   </li>   <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">  <a href="/uroven-one/" title="Подраздел уровня 1" itemprop="item"><span itemprop="name">Подраздел уровня 1</span><meta itemprop="position" content="1"></a>   </li>   <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">  <a href="/uroven-one/uroven-two/" title="Подраздел уровня 2" itemprop="item"><span itemprop="name">Подраздел уровня 2</span><meta itemprop="position" content="2"></a>   </li>  </ul>    

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

После того, как Вы сделали микроразметку сразу встает вопрос, как ее проверить? Как убедиться, что поисковая система правильно поймет все то, что Вы написали?

Для этих целей Яндекс и Гугл сделали онлайн сервисы по проверке корректности синтаксиса разметки.
Сервис Яндекса доступен в Вебмастере в разделе «Инструменты» -> «Валидатор микроразметки».
Валидатор микроразметки Яндекса

(Напомним, что Яндекс Вебмастер доступен по ссылке — https://webmaster.yandex.ru)

Сервис Гугл доступен по ссылке — https://search.google.com/structured-data/testing-tool?hl=ru
Валидатор микроразметки Гугл

Будьте предельно внимательны! Данные сервисы проверяют только синтаксис разметки. Оценить корректность данных они не в состоянии. Проверяйте несколько раз, корректно ли описаны сущности.

Подводим итоги

Микроразметка нужна как для коммерческих, так и для информационных ресурсов. Каким синтаксисом пользоваться зависит от целей и личного желания. Если у Вас одна из популярных CMS, таких как Joomla!, WordPress и MODx, то размечать каждую статью нету надобности. Все можно сделать в шаблоне один раз.

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

dh-agency.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.