Разработка, сопровождение и развитие сайтов

Услуги
Создание разработка сайта
Сопровождение и администрирование
Маркетинг и продвижение сайта
Назад
Назад
Маркетинг и продвижение сайта
SEO-продвижение
Контекстная реклама
Назад
+7 846 215-04-47

Заказать звонок

Настройка микроразметки

Вам нужна микроразметка, если вы хотите улучшить:

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

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

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

Сейчас микроразметку поддерживают все популярные поисковые системы, такие как Яндекс и Google.

Разметка по стандарту schema.org

Schema.org – это один из самых популярных форматов микроразметки. Разметка товара выполняется коде страницы. Товар оборачивается в контейнер с атрибутом. Для товаров это атрибут “itemtype” со значением http://schema.org/Product

1

<div itemscope="" itemtype="http://schema.org/Product"> </div>

Внутри контейнера нужно выводить все данные, относящиеся к товару, например цену и описание:

1

<span itemprop="price">1250</span>

2

<span itemprop="description">Готовый шаблон сайта на CMS Prestashop Elite Power Gym Store купить в магазине по продаже готовых шаблонов веб сайтов Capybara Digital. Готовые сайты по тематике Кафе и Рестораны можно заказать на сайте или по телефону <a href="tel:88462150447">88462150447</a>.</span>

Внутри основного контейнера могут находиться вложенные сущности. Например, http://schema.org/Offer торговое предложение, которое будет включать информацию о цене, валюте, продавце.

1

<div itemscope="" itemtype="http://schema.org/Product"> <div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"> </div> </div>

Schema.org построена на простом синтаксисе и понятной структуре, но иногда появляются ошибки. Выявить ошибки можно с помощью валидатора микроразметки. Например, от Яндекса — https://webmaster.yandex.ru/tools/microtest/, или от Google — https://search.google.com/structured-data/testing-tool?hl=ru;

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

Рассмотрим микроразметку товара на примере страницы:

Исходный код выглядит так:

(Чтобы было визуально проще сориентироваться код сокращен до минимума).

1

<h1>Автобокс на крышу Черный ACTIVE S (320 л) Аэродинамический</h1>

2

<img src="/img.jpg" itemprop="image">

3

<div>12 400 руб</div>

4

<div>Автомобильный бокс ACTIVE S выполнен из тиснённого АБС-пластика. Данный автобокс подойдет на крышу автомобилей с небольшой крышей, например малолитражных автомобилей, а также на автомобили с типом кузова седан или хэтчбек.</div>

5

<div>Производитель: PT GROUP</div>

6

<div>Модель 00002530</div>

После разметки карточки по правилам schema.org получается:

1

<div itemscope itemtype="http://schema.org/Product">

2

<h1 itemprop="name">Автобокс на крышу Черный ACTIVE S (320 л) Аэродинамический</h1>

3

<img src="/img.jpg" itemprop="image">

4

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

5

<div>12 400 руб</div>

6

<meta itemprop="price" content="12 400.00">

7

<meta itemprop="priceCurrency" content="RUB">

8

</div>

9

<div itemprop="description">Автомобильный бокс ACTIVE S выполнен из тиснённого АБС-пластика. Данный автобокс подойдет на крышу автомобилей с небольшой крышей, например малолитражных автомобилей, а также на автомобили с типом кузова седан или хэтчбек.</div>

10

<div>Производитель: <span itemprop="brand">PT GROUP</span> </div>

11

<div>Модель: <span itemprop="model">00002530</span> </div>

12

</div>

Это и есть микроразметка товара — используя теги schema.org нужно разметить код страницы и привести к требуемому виду данные, не подходящие по формату, например потребовалось вывести цены в формате для пользователя и в формате schema.org. Для проверки корректности выполненной работы нужно воспользоваться валидатором микроразметки от Яндекс https://webmaster.yandex.ru/tools/microtest/;

Контейнеры микроразметки

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

1

<div itemscope itemtype="http://schema.org/Product">

2

Размеченный код карточки товара

3

</div>

Внутри контейнера Product находится вложенный Offer. Этот блок дает понять роботу что внутри находится конкретное торговое предложение с ценой и валютой товара.

1

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

2

Размеченный код торгового предложения.

3

</div>

Модель “model”

itemprop=“model” — атрибут содержит модель изделия. Это может быть тип, вид, номер или модификация. Необязательный для заполнения.

Синтаксис: itemprop=“model”

Пример использования:

1

<img src="/img.jpg" itemprop="image">

Описание “description”

itemprop=“description” — атрибут содержащий текстовое описание товара. Не является обязательным.

Синтаксис: itemprop=“description”

Пример использования:

1

<div itemprop="description">Автомобильный бокс ACTIVE S выполнен из тиснённого АБС-пластика. Данный автобокс подойдет на крышу автомобилей с небольшой крышей, например малолитражных автомобилей, а также на автомобили с типом кузова седан или хэтчбек.</div>

Продавец товара “seller”

itemprop=“seller” — атрибут, который содержит текстовое поле с названием продавца. Не обязательное поле. В разобранном примере продавец не указан, но для повышения качества страницы по возможности это поле нужно использовать.

Синтаксис: itemprop=“seller”

Пример использования:

1

<span itemprop="seller">Продавец</span>

В статье описаны самые популярные схемы и атрибуты разметки страниц.