Мы, команда «Цифрового Элемента», часто внедряем на сайты разные виды микроразметки. Микроразметка позволяет «улучшить» сайт для поисковых систем, социальных сетей и прочих сервисов, которые нуждаются в разметке данных. Она является неким ориентиром, который позволяет дать понять другим сайтам, какие элементы вы используете на сайте и что они содержат. Именно поэтому, микроразметку часто называют семантической разметкой.
Мир микроразметки устроен немного сложно и на первый взгляд будет непросто понять, как это вообще работает. Чтобы в этом разобраться, мы опишем все существующие виды микроразметки и расскажем, как и зачем их применяют.
Состав микроразметки
Любая микроразметка внедряется на уровне HTML с помощью добавления определенных тегов и атрибутов к тегам, которые указывают поисковым роботам на то, о чем написано на всей странице или на конкретном блоке страницы.
Каждая микроразметка состоит из словаря и синтаксиса.
Словарь — это язык микроразметки или, по-другому, набор сущностей по типу «name», «title» и пр. Например, сущность «title» будет описывать название элемента, а «name» имя.
Синтаксис — это способы разметки микроразметки, которые включают в себя теги, атрибуты и элементы, описывающие микроразметку. Например, микроразметку schema.org можно описать с помощью JSON-LD или с помощью добавления сущностей непосредственно в теги HTML, которые содержат элемент. Подробнее это разберем ниже.
Виды микроразметки
Всего существует 6 видов микроразметки:
- Schema.org. Разметка, которую разрабатывают поисковые системы Яндекс, Google и другие крупные поисковые системы. Позволяет получать расширенный сниппет в поисковой выдаче и не только;
- Open Graph. Разметка, разработанная компанией Facebook. Позволяет формировать превью сайта при публикации в социальных сетях;
- Dublin Core. Разметка, разработанная международной междисциплинарной группой профессионалов библиотечного дела, компьютерных наук, кодирования текстов, музейного дела и других смежных групп. Позволяет тематически разделить всей сайты и их страницы во всемирной паутине. Является стандартом;
- Microformats. Разметка, которая содержит несколько видов разметок. Схожа по типу schema.org. Позволяет получать расширенный сниппет в поисковой выдаче. Плавно перетекает в Schema.org;
- Data vocabulary. Устаревшая микроразметка от компании Google. Плавно перетекла в Schema.org;
- Good Relations. Устаревшая микроразметка от компании Google. Разработка перетекла в Schema.org.
1. Schema.org
Пожалуй, наиболее популярная микроразметка, которая используется для продвижения сайта. С помощью этой микроразметки можно разметить практически все элементы и блоки на сайте: отзывы, навигацию, пагинацию, товары, рейтинг, организацию, профиль и др.
Популярность такой разметке пришла из-за её универсальности. Во-первых, практически любой элемент можно разметить. Во-вторых, эти элементы можно разметить синтаксисом «Микроданные» (непосредственно внутри верстки), JSON-LD (через тег "script") и «RDFA» (непосредственно внутри верстки, но отличным от типа «Микроданные»).
Schema.org используется для SEO оптимизации.
Её разрабатывают и поддерживают Яндекс, Google, Bing и Yahoo!, чтобы вебмастерам не пришлось размечать данные для каждого поисковика отдельно.
Пример разметки организации внутри HTML
<div itemscope itemtype="http://schema.org/Organization">
<div itemprop="name">название_компании</div>
<link itemprop="url" href="ссылка_на_сайт">
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="postalCode">почтовый_индекс</span>,
<span itemprop="addressCountry">Страна</span>,
<span itemprop="addressRegion">Область</span>,
<span itemprop="addressLocality">Город</span>,
<span itemprop="streetAddress">улица, номер_дома</span>
</div>
<div>Телефон: <a itemprop="telephone" href="tel:+79999999999">+7 (999) 999-99-99</a></div>
<div>Почта: <a itemprop="email" href="mailto:email@email. ru">email@email. ru</a></div>
<div>Факс: <a itemprop="faxNumber" href="tel:+79999999999">+7 (999) 999-99-99</a></div>
</div>
Та же разметка, но с помощью JSON-LD:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"address": {
"@type": "PostalAddress",
"postalCode": "почтовый_индекс",
"addressCountry": "Страна",
"addressRegion": "Область",
"addressLocality": "Город",
"streetAddress": "улица, номер_дома"
},
"email": "email@email. ru",
"faxNumber": "+7 (999) 999-99-99",
"name": "название_компании",
"url": "ссылка_на_сайт",
"telephone": "+7 (999) 999-99-99"
}
</script>
Подробнее о том, как установить schema.org к себе на сайт мы описали в статье.
Русскоязычная версия с неполным переводом: http://ruschema.org.
2. Open Graph
Изначально микроразметка была создана для социальной сети Facebook, но после её начали использовать и другие социальные сети. Сейчас Open Graph используют Facebook, Яндекс, Вконтакте, Google+, Twitter, Pinterest и др. В Яндексе микроформат используется для передачи данных в Яндекс.Видео. Её используют даже WhatsApp, Viber и Telegram.
Open Graph был создан для загрузки предварительной информации о ссылке, которую мы публикуем в соц. сетях или мессенджерах.
Таким образом, пользователь понимает, что это за ссылка и её краткое содержание.
Пример разметки страницы внутри HTML
<meta property="og:title" content="Какой текст необходим для продвижения / Блог Цифрового Элемента" /> <meta property="og:description" content="Какой текстовый контент должен быть на сайте, чтобы привлечь целевую аудиторию и увеличить трафик сайта? Самые популярные вопросы при составлении ТЗ копирайтеру." /> <meta property="og:type" content="article" /> <meta property="og:image" content="https://d-element.ru/upload/iblock/f48/oblozhka.png" /> <meta property="og:url" content="https://d-element.ru/about/blog/kakoy-tekst-neobkhodim-dlya-prodvizheniya" />
Подробнее о том, как установить Open Graph к себе на сайт мы описали в статье.
3. Dublin Core
Микроразметка Dublin Core была создана в 1995 г. для формирования большой библиотеки сайтов во всемирной паутине. Является стандартом разметки всемирной паутины.
В России с 2011 года для него даже действует государственный стандарт ГОСТ Р 7.0.10-2010 (ИСО 15836:2009).
Dublin Core устанавливается также, как Open Graph – для всей страницы сразу.
Разметка используется для разметки страниц сайта и разделения его на тематически составляющие страницы.
Таким образом, можно сказать поисковым роботам как правильно индексировать эту страницу.
В настоящее время нельзя увидеть явные изменения по сайту, используя разметку Dublin Core, но абсолютно точно можно сказать, что поисковые системы не могут игнорировать её. По крайней мере, в России. Влияет ли разметка на SEO доподлинно неизвестно. Именно из-за отсутствия видимого результата многие не используют эту разметку.
Мы связались с тех. поддержкой Яндекса, они ответили, что разметка Dublin Core никак не влияет на его продвижение.
Пример разметки страницы внутри HTML
<meta name="DC.title" content="заголовок"/> <meta name="DC.creator" content="создатель"/> <meta name="DC.description" content="описание" /> <meta name="DC.subject" content="ключевые слова"/> <meta name="DC.publisher" content="издатель" /> <meta name="DC.publisher.url" content="полная ссылка на сайт издателя" /> <meta name="DC.contributor" content="соисполнитель" /> <meta name="DC.date" content="дата в формате UTC" /> <meta name="DC.type" content="тип страницы" /> <meta name="DC.language" content="ru-RU" />
Подробнее о том, как установить Dublin Core к себе на сайт мы описали в статье.
4. Microformats
Микроразметка Microformats очень похожа на Schema.org. Имеет множество свойств для разметки данных, но большая часть находится в стадии черновиков. Проигрывает Schema.org из-за меньшего количества набора объектов и свойств.
Микроформаты (Microformats) были созданы в 2007 году инициативной группой. Они хотели создать стандарт семантической разметки сайтов, используя уже существующие технологии. И это было их реальным плюсом на старте, но сейчас добавлять разметку микроформатов стало не проще, а иногда и сложней по сравнению с schema.org. Сейчас микроразметку используют все меньше и меньше.
В 2013 г. был анонсирован новый формат — microformats 2, в котором есть новые названия классов и упрощения для уже используемых свойств, но на популярности этой микроразметки это почти никак не сыграло.
Микроформаты, как и schema.org, используются для SEO оптимизации.
В настоящее время поисковыми системами поддерживаются микроформаты:
- hCard — формат разметки контактной информации (адресов, телефонов и т.д.);
- hRecipe — формат для описания кулинарных рецептов;
- hReview — формат разметки отзывов (Яндекс не поддерживает);
- hProduct — формат разметки товаров (Яндекс не поддерживает).
Стоит отметить, что микроформаты – это открытый формат. Это означает, что вы не сможете проконтролировать, какие именно сервисы возьмут данные и как в дальнейшем они их будут использовать.
Пример разметки hCard внутри HTML
<div class="vcard">
<div>
<span class="category">Кафе</span>
<span class="fn org">Шафран</span>
</div>
<div class="adr">
<span class="locality">Город</span>,
<span class="street-address">адрес</span>
</div>
<div>Телефон: <span class="tel">+7 (999) 999-99-99</span></div>
<div>
Мы работаем
<span class="workhours">ПН-ПТ с 09:00 до 18:00</span>
<span class="url">
<span class="value-title" title="ссылка на сайт кафе"></span>
</span>
</div>
</div>
Подробнее о том, как установить Микроформаты к себе на сайт мы описали в статье.
Официальный сайт Microformats.org.
5. Data vocabulary
Микроразметка Data vocabulary разрабатывалась компанией Google. На данный момент, разработка словаря приостановлена и плавно перетекла в сторону schema.org.
Сейчас уже нет смысла устанавливать её на сайт, т.к. компания перестала её поддерживать в 2011 г.
Ранее разметка поддерживала типы Person, Organization, Breadcrumb, Review, Product, Address. Сейчас эти типы также используются в Schema.org.
Официальный сайт Data vocabulary.
6. Good Relations
Разметка Good Relations была создана в 2008 г. и изначально планировалось использовать её для описания товаров и услуг. В 2012 г. разработка Good Relations интегрирована в Schema.org и теперь её, по сути, не существует. В Рунете этот словарь практически не использовался и с 2008 по 2012 её распознавал только Google.
Пример разметки товара внутри HTML
<div typeof="gr:Offering" about="#offer">
<div property="gr:name">название товара</div>
<link rel="gr:hasBusinessFunction" resource="http://purl.org/goodrelations/v1#Sell" />
<div rel="gr:hasPriceSpecification">
<div typeof="gr:UnitPriceSpecification">Цена:
<span property="gr:hasCurrency" content="валюта">валюта</span>
<span property="gr:hasCurrencyValue" datatype="xsd:float">стоимость</span>
<div property="gr:validThrough" datatype="xsd:dateTime" content="дата в формате UTC"></div>
</div>
</div>
Еще примеры. У разметки также есть свой валидатор.
Официальный сайт Good Relations.
Рекомендации
На сегодняшний день рекомендуем использовать микроразметку Schema.org и Open Graph, остальные виды микроразметки уже не поддерживаются или стали не актуальны.
