Микроформаты в семантической разметке страницы сайта

Дата: 29.11.2016 Просмотров: 2011 Комментарии: 1

Микроформатами (сокращенно μF) называют способы семантической разметки некоторых блоков информации для лучшего семантического разбора страницы поисковыми системами. Этот тип разметки полностью основан на стандартных тегах языка HTML и XHTML, а следовательно проблем с интеграцией микроформатов на уже существующие веб-страницы возникнуть не должно.

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

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

Построение микроформатов

Для преобразования обычного блока разметки в микроформат необходимо воспользоваться добавлением к тегам определенных стандартизированных (в зависимости от типа микроформата) атрибутов, например, class, rel или title.

Рассмотрим пример. Ниже вы увидите отрывок HTML кода, описывающий визитную карточку определенного человека.

<div>
     <div>Dmitriy Kolyadenko</div>
     <div>WebMakers Corp.</div>
     <div>+38(099)557-77-05</div>
     <a href="https://webmakers.com.ua">Site</a>
</div>

Специальный микроформат hCard позволяет сделать этот блок кода семантически более значимым:

<div class="vcard">
     <div class="fn">Dmitriy Kolyadenko</div>
     <div class="org">WebMakers Corp.</div>
     <div class="tel">+38(099)557-77-05</div>
     <a class="url" href="https://webmakers.com.ua">Site</a>
</div>

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

Типы микроформатов

Каждый микроформат решает определенные задачи. В списке наиболее часто используемых микроформатов находятся:

  • hCard Сокращение от HTML vCard. Данный микроформат используется для описания людей? компаний, организаций и мест. Представляет собой визитную карточку в стандарте vCard. Определяется в блоке с помощью имени класса vcard.

Пример использования:

<div class="vcard">
     <div class="fn">Dmitriy Kolyadenko</div>
     <div class="org">WebMakers Corp.</div>
     <div class="adr">
          <div class="street-address">Urlovskaya St.</div>
          <div>
             <span class="locality">Kiev</span>
          </div>
          <div class="country-name">Ukraine</div>
     </div>
     <div class="tel">+38(099)557-77-05</div>
     <a class="url" href="https://webmakers.com.ua">Site</a>
</div>
  • hCalendar Сокращение от HTML iCalendar. Микроформат для описания событий в формате iCalendar на HTML-страницах. Представляет собой блок с описанием события, классы блоков представляют собой названия параметров, а содержимое (или атрибут title) их значение. Определяется в блоке с помощью имени класса vevent. Часто используется с микроформатом geo для указания точной геопозиции события. Обязательными параметрами считаются dtstart и summary.

Пример использования:

<div class="vevent">
     <div class="dtstart">2016-11-30T23:30:00+02</div>
     <div class="summary">Corporative meeting</div>
     <div class="location">Kiev</div>
     <div class="duration">03:30</div>
     <div class="description">Full description of event</div>
</div>
  • geo Данный микроформат используется для пометки географических данных. Может использоваться в сочетании с другими микроформатами. Определяется в блоке с помощью имени класса geo.
Пример использования:

<div class="geo">Yellowstone National Park: <span class="latitude">44.667</span>, <span class="longitude">-110.5</span></div>
  • hProduct Микроформат используется для описания товаров, продуктов и услуг
  • hReview Данный микроформат предназначен для оформления отзывов и комментариев пользователей
  • nofollow Микроформат для ссылок, указывающий, что данная ссылка не должна учитываться поисковыми системами для расчета рейтинга цитируемости сайта. Ссылки, помеченные этим микроформатом, не учитываются при расчете PageRank следующими поисковыми системами: Google, Bing, Yahoo!, Yandex. Пример использования:
<a rel="nofollow" href="https://webmakers.com.ua">Nofollow Link</a>
  • hRecipe Микроформат для продвижения сайтов кулинарных рецептов. Данный формат не влияет на отображение информации посетителям сайта. На его основе поисковой системой может быть составлен информативный сниппет на странице с результатами выдачи, что позволит пользователям принять решение о переходе на ресурс. Для оптимальной работы микроформат требует, чтобы на одной странице размещался только один рецепт. Родительский элемент — hRecipe, остальные располагаются внутри него. Обязательные элементы fn (название блюда), ingredient (объем или количество ингридиентов, данным классом должен помечаться каждый ингредиент), instructions (описание способа приготовления).

Пример использования:

<div class="hRecipe">
     <div class="fn">Delicious Pie</div>
     <ul>
          <li class="ingredient">1 egg</li>
          <li class="ingredient">1 cup of jam</li>
          <li class="ingredient">1 cup of milk</li>
          <li class="ingredient">2.5 cups of flour</li>
          <li class="ingredient">1 tsp of soda</li>
     </ul>
     <div class="instructions">All components connect. Soda, vinegar extinguish. The dough should look a little thicker than regular pancakes. Bake in the oven at 150C.</div>
</div>

Комментарии

Валерий
Валерий 22.10.2018

Спасибо за статью!

Написать комментарий

Популярные предложения

Новая Почта c калькулятором + отделения для Opencart 2.x

Новая Почта c калькулятором + отделения для Opencart 2.x

Модуль новой почты с калькулятором стоимости доставки + отделения для Opencart 2.x Калькулятор ново..

200 грн. 300 грн.

Модуль Приват24 для Opencart 2.x

Модуль Приват24 для Opencart 2.x

Модуль Приват24 для Opencart 2.x Подключает сервис онлайн оплаты Приват24 на сайт. Установка спосо..

200 грн. 300 грн.

Новая Почта c калькулятором + отделения для Opencart 3.x

Новая Почта c калькулятором + отделения для Opencart 3.x

Модуль новой почты с калькулятором стоимости доставки + отделения для Opencart 3.x Калькулятор ново..

300 грн.