Практический опыт улучшения сайтов дает знания о том, как внедрить на сайт микроразметку и получить эффект. В статье приводятся примеры правильной установки микроформатов на сайт.
Что такое микроформат?
Микроформат это возможность описать типы информации на странице через внедрение специальных слов в код html. Семантические свойства информации на вебстранице оформляются в специальные поля, определенные стандартом микроформата для этого типа информации.
Чаще всего применяется атрибут class внутри html тегов <div> и <span>.
Формат RDFa
RDFa это комплект стандартов (от английского Resourse Description Framework in attributes) который дает возможность определять типы информации описывая элементы и их свойствами этих элементов.
Пример микроразметки RDFa
Пример реализации пути с применением микроразметки RDFa:
<div xmlns:v="http://rdf.data-vocabulary.org/#" >
<span typeof="v:Breadcrumb" ><a href="/" rel="v:url" property="v:title">Главная</a></span>
<span typeof="v:Breadcrumb" ><a href="/parts/" rel="v:url" property="v:title">Запчасти</a></span>
<span typeof="v:Breadcrumb" ><a href="/parts/dvs/" rel="v:url" property="v:title">Двигателя</a></span>
<span typeof="v:Breadcrumb" ><a href="/parts/dvs/toyota/" rel="v:url" property="v:title">Тойота</a></span>
3S, 4S, 4S 1NZ, 2NZ
</div>
К этим же стандартам микроформатов относится OpenGraph (OG), который применяется для корректной передачи контента с сайта в социальную сеть Facebook.
Атрибуты OpenGraph (OG)
Наиболее часто используемые атрибуты Opengraph приведены в таблице
№ |
Атрибут |
Описание атрибута |
1 |
og:title |
Заголовок текста страницы или статьи. |
2 |
og:type |
Тип информационного материала. |
3 |
og:image |
Ссылка изображение ( которое будет выбрано для публикации в социальной сети). |
4 |
og:url |
Ссылка на страницу с информацией.
|
5 |
og:description |
Описание, анонс - краткое содержание для привлечения внимания и мотивации к переходу на страницу из социальной сети
|
Пример использования микроформата OpenGraph (OG)
Чаще всего используется в странице в тегах <meta>:
<meta property="og:title" content="Заголовок статьи">
<meta property="og:image" content="http://example.com/img1.jpg">
<meta property="og:description" content="Описание статьи которое заинтересует читающего">
<meta property="og:url" content="http://example.com/statia" >
Применение микроразметки на сайте
Микроразметка на сайте значительно повышает юзабилити сайта, а именно:
- Формирование более точного сниппета в поиске
- Правильная передача содержимого в социальные сети
- Автоматическое отображение местоположения на картах Yandex и Google.
- Формирование описания мультимедийного содержания страницы
- Выделение ссылок
Проверка валидности микроразметки
Правильность вставки микроразметки и передачу данных в форматах OpenGraph (OG) и/или RDFa можно проверить при помощи инструмента для вебмастеров от Яндекса https://webmaster.yandex.ua/microtest.xml или валидатором на сайте для разработчиков от Google https://developers.google.com/structured-data/testing-tool
Заключение
Микроформаты можно понимать как таблицу значений, которые понимаются поисковые системы и соцсети, и такое понимание значительно улучшает поисковую выдачу. Дополнительным преимуществом такого подхода является то, что указание на данные внутри вебстраницы не требует новых языков или технологий, так как встраивается в html-код веб страницы и может быть использована для всех сайтов.
Интересный момент: А еще микроразметка в странице может выделить самое важное в тексте страницы для передачи в базу знаний, создать кнопки для определенных действий в почтовых сообщениях и многое многое другое.