Марат-блог
Услуги по продвижению и разработке сайта
Отправить заявку
Заказать обратный звонок

Спасибо, Ваша заявка принята.

В ближайшее время менеджер свяжется с Вами.

Главная SEO SEO, словарь и синтаксис: поговорим о микроразметке
SEO, словарь и синтаксис: поговорим о микроразметке
SEO
114
23 мая 2017

SEO, словарь и синтаксис: поговорим о микроразметке

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

Но не стоит торопиться. Для начала важно определить, с чем мы имеем дело.

Микроразметка и правила её внедрения

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

К примеру, на странице «О нас» или «Контактные данные» необходимо при помощи микроразметки выделить блок с контактами – в этом случае робот покажет необходимую страницу при запросе «контакты компании Х».

При помощи валидатора микроразметки от Яндекса можно с легкостью проверить корректность ее написания:

 

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

Если сайт является крупным, то 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>

Микроформаты: с чем мы имеем дело?

Микроформатами (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, что будет добавляться в Фейсбук.

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

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

FOAF

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

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 ранее активно разрабатывал Гугл, но на данный момент он полностью объединен с Schema.org.

Популярная микроразметка «хлебные крошки» - это именно из этого словаря. Например:

<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 внедряют для продукции при электронной торговле. С его помощь. Можно подробно описывать книги, рекламные каталоги, авто, концертные билеты и многое другое. Данный словарь используют на некоторых зарубежных сайтах.

Вот какой может быть микроразметка:

<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>

  1. 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>

  1. 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, указаны в двойных кавычках: "Имя";
  • число — обычные числа, но нельзя ставить 0 перед числом: [01];
  • true и false — бинарные данные;
  • null — отсутствие значения. Нередко используют для очищения данных.

Итоги

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

Далее нужно распределить общие блоки микроразметки.

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

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

Успехов!