EN
+7 (495) 221 68 19
Отправить
заявку
Все
статьи

Микроразметка для разных типов сайтов

Сегодня мы поговорим о пользе микроразметки для корректной индексации страниц сайта поисковыми системами и увеличения их привлекательности для пользователей. Расскажем, какие возможности семантическая разметка дает интернет-магазинам, информационным порталам, сайтам СМИ и прочим ресурсам.

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

Существует два основных вида микроразметки, которые используют поисковые системы Яндекс и Google: Sсhema.org и Open Graph.

Стандарт семантической разметки данных в сети Schema.org был разработан поисковыми системами Google, Bing и Yahoo! летом 2011 года для того, чтобы вебмастерам не приходилось размечать контент страниц отдельно для каждой поисковой системы. Сегодня его поддерживают все основные поисковые системы, в том числе и Яндекс.

Словарь Open Graph создали для того, чтобы сделать публикуемые с сайтов ссылки расширенными, иными словами, чтобы сайты могли красиво отображаться в социальной сети. Сегодня эту микроразметку используют все популярные социальные сети: ВКонтакте, Google+, Twitter, LinkedIn, Pinterest и др.

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

Микроразметка для разных типов сайтов

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

  • товары и цены;
  • адреса и организации;
  • отзывы об организациях;
  • видео;
  • картинки;
  • вопросы и ответы;
  • программы;
  • рефераты;
  • рецепты;
  • словарные статьи;
  • тест-драйвы;
  • фильмы.

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

Интернет-магазин

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

Товарные страницы

Для разметки товарных страниц используются схемы Product и Offer или AggregateOffer в Schema.org/Product. Таким образом информация ваших продуктовых страниц может быть представлена в виде структурированных сниппетов с описанием товара и ценой в выдаче Яндекса.

Сниппет в Яндексе

Получить такой сниппет несложно, достаточно указать в коде поля name, offers, price, pricecurrency и т.д.:

<div itemscope itemtype="http://schema.org/Product">
    <span itemprop="name">Кровать Мелисса с мягкой спинкой</span>
    <span itemprop="brand">Компания диваны</span>
    <img itemprop="image" src="https://www.iseo.ru/bitrix/templates/iseo/images/melissa.png">
    <span itemprop="description">Кровать Мелисса с мягкой спинкой и гарантией производителя</span>
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <meta itemprop="priceCurrency" content="RUB">
        <span itemprop="price">6793</span>
    </div>
</div>

Отзывы

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

Сниппет в Google

В коде сайта необходимо указать следующие атрибуты:

<html>
    <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 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 itemscope="" itemtype="http://schema.org/Organization">
    <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:sales@iseo.ru">sales@iseo.ru</a></span>
    <div>
        <img alt="Логотип iSEO" src="https://www.iseo.ru/path-to-logo/logo.png" itemprop="logo">
    </div>
</div>

Картинки

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

Поиск Яндекса по картинкам

Один из способов попасть в поиск по картинкам Google и Яндекс — применить на сайте микроразметку schema.org/ImageObject. Достаточно будет указать ссылку на изображение, описание, название картинки, подпись, размеры изображения:

<div itemscope itemtype="http://schema.org/ImageObject">
    <h2 itemprop="name">i-comference 2016</h2>
    <img src="https://www.iseo.ru/put_do_fotografii.jpg" itemprop="contentUrl" />
    <span itemprop="description">Конференция i-CoM 2016: социальные и мобильные
    коммуникации, автоматизацию маркетинга обсудят в марте.</span>
</div>

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

Виджект ВКонтакте

Чтобы эта информация отображалась корректно и не искажала исходный материал, представляя в анонсе несвязный текст или изображение, мало связанное с темой ссылки, был разработан дополнительный стандарт разметки страниц — Open Graph. По сути, он представляет собой набор тегов, которые указывают на то, как должно выглядеть отображение анонса веб-страницы в соц. сети. Для этого необходимо указать заголовок, картинку и описание:

<meta property="og:site_name" content="iSEO.ru">
<meta property="og:type" content="article"/>
<meta property="og:title" content="Здесь пишем заголовок статьи">
<meta property="og:url" content="https://www.iseo.ru/path-to-page/">
<meta property="og:image" content="https://www.iseo.ru/path-to-picture.png">

Информационные порталы и СМИ

Микроразметка для СМИ — крайне важный элемент оптимизации. Новостные и информационные ресурсы обходят специальные быстророботы, а семантическая разметка позволяет ускорить индексацию и ранжирование новостных сюжетов.

Какой контент содержат подобные ресурсы? Обычно это тексты и различный мультимединый контент. Поэтому чаще всего контент СМИ в микроразметке 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.

Виджет Facebook

Видеохостинг

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

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

Поиск Яндекса по видео

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

<div itemscope itemtype="http://schema.org/VideoObject"><!--Указаниетипа объекта-->
    <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:

<div itemscope itemtype="http://schema.org/Question">
    <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.

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

Лучший SEO блог

Все
статьи

Что такое SEO — поисковое продвижение сайтов и как оно работает

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

Как анализировать трафик и позиции сайта в поиске

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

Как разработать стратегию SEO-продвижения?

Расскажем для чего нужна SEO стратегия, как ее создать и что учесть при ее создании.

Информационный трафик: зачем он нужен?

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

Оптимизация сниппетов в Google: 5 способов выжать максимум трафика из органики

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

Как рассчитать брендовый и небрендовый трафик на сайте

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

У вас возникли
вопросы?

Просто заполните форму, и мы свяжемся с вами!

    Нажимая на кнопку, вы соглашаетесь с условиями политики конфиденциальности

    Проводите тендер?

    Мы с радостью примем участие – пригласите нас!

      Нажимая на кнопку, вы соглашаетесь с условиями политики конфиденциальности

      Спасибо
      за подписку

      Никакого спама,
      отправляем только самые полезные статьи

      Спасибо
      за заявку!

      Мы свяжемся с вами в ближайшее время и обсудим детали вашего проекта.