Микроразметка для разных типов сайтов
Сегодня мы поговорим о пользе микроразметки для корректной индексации страниц сайта поисковыми системами и увеличения их привлекательности для пользователей. Расскажем, какие возможности семантическая разметка дает интернет-магазинам, информационным порталам, сайтам СМИ и прочим ресурсам.
Что такое микроразметка
Существует два основных вида микроразметки, которые используют поисковые системы Яндекс и Google: Sсhema.org и Open Graph.
Стандарт семантической разметки данных в сети Schema.org был разработан поисковыми системами Google, Bing и Yahoo! летом 2011 года для того, чтобы вебмастерам не приходилось размечать контент страниц отдельно для каждой поисковой системы. Сегодня его поддерживают все основные поисковые системы, в том числе и Яндекс.
Словарь Open Graph создали в Facebook для того, чтобы сделать публикуемые с сайтов ссылки расширенными, иными словами, чтобы сайты могли красиво отображаться в социальной сети. Сегодня эту микроразметку используют все популярные социальные сети: ВКонтакте, Google+, Twitter, LinkedIn, Pinterest и др.
Основная задача микроразметки – сделать информацию на страницах сайта структурированной и понятной, облегчить поисковым системам ее поиск и обработку для дальнейшего представления в выдаче.
Микроразметка для разных типов сайтов
Чаще всего семантическая разметка используется для улучшения сниппета сайта в выдаче поисковых систем, но это далеко не все ее возможности. С ее помощью также размечаются следующие типы контента веб-страниц:
- товары и цены;
- адреса и организации;
- отзывы об организациях;
- видео;
- картинки;
- вопросы и ответы;
- программы;
- рефераты;
- рецепты;
- словарные статьи;
- тест-драйвы;
- фильмы.
Далее мы подробнее поговорим о пользе семантической разметки контента для разных типов сайтов.
Интернет-магазин
Стандартно интернет-магазин состоит из каталога товаров, продуктовых страниц, информации о доставке и оплате. Разметив эти данные на странице сайта, можно улучшить их представление в выдаче поисковых систем и привлечь больше потенциальных покупателей. Ведь, чем больше исчерпывающей информации о товаре и его цене пользователь увидит в сниппете, тем выше вероятность того, что он перейдет на сайт вашего интернет-магазина.
Товарные страницы
Для разметки товарных страниц используются схемы Product и Offer или AggregateOffer в Schema.org/Product. Таким образом информация ваших продуктовых страниц может быть представлена в виде структурированных сниппетов с описанием товара и ценой в выдаче Яндекса.
Получить такой сниппет несложно, достаточно указать в коде поля name, offers, price, pricecurrency и т.д.:
<h1 itemprop="name"><font size="5">Кровать Мелисса с мягкой спинкой </font> </h1>
<img itemprop="image" src="/components/com_virtuemart/show_image_in_imgtag.php?filename=_________________52a37cbc83cdd.jpg&newxsize=320&newysize=320&fileout=" alt="Кровать Мелисса с мягкой спинкой" title="Кровать Мелисса с мягкой спинкой" border="0" align="center"/>
<div itemprop="description">Купить позицию <b>Кровать Мелисса с мягкой спинкой</b> по цене <b>6793 руб.</b> с гарантией производителя с доставкой по Москве и области можно заказав на этой странице или позвонив нам по телефону <b>8 (495) ❾❼❸-❸❷-❸❼</b>
<br/><spen itemprop="manufacturer" >Боровичи</span> </a>
<meta itemprop="price" content="6793">
<meta itemprop="priceCurrency" content="RUB">
Отзывы
Если на страницах товаров есть отзывы, их также можно разметить при помощи свойства AggregateRating в Product. В результате в выдаче Google в сниппете появится рейтинг и отзывы:
В коде сайта необходимо указать следующие атрибуты:
<body>
<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> </body>
</html>
Контакты
Контакты размечаются при помощи Organization от Schema.org. Эта разметка позволяет компаниям попасть в справочник Яндекса, а также отражаться при поиске на Яндекс.Картах.
Пример разметки контактов в коде:
<div itemprop="name" itemscope="" itemtype="http://schema.org/PostalAddress">
ООО «Айсео»
</div>
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
Адрес: <span itemprop="postalCode"> 127473</span>, <span itemprop="addressLocality">Москва</span>, <span itemprop="streetAddress">Краснопролетарская ул., 16 стр. 2</span>
</div>
Телефон: <span itemprop="telephone">+7 (495) 221-68-19</span> <br>
Электронная почта: <span itemprop="email"><a href="mailto:[email protected]">[email protected]</a></span>
<div class="is_display">
<img alt="Логотип iSEO" src="http://www.iseo.ru/bitrix/templates/iseo/images/logo.png" itemprop="logo">
</div>
</div>
Картинки
Помимо большого поиска существует отдельный поиск по изображениям, который дает дополнительную возможность увеличить трафик на сайт, если пользователь ищет товар по изображению.
Один из способов попасть в поиск по картинкам Google и Яндекс — применить на сайте микроразметку schema.org/ImageObject. Достаточно будет указать ссылку на изображение, описание, название картинки, подпись, размеры изображения:
<h2 itemprop="name">i-comference 2016</h2>
<img src="http://www.iseo.ru/put_do_fotografii.jpg" itemprop="contentUrl" />
<span itemprop="description">Конференция i-CoM 2016: социальные и мобильные коммуникации, автоматизацию маркетинга обсудят в марте.</span>
</div>
Чтобы пользователи могли делиться контентом вашего интернет-магазина в своей ленте или лайкать его в соц. сетях, необходимо установить виджет. Виджет — это короткий анонс внешней ссылки с изображением и небольшим описанием.
Чтобы эта информация отображалась корректно и не искажала исходный материал, представляя в анонсе несвязный текст или изображение, мало связанное с темой ссылки, был разработан дополнительный стандарт разметки страниц — Open Graph. По сути, он представляет собой набор тегов, которые указывают на то, как должно выглядеть отображение анонса веб-страницы в соц. сети. Для этого необходимо указать заголовок, картинку и описание:
<meta property="og:type" content="article"/>
<meta property="og:title" content="Здесь пишем заголовок статьи">
<meta property="og:url" content="http://www.iseo.ru/press/blog/golosovoy_poisk_i_seo/">
<meta property="og:image" content="http://www.iseo.ru/upload/iblock_250_250_CROP_1-1__/e7c/pablo (3).png">
<meta property="fb:app_id" content="670105843067235">
Информационные порталы и СМИ
Микроразметка для СМИ – крайне важный элемент оптимизации. Новостные и информационные ресурсы обходят специальные быстророботы, а семантическая разметка позволяет ускорить индексацию и ранжирование новостных сюжетов.
Какой контент содержат подобные ресурсы? Обычно это тексты и различный мультимединый контент. Поэтому чаще всего контент СМИ в микроразметке Schema.org/Article размечается следующими атрибутами:
- itemscope itemtype=http://schema.org/WPHeader – указывает на общий контент;
- itemscope itemtype=http://schema.org/Article – указывает на тело статьи;
- itemprop=»name» – обозначает заголовок;
- itemprop=»author» – авторство;
- itemprop=»datePublished» (Обязательно время в формате «Y-m-d») – дата публикации;
- itemprop=»articleBody» – текст статьи;
- itemprop=»articleSection» – рубрика;
- itemprop=»image» – если есть изображение.
Так как для такого вида контента важно расшаривание в соц. сетях его также необходимо размечать при помощи Open Graph.
Видеохостинг
Для сайтов с большим количеством видеоконтента, например, видеохостингов, необходима разметка роликов при помощи типа VideoObject от Schema.org или расширения Open Graph. Благодаря такой разметке на страницах поисковой выдачи доступна следующая информация о видеоролике: заставка, заголовок, текстовое описание, продолжительность, авторские права, возможность предварительного просмотра и прочее.
Микроразметка для видео поможет хорошо отображаться в результатах большого поиска и поиска по видео Google и Яндекс.
Минимальное описание видео выглядит вот так:
<a itemprop="url" href="http://mysite.com/view/306/" > <!--Ссылка на видеоролик-->
<h1 itemprop="name"> Schema.org for Videos</h1></a><!--Название видео-->
<p itemprop="description">The schema.org markup is our
recommended method for providing Google with the metadata
needed to index your videos. Using it requires only a
few non-visible changes to your video web page. You can
find the full schema.org spec here:
http://www.schema.org/VideoObject </p > <!--Описание видео-->
<meta itemprop="duration" content="PT6M58S"><!-- Продолжительность видео в формате ISO 8601-->
<meta itemprop="isFamilyFriendly" content="true"><!-- допустим ли просмотр видео-ролика детьми-->
<p>Дата загрузки: <span itemprop="uploadDate">2013-06-05 </span></p><!--дата загрузки видео-ролика на сайт в формате ISO 8601-->
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject" > <!--описание изображения предпросмотра-->
<img itemprop="contentUrl" src="http://mysite.com/images/preview/img1.jpg" >
<meta itemprop="width" content="250">
<meta itemprop="height" content="120">
</span>
</div>
Не стоит забывать, что пользователи не всегда ищут фильмы по названию, в строку поиска они могут вводить имя режиссера или актеров. Для того чтобы ваш сайт показывался в выдаче по данным запросам, необходимо использовать разметку Schema.org/Movie, которая позволит получить структурированный сниппет в Яндексе:
Для этого необходимо указать подробные данные о фильме: название, актеров, жанр, описание и т.д.
Коммерческий сайт
Для сайтов данного типа помимо уже описанной выше микроразметки контактов, картинок, видео и отзывов, можно также разметить раздел с вопросами и ответами, если такой имеется на сайте. Это хороший способ привлечения низкочастотного трафика из поиска.
Внедрив микроразметку такого контента, в выдаче будут структурировано отображаться вопросы и ответы пользователей, размещенные на вашем сайте.
Для этого данные станицы необходимо размечать с помощью атрибутов Question и Answer от Schema.org:
<h1 itemprop="name">Просто любопытно!!! Сколько пьёт слон????</h1>
<div itemprop="acceptedAnswer" itemscope itemtype="http://schema.org/Answer">
<meta itemprop="upvoteCount" content="3" />
<div itemprop="text">Зависимости от температуры воздуха они пьют сто – триста литров воды в день. </div>
</div>
<div itemprop=" suggestedAnswer" itemscope itemtype="http://schema.org/Answer">
<meta itemprop="upvoteCount" content="1" />
<div itemprop="text">Слон, который болеет туберкулезом, может выпить шестьсот литров воды в день.</div>
</div>
</div>
Проверить корректность семантической разметки на страницах сайта можно при помощи Валидатора микроразметки от Яндекса или Google. В данный момент они поддерживают все популярные форматы микроразметки, в том числе Schema.org и OpenGraph.
Мы постарались собрать наиболее полезную информацию о семантической разметке, которую необходимо внедрять на своих сайтах в зависимости от существующего контента и задач. Если вы хотите привлечь больше пользователей из поиска и поисковых сервисов, у вас есть отличная возможность уже в выдаче обратить внимание потенциального клиента на ваш сайт, не пренебрегайте микроразметкой данных.