Блог про интернет-маркетинг для бизнеса

SEO

Микроразметка: что нужно знать SEO-специалисту о словарях и синтаксисе

163
2
8
89

Что делать, если ваш уникальный, качественный и полезный контент в упор не видит Google? Поисковым системам можно и нужно помогать — специально для этих целей и существует микроразметка. Благодаря ей поисковые роботы быстрее и четче находят нужную пользователям информацию на страницах сайта.

Но вначале разберемся с главным.

Что такое микроразметка и как её внедрять?

Микроразметка — своего рода единый язык, который одинаково понимают и трактуют поисковые роботы Google, Яндекс, Bing, Yahoo. Об этом они «договорились» еще в далеком 2011 году. Язык этот состоит из специальных тегов (например <div>, <span>) и их содержимого. С помощью микроразметки можно показать роботам, что определенный текст или другие элементы на странице важны и принадлежат к определенному типу данных (поисковые роботы еще несовершенны в трактовке смысла контента и расстановке приоритетов).

Например, на странице «О нас» или «Контакты» компании стоит выделить микроразметкой блок с контактными данными — в таком случае на запрос пользователя «контакты компании N» робот безошибочно покажет нужную страницу и нужные данные.

Другой пример. Допустим, мы хотим, чтобы роботы поняли: эта маленькая картинка сверху — логотип компании.

Что такое микроразметка и как её внедрять

Нажмите правой кнопкой мыши на фото и выберите «Копировать URL картинки»:

Нажмите правой кнопкой мыши на фото и выберите «Копировать URL картинки»

Для разметки логотипа следует указать:

  1. Словарь микроразметки.
  2. Тип данных. В нашем случае — “Organization”.
  3. URL-адрес ресурса.
  4. URL-адрес логотипа.

Получаем фрагмент микроразметки для логотипа:

<script type="application/ld+json">
 {
   "@context": "http://schema.org",
   "@type": "Organization",
   "url": "http://www.example.com",
   "logo": "http://www.example.com/images/logo.png"
 }
</script>

Инструмент Structured Data Testing Tool от Google помогает проверить правильность оформления микроразметки:

Инструмент Structured Data Testing Tool от Google помогает проверить правильность оформления микроразметки

Результат:

Результат

Аналогичный инструмент от Яндекса — «Валидатор микроразметки»:

Так же копируем код в поле и нажимаем «Проверить»

Если все чётко, можно внедрять микроразметку в тело сайта или ставить соответствующую задачу программисту.

Больше примеров — в статье Андрея Бугорского.

Если сайт большой, SEO-специалист тратит достаточно много времени, определяя, какие типы страниц будут «размечены», какую именно информацию следует выделить. Конечно, для этого следует изучить основы языка микроразметки — словари и синтаксис.

Словари микроразметки

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

Как работать с Schema.org?

Schema.org нужен в первую очередь для формирования расширенного сниппета и повышения релевантности страницы.

Пример в результатах поиска:

Пример в результатах поиска

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

  • itemscope — описывает каждый блок отдельно, позволяет описать информацию на уровне сущности;
  • itemtype — указывает тип сущности;
  • itemprop — позволяет указать дополнительные свойства. Например, сущность — театральное событие. В таком случае можно указать название, дату спектакля, место проведения:

<div itemscope="" itemtype="http://schema.org/TheaterEvent">
<span itemprop="name">Viva Штраус</span>
<div itemprop="location" itemscope="" itemtype="http://schema.org/PerformingArtsTheater">
<meta itemprop="name" content="ХАТОБ"/>
<link itemprop="sameAs" href="http://hnatob.com/"/>
<meta itemprop="address" content="Харьков, Украина"/>
</div>
    <span itemprop="startDate" content="2016-25-12T19:00">Sun 25 December 2016 19:00</span>
</div>

Подробная документация по Schema.org — на официальном сайте.

Что такое микроформаты?

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

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

<p class="h-card">
 <img class="u-photo" src="http://one.org/photo1.png" alt="" />
 <a class="p-name u-url" href="http://one.org">Иван Петров</a>
 <a class="u-email" href="mailto:ivan_petrov@gmail.com">ivan_petrov@gmail.com</a>, 
 <span class="p-street-address">Ярослава Мудрого, 15</span>
 <span class="p-locality">Харьков</span>
 <span class="p-country-name">Украина</span>
</p>

Яндекс различает несколько микроформатов:

  • hCard — для разметки контактов (телефон, адрес, контактные данные);
  • hRecipe —  для разметки кулинарных рецептов, позволяет указать ингредиенты, инструкции к приготовлению, фото, количество порций;
  • hReview — для разметки на страницах отзывов, позволяет размечать текст отзыва, оценку, достоинства и недостатки продукта, дату.

Google способен определить большее количество микроформатов в дополнение к описанным:

  • hProduct и GoodRelations — разметка товаров на сайте;
  • формат разметки организации и компании;
  • hCalendar — разметку мероприятий, позволяет указать дату начала и окончания мероприятия, место проведения.

Формат для разметки видео — позволяет указать продолжительность, название, описание видеоконтента, указать ссылку.

В microformats.org для разметки применяются html-теги.

Пример разметки:

<div class="vcard">
<img class="photo" src="http://example.com/gagarin.jpg" />
<strong class="fn">Юрий Гагарин</strong>
<span class="title">Летчик-космонавт</span> 
<span class="org">Военно-воздушные силы СССР</span>
<a class="url" href=http://example.com/Гагарин>Страница Ю.Гагарина</a>
<div class="bday"> 
  <span class="value-title" title="1934-03-09">9 марта 1934</span>
</div>
<span class="note">Первый человек в космосе</span>
<span class="adr">
  <span class="type">work</span>
  <span class="locality">Байконур</span>
  <span class="country-name">Казахстан</span>
  <span class="postal-code">468320</span>
</span>
</div>

Как работать с Open Graph?

Open Graph — словарь, созданный Facebook, чтобы каждый сайт мог корректно отображаться в социальной сети. Элементами этого словаря можно разметить только один объект — человека, продукт или компанию.

Несколько обязательных тегов:

  • og:title — название объекта.
  • og:type — тип объекта. Если на странице больше одного объекта, необходимо выбрать главный и указать его тип. В разных типах можно указывать различные дополнительные свойства.
  • og:image — URL изображения.
  • og:url — канонический URL, который будет добавляться в Facebook.

Как работать с Open Graph

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

  • og:audio — ссылка на аудиофайл, который относится к объекту описания.
  • og:description — короткое описание.
  • og:locale — язык и страна, указывается в формате язык_страна. Значение по умолчанию — en_US.
  • og:locale:alternate — альтернативные языки, на которых доступно описание объекта.
  • og:site_name — название сайта.
  • og:video — ссылка на видео, которое относится к объекту описания.

Что такое FOAF?

FOAF (Friend of a Friend) описывает человека и связи между людьми. С помощью этого словаря можно указать степень близости людей. FOAF использует поиск Яндекса по блогам и позволяет максимально подробно описать блоги пользователей.

Что такое Dublin Core?

Dublin Core активно используется в библиотеках и музейном деле. Позволяет максимально подробно описать экспонаты и книги.

Пример:

<meta name="DC.Title" content="Заголовок веб-страницы">
<meta name="DC.Creator" content="Название сайта или имя создателя">
<meta name="DC.Subject" content="Тема">
<meta name="DC.Description" content="Краткое описание">
<meta name="DC.Publisher" content="Издатель">
<meta name="DC.Contributor" content="Соисполнитель">
<meta name="DC.Date" content="Дата создания">
<meta name="DC.Type" content="Тип">
<meta name="DC.Format" content="Формат">
<meta name="DC.Identifier" content="URL страницы (ID ресурса)">
<meta name="DC.Source" content="Источник">
<meta name="DC.Language" content="Язык">
<meta name="DC.Coverage" content="Геотаргетинг">
<meta name="DC.Rights" content="Авторское право">

Что такое Data Vocabulary?

Data Vocabulary раньше активно разрабатывался Google, но сейчас он полностью объединился с Schema.org.

Известная микроразметка «хлебные крошки» — это как раз из словаря Data Vocabulary.

Пример:

<div class="breadcrumbs">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://netpeak.ua/" itemprop="url">
<span itemprop="title">Netpeak</span>
</a>
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://netpeak.ua/about/" itemprop="url">
<span itemprop="title">О нас</span>
</a>
</span>
   </span>
</div>

Зачем нужен Good Relations?

Good Relations используется для продуктов в электронной торговле. Позволяет расширенно описать каталоги рекламы, книги, пользовательскую электронику, автомобили, билеты на концерты, туры, мероприятия и так далее. Этот словарь встречается на некоторых зарубежных сайтах (strobelight-shop.com, lux-case.se).

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

<div itemscope itemtype="http://purl.org/goodrelations/v1#Individual"
    itemid="#product">
 Weight: <link itemprop="weight" href="#weight">
</div>
<div itemprop="weight" itemscope 
    itemtype="http://purl.org/goodrelations/v1#QuantitativeValue" itemid="#weight">
    <span itemprop="hasValue">50</span> kg
    <meta itemprop="hasUnitOfMeasurement" content="KGM" >
</div>

Синтаксис микроразметки

Синтаксис — способ использования словаря. Он определяет, как будут указаны элементы словаря на странице. Опять-таки нет единого стандарта синтаксиса микроразметки.

1. Микроданные (microdata) содержат несколько основополагающих элементов:

  • itemscope определяет, что в теге находятся данные описания объекта.
  • itemtype указывает ссылкой на тип объекта;
  • itemprop определяет свойства объекта.

Как правило, размечаются данные, которые уже присутствуют на странице и видны пользователю. Но бывают ситуации, когда пользователю нужен человекопонятный формат, а в разметке необходимо использовать понятные для роботов данные. В этом случае рекомендуется указать информацию в атрибуте content любого тега или, как рекомендует Яндекс, добавить тег <meta>.

Например:

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Чехол для Iphone</span>
  <span itemprop="price">500 грн</span>
   <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <img class="aligncenter" src="four-stars.jpg" />
    <meta itemprop="ratingValue" content="4" />
   <meta itemprop="bestRating" content="5" />
Основан на <span itemprop="ratingCount">25</span> голосах пользователей
</div>
</div>

2. RDFa и RDFa Lite используются редко из-за сложностей в реализации. Могут описывать любую сущность — человека, объект, событие.

Пример:

<div vocab="http://schema.org/" typeof="Invoice">
<h1 property="description">January 2015 Visa</h1>
<a property="url" href="http://acmebank.com/invoice.pdf">Invoice PDF</a>
<div property="broker" typeof="BankOrCreditUnion">
<b property="name">ACME Bank</b>
</div>
<span property="accountId">xxxx-xxxx-xxxx-1234</span>
<div property="customer" typeof="Person">
<b property="name">Jane Doe</b>
</div>
<time property="paymentDueDate">2015-01-30</time>
<div property="minimumPaymentDue" typeof="PriceSpecification">
<span property="price">15.00</span>
<span property="priceCurrency">USD</span>
</div>
<div property="totalPaymentDue" typeof="PriceSpecification">
<span property="price">200.00</span>
<span property="priceCurrency">USD</span>
</div>
<meta property="billingPeriod" content="2014-12-21/P30D" />starts:2014-12-21 30 days
<link property="paymentStatus" href="PaymentDue" />
</div>

3. JSON-LD — описывают объекты на странице сайта с помощью словаря связанных данных. Разметка оформляется в виде «ключ — значение». Этот синтаксис определяет пространство зарезервированных ключей, которые смогут связать объект и описание в различных комбинациях.

Например:

{
 "name": "Manu Sporny",
 "homepage": "http://manu.sporny.org/",
 "image": "http://manu.sporny.org/images/manu.png"
}

Объект JSON — набор пар «ключ — значение», которые указываются в формате: {"title":"Конференция","date":"2014-11-30T12:00:00.000Z"}. Имена ключей одного объекта не должны дублироваться.

Типы данных:

  • массив — набор значений, указывается в формате: [0, 1, 2, 3];
  • строка — набор символов Unicode, указывается в двойных кавычках: "Вася";
  • число — обычные числа, но нельзя указывать ноль перед числом: [01];
  • true и false — бинарное значение;
  • null — отсутствующее значение. Обычно используется для очистки данных.

Выводы

Перед внедрением микроразметки следует определить, какое содержимое и какие типы страниц стоит «размечать».

Затем нужно распределить общие блоки микроразметки. Например, микроразметка «хлебных крошек» будет повторяться от страницы к странице, меняться будет только уровень вложенности. А вот контакты организации, скорее всего, будут размечаться только на странице «Контакты» или «О нас».

Пример внедрения «хлебных крошек» — в кейсе.

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

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

Словари микроразметки (первые три самые популярные):

  • Schema.org;
  • Микроформаты;
  • Open Graph;
  • FOAF;
  • Dublin Core;
  • Data Vocabulary;
  • Good Relations.

Синтаксисы микроразметки:

  • Microdata;
  • RDFa и RDFa Lite;
  • JSON-LD.

Комментарии (0)

Чтобы оставить комментарий, необходимо авторизироваться

Подписаться

на самую полезную рассылку по интернет-маркетингу

Самое

обсуждаемое популярное читаемое