Koval Web
Production

Что такое микроразметка сайта, основные определения и способы использования

Время чтения 8 мин
Читать статью

Микроразметка сайта (семантическая разметка) — это разметка веб-сайта специальными тегами и атрибутами в HTML-коде, для структурирования информации.

Атрибуты — это слова, что определяют характеристики элемента и размещаются внутри открытого тега этого элемента.

Она нужна по двум причинам:

Во-первых, объяснить браузеру какой контент на сайте: где цена, контакты, отзывы, информация об организации и др.  Это использование понятных веб-обозревателю «слов», которые объясняют ему содержание сайта. Так поисковый робот сможет более просто и быстро считать информацию. А это значит что пользователи одержат релевантную информацию, а владельце сайта лояльных и целевых посетителей.

Во-вторых, использование микроразметки удобно пользователю. В поисковой выдаче кроме ссылки ми видим фрагмент контента — сниппет. С его помощью можно кратко и емко передать основное содержимое сайта. И если сниппет привлекательный для пользователя, это повышает кликабельность ссылки.

И да, напрямую микроразметка не влияет на ранжирование сайта. Но поисковые системы реагируют на поведенческие факторы, а кликабельность очень важный показатель заинтересованности юзеров. Поэтому структурные данные веб-страницы, хороший бонус к SEO-продвижению.

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

Чтоб полностью понять что такое микроразметка сайта, нужно понять что она в себя включает. Микроразметка — это дополнение HTML-кода. Она состоит из конкретных тегов и атрибутов, которые прописаны в словаре. Как внедрить эти элементы в код, определяет синтаксис. Одна и та же разметка может бить написана различными синтексами.

Словари микроразметки

Для «общения» с браузером созданы множество словарей. Но есть 2 самых популярных. Давайте разбираться.

1. Schema.org

Этот самый популярный и распространенный словарь микроразметки.

На это есть причини:

  • постоянно расширяется, обновляется и усовершенствуется
  • его понимают все знаменитые поисковые системы: Google, Yahoo, Yandex, Microsoft.

Над улучшением словаря постоянно работает руководящая команда, что состоит из веб-мастеров, которые представляют самые популярные веб-обозреватели. Они проводят публичные обсуждения всех изменений, расширений и дополнений.

Словарь состоит из 779 типов (их еще называют сущностями) и 1390 свойств этих типов.

Вот некоторые их примеры (слева — сущность, справа — свойства)

  • Product (товары) — название товара, рейтинг, цена, описание.
  • Event (событие) — тема, месторасположение, длительность, кто выступает.
  • Recipe (рецепты) — калорийность, ингредиенты, инструкция,  время приготовления..
  • Movie (фильмы) — актеры, режиссер, жанр, страна, рейтинг.
  • Organization (организация) — адрес, основатель, телефон, логотип.

2. Open Graph

Изначально словарь был придуман для Facebook, но потом был подхвачен Twitter, Вконтакте и др. Это мета-теги, которые нужно внедрить в код веб-сайта, чтоб при постинге в социальных сетях, превью на ресурс выглядело эстетично и четко передавало суть контента. Использование микроразметки Open Graph, делает ссылки понятными и расширенными. Она будет содержать картинку, заголовок и четкое описание.

Вот основные теги:

og:url — ссылка на источник;

og:type — тип контента: кино “movie”, статья «article”…

og:title — заголовок репоста;

og:description — описание;

og:image — изображение;

Синтаксис микроразметки

Синтаксис — это способ использовать словарь. Он определяет с помощью каких тегов и как будут указываться типы, их свойства. Если проще, то синтаксис указывает как сочетать между собой различные теги и атрибуты, чтоб браузер их понимал. В одном синтаксисе можно комбинировать различные словари.

Сейчас есть три основных синтаксиса:

     1. Microdata (или микроданные)

Этот синтаксис часто используют вместе со словарем Schema.org. Для Microdata используют код HTML в который внедряют дополнительные атрибуты.

3 основных атрибута микроданых:

1. itemscope — сначала указываем объект, который будем использовать. В открытий тег размещаем слово «itemscope», так поисковик будет понимать что элемент, находящийся в теге, имеет дополнительную информацию о своем статусе;

2. itemtype — указываем тип объекта (или сущность) который будем размечать. Например, «Товар»

3. itemprop — свойства этого объекта. Например, название, описание, цена и валюта.

Как это выглядит в коде: <div itemscope=»» itemtype=»http://schema.org/Product»> — указали тип <div itemprop=»name»> название товара</div> — свойство название <div itemprop=»description»>Текст описание</div> — свойство описание <div itemprop=»price»>500</div> — свойство цена <div itemprop=»priceCurrency» content=»UAH»>грн</div> — свойство валюта </div>

       2. RDFa

       Данные тоже размещаются в HTML-коде. Этот синтаксис сложный в реализации, поэтому его используют очень редко. Чаще всего со словарем Open Graph.

     3. JSON-LD

Молодой, но очень актуальный синтаксис, который рекомендует Google . Он более простой, понятный и компактный чем предыдущее.

Яндекс пока не понимает JSON-LD (только Яндекс Почта).

2 способа добавить микроразметку на сайт

Как ми говорили выше, разметить страницу можно в ручную в HTML-коде. Для этого нужно четко понимать особенности разных синтаксисов, где, с чем и когда их применять. Мельчайшая ошибка, может негативно повлиять на всю микроразметку сайта. Лучше за помощью обратится в веб-студию где опытные SEO-специалисты либо программисты, сделают все правильно.

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

Онлайн-генераторы для синтаксиса Microdata:

  • The Ultimate Microdata Generator,
  • Schema Markup Generator,
  • Local Business Schema Generator.

Генераторы для JSON-LD:

  • JSON-LD Schema Generator For SEO — Joe Hall,
  • Schema Markup Generator (JSON-LD).

Как проверить микроразметку на сайте

С помощью валидатора Google (Проверка расширенных результатов в Google Search Console). В отведенное поле вставляете URL-адрес либо часть кода, который хотите проверить. В отчете вам выдаст перечень ошибок, которые нужно исправить. Гугл очень тщательно проверяет микроразметку, поэтому замечает даже малейшие ошибки.

Валидатор в Яндекс Вебмастер работает подобным образом. После теста, ошибки будут подсвечиваться в коде красным цветом и появится дополнительный текст, указывающий на неточности.

И так, SEO-микроразметка хороший способ повысить кликабельность ссылки и прибыль сайта. Благодаря микроразметке, в выдаче ваш сайт выглядит красиво и пользователи обращают на него внимание, а поисковые машины лучше понимают ваш контент. Это значит, что семантическая разметка способствует продвижению сайта, хотя ее нет в списке факторов ранжирования.