Микроформаты микроданных для сайта


Микроформаты микроданных для сайта

Практический опыт улучшения сайтов дает знания о том, как внедрить на сайт микроразметку и получить эффект. В статье приводятся примеры правильной установки микроформатов на сайт.

 

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

Микроформат это возможность описать типы информации на странице через внедрение специальных слов в код 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-код веб страницы  и может быть использована для всех  сайтов.

 

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