Статья о правильном семантическом оформлении сайта при помощи микро форматов. Данная статья будет полезна как для seo, так и просто для общего развития. Поэтому не поленитесь и обязательно прочтите, а лучше примените эти знания на своих проектах.

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

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

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

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

Как правильно оформлять заголовки?

Заголовок на странице должен быть один и оформлен в тег

<h1>Заголовок</h1>

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

<div itemtype="http://schema.org/Product">
    <h1 itemprop="name">Заголовок</h1>
</div>

Добавление хлебных крошек в сниппет

Хлебные крошки в выдаче добавляют еще больше ссылок на сайт:

Как оформить хлебные крошки для сайта

Для того, чтобы сделать отображение сайта таким, необходимо использовать схему: http://www.data-vocabulary.org/Breadcrumb/

И у каждой ссылки на раздел прописать следующее:

<div itemtype="http://www.data-vocabulary.org/Breadcrumb/">
    <a href="ссылка на страницу" itemprop="url">
        <span itemprop="title">название ссылки</span>
    </a>
</div>

Оформление отзывов и звездочек ★★★★★

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

Оформление звездочек в выдаче сайта

Для этого необходимо там, где у нас есть отзывы прописать следующее:

<div class="review" itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
    <meta itemprop="reviewCount" content="Отзывов: 1">
    <meta itemprop="ratingValue" content="5">
<div>

Микроразметка цены и наличие товара на сайте

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

<div itemtype="http://schema.org/Offer">
    <div itemtype="http://schema.org/ItemAvailability">
        <meta itemprop="price" content="450 р.">
        <meta itemprop="priceCurrency" content="RUB">
        <link itemprop="availability" href="http://schema.org/InStock">
        Цена: 450 р.
    </div>
</div>

Описание товара для сайт, description

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

<div itemtype="http://schema.org/Product">
    <p itemprop="description">Описание товара</p>
</div>

В результате всего вы получите следующее отображение сайта в выдаче:

описание товара в выдаче

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

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

  1. Яндекс валидатор микроразметки
  2. Google Инструмент проверки структурированных данных