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

Микроразметка сайта
SEO специалист агентства Ракурс
программист агентства Ракурс
 131
21.01.2019
Микроразметка сайта

Содержание:

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

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

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

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

Существует несколько языков семантической разметки, с помощью которых можно разметить код сайта. Наиболее популярными из них являются микроформаты, RDFa, schema.org и Open Graph. Специалисты компаний Google и Яндекс рекомендуют использовать стандарт schema.org.

Основные принципы разметки

Рассмотрим принципы разметки на конкретно взятом примере. Допустим, у вас есть страница «Контакты», содержащая информацию о компании. HTML-код может выглядеть примерно так:

<div> <div>ТТЦ «Останкино»</div> Контакты: <div> Адрес: Академика Королева, 12, 127427, Москва, </div> Телефон: +7 (495) 926–61–11, Электронная почта: ttc@telecenter.ru </div>

Сначала нужно указать, какая именно часть вашей страницы относится к организации. Для этого к тегу <div>, в котором находится данная информация, добавим атрибут itemscope. Таким образом, мы обозначили, что код, содержащийся в этом блоке, описывает некую сущность.

Однако, мы только сообщили, что речь идет о некоторой сущности, но пока еще не уточнили, что за сущность мы имели в виду. Для указания типа сущности, после itemscope необходимо добавить атрибут itemtype.

<div itemscope itemtype="https://schema.org/Organization"> <div itemprop="name">ТТЦ «Останкино»</div> Контакты: <div> Адрес: Академика Королева, 12, 127427, Москва, </div> Телефон: +7 (495) 926–61–11, Электронная почта: ttc@telecenter.ru </div>

Таким образом, мы дали поисковым системам понять, что сущность, заключенная в теге <div>, представляет собой организацию. Наименования типов имеют вид URL, в данном примере https://schema.org/Organization.

Какую еще информацию о компании вы можете передать? Например, адрес, телефон и email. Для указания свойства сущности используют атрибут itemprop. Например, для того чтобы указать адрес организации, нужно добавить itemprop="address" к блоку, в котором содержится адрес. Полный перечень свойств, которые можно передать для организации, указан на странице https://schema.org/Organization.

<div itemscope itemtype="https://schema.org/Organization"> <div itemprop="name">ТТЦ «Останкино»</div> Контакты: <div itemprop="address"> Адрес: Академика Королева, 12, 127427, Москва, </div> Телефон: <span itemprop="telephone">+7 (495) 926–61–11</span>, Электронная почта: <span itemprop="email">ttc@telecenter.ru</span> </div>

Для привязки атрибутов itemprop к соответствующей информации в блоке, мы внесли дополнительные теги <span>. Они не влияет на отображение страницы, поэтому их очень удобно использовать с itemprop.

Теперь поисковые системы будут знать, что url http://www.example.com/contacts/ – это не просто ссылка, а ссылка на страницу с контактными данными организации, расположенной по такому-то адресу и имеющей такой-то телефон.

Некоторые свойства сущности могут быть самостоятельными сущностями со своим набором свойств. Так, например, почтовый адрес можно описать в виде сущности типа PostalAddress со свойствами streetAddress, addressLocality и postalCode. Для уведомления о том, что свойство является сущностью, нужно после соответствующего атрибута itemprop добавить itemscope.

<div itemscope itemtype="https://schema.org/Organization"> <div itemprop="name">ТТЦ «Останкино»</div> Контакты: <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress"> Адрес: <span itemprop="streetAddress">Академика Королева, 12</span>, <span itemprop="postalCode">127427</span>, <span itemprop="addressLocality">Москва</span>, </div> Телефон: <span itemprop="telephone">+7 (495) 926–61–11</span>, Электронная почта: <span itemprop="email">ttc@telecenter.ru</span> </div>

Кроме типа Organization schema.org содержит еще много других сущностей со своими наборами свойств.

Общий универсальный тип Thing имеет свойства name, description, url и image. У более частных специализированных типов есть общие свойства с универсальными типами. Так, например, Place – это частный случай типа Thing, а LocalBusiness представляет собой частный случай типа Place. Таким образом, частный тип наследуют основные свойства родительского типа. Т.е. LocalBusiness – это и частный случай типа Place, и частный случай типа Organization, следовательно, он наследует свойства обоих родителей.

Перечисления и ссылки на канонические страницы

У некоторых свойств есть только строго определенный набор значений. Например, если товарное предложение своего магазина вы разметили схемой Offer, то в свойстве availability (наличие) вы можете указать только одно из возможных значений: In stock (в наличии), Pre-order (на заказ), Out of stock (отсутствует) и т.д. Значения таких перечисляемых свойств задаются по аналогии с типами сущностей schema.org в виде URL.

Ниже представлено товарное предложение в виде сущности типа Offer с соответствующим набором свойств:

<div itemscope itemtype="https://schema.org/Offer"> <span itemprop="name">Supreme Strength</span> <span itemprop="price">$8.25</span> <span itemprop="availability">В наличии</span> </div>

А вот это же самое предложение с использованием тега <link> и атрибута href, который позволяет указать единственно допустимое значение свойства availability:

<div itemscope itemtype="https://schema.org/Offer"> <span itemprop="name">Supreme Strength</span> <span itemprop="price">$8.25</span> <link itemprop="availability" href="https://schema.org/InStock" />В наличии </div>

Schema.org предлагает список допустимых значений только для некоторых свойств – в том случае, если у них указан набор этих значений. Так, например, допустимые значения свойства availability прописаны в типе ItemAvailability.

Недостающая или неявная информация

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

В таком случае рекомендуется использовать тег <meta> с атрибутом content. В примере ниже – картинка с рейтингом товара:

<div itemscope itemtype="https://schema.org/Offer"> <span itemprop="name">Supreme Strength</span> <span itemprop="price">$8.25</span> <img src="four-stars.jpg" /> 20 оценок </div>

А вот тот же пример с размеченной информацией о рейтинге:

<div itemscope itemtype="https://schema.org/Offer"> <span itemprop="name">Supreme Strength</span> <span itemprop="price">$8.25</span> <div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating"> <img src="four-stars.jpg" /> <meta itemprop="ratingValue" content="4" /> <meta itemprop="bestRating" content="5" /> <span itemprop="ratingCount">20</span> оценок </div> </div>

Однако не стоит злоупотреблять таким приемом. Тег <meta> с атрибутом content рекомендуется использовать только в том случае, если нет возможности разметить информацию каким-либо другим способом.

Примеры

Хлебные крошки

<ol itemscope itemtype="https://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="https://example.com/catalog/"> <span itemprop="name">Каталог</span> </a> <meta itemprop="position" content="1" /> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="https://example.com/catalog/dresses/"> <span itemprop="name">Платья</span> </a> <meta itemprop="position" content="2" /> </li> </ol>

Организация

<div itemscope itemtype="https://schema.org/LocalBusiness"> <link itemprop="logo" href="https://example.com/images/logo.png" /> <span itemprop="name">Название</span> <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"> <span itemprop="ratingValue">4</span> звезды - на основании <span itemprop="reviewCount">250</span> отзывов </div> <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress"> <span itemprop="streetAddress">ул. Почтовая, 1</span> <span itemprop="addressLocality">г. Подольск</span>, <span itemprop="addressRegion">Московская обл.</span>, <span itemprop="postalCode">123456</span> </div> <span itemprop="telephone">+7 (123) 456-78-90</span> <a itemprop="url" href="https://example.com">www.example.com</a> Время работы: <meta itemprop="openingHours" content="Mo-Fr 09:00-21:00">Пн-Пт 09:00 - 21:00 <meta itemprop="openingHours" content="Sa-Su 10:00-20:00">Сб-Вс 10:00 - 20:00 Диапазон цен: <span itemprop="priceRange">5000-15000 руб.</span> </div>

Каталог товаров

<div itemscope itemtype="https://schema.org/Service"> <meta itemprop="serviceType" content="Продажа смартфонов" /> <meta itemprop="areaServed" content="Россия" /> <div itemprop="provider" itemscope="" itemtype="https://schema.org/Organization"> <meta itemprop="name" content="Название" /> <meta itemprop="telephone" content="+7 (123) 456-78-90" /> <meta itemprop="address" content="г. Город, ул. Улица, 1"> </div> <div itemprop="hasOfferCatalog" itemscope itemtype="https://schema.org/OfferCatalog"> <!--Товар--> <div itemprop="itemListElement" itemscope itemtype="https://schema.org/Offer"> <div itemprop="itemOffered" itemscope itemtype="https://schema.org/Product"> <a href="https://example.com/catalog/SM-G965FZKHSER/" itemprop="url"> <img itemprop="image" src="https://example.com/upload/image.jpg" alt="" /> <span itemprop="name">Название товара</span> </a> <div itemprop="offers" itemscope itemtype="https://schema.org/Offer"> <meta itemprop="price" content="2000.00" /> <meta itemprop="priceCurrency" content="RUB" /> <link itemprop="availability" href="https://schema.org/InStock" /> </div> </div> </div> <!--/Товар--> ... </div> </div>

Товар

<div itemscope itemtype="https://schema.org/Product"> <meta itemprop="name" content="Название товара" /> <meta itemprop="model" content="Модель" /> <meta itemprop="brand" content="Бренд" /> <meta itemprop="description" content="Описание" /> <div itemprop="sku">SM-G965FZKHSER</div> <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject"> <img itemprop="contentUrl" src="https://example.com/upload/image.jpg" alt="" /> </div> <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"> <meta itemprop="ratingValue" content="4" /> <meta itemprop="reviewCount" content="1" /> </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review"> <meta itemprop="datePublished" content="2018-02-05" /> <meta itemprop="name" content="Название" /> <link itemprop="url" href="https://example.com/review.html" /> <div itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating"> <meta itemprop="ratingValue" content="4" /> </div> <div itemprop="itemReviewed" itemscope itemtype="https://schema.org/Organization"> <meta itemprop="name" content="Компания" /> <meta itemprop="telephone" content="+7 (123) 456-78-90" /> <meta itemprop="address" content="г. Город, ул. Улица, 1" /> </div> <div itemprop="author">Автор</div> <div itemprop="description">Текст отзыва</div> </div> </div>

Вопрос-ответ

<div itemscope itemtype="https://schema.org/Question"> <div itemprop="name">Вопрос</div> <div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer"> <meta itemprop="upvoteCount" content="1" /> <div itemprop="text">Текст ответа</div> </div> </div>

Тестирование разметки

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

Racurs Agency
115184, ул. Большая Татарская, 35, стр. 7-9
+74952290161

Рекомендуемые статьи

Оглавление
Готовы получить?
БлагородноеSEO
БомбическийCONTENT
ДерзкийSMM
Написать нам
Предложение, от которого не отказаться