Что такое микроразметка, зачем она нужна, и как добавить её на свой сайт uCoz?

Микроразметка материалов. Зачем она нужна и какую пользу приносит? Как добавить на сайт? В этом посте ответим на все главные вопросы и приведем примеры.

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

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

В чем польза микроразметки?

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

Успейте купить корпоративный пакет COSSA-2025 со скидкой!

Cossa анонсирует главный рекламный формат на весь 2025 год: сразу 8 различных опций.

Пакет идеально подходит для онлайн-сервисов, стартапов, интернет-компаний и digital-агентств.

Успейте приобрести пакет до повышения цены!

Микроразметка для поисковых систем

Для поисковых систем отлично подойдет микроразметка Schema.org, поскольку этот тип поддерживается Яндекс и Google. Выберите одну из доступных схем и встройте ее в шаблон “Страница материала” или “Страница товара”.

Пример для страницы товаров:

<div itemscope itemtype="http://schema.org/Product">
<br> &lt;span itemprop="brand"&gt;$BRAND$&lt;/span&gt;
<br> &lt;span itemprop="name"&gt;$ENTRY_TITLE$&lt;/span&gt;
<br> &lt;img itemprop="image" src="$PHOTO$" alt="$ENTRY_TITLE$ - изображение" /&gt;
<br> &lt;span itemprop="description"&gt;$DESCRIPTION$&lt;/span&gt;
<br> ID товара: &lt;span itemprop="mpn"&gt;$ID$&lt;/span&gt;
<br> &lt;span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"&gt;
<br> Рейтинг &lt;span itemprop="ratingValue"&gt;$RATING$&lt;/span&gt;, оценен &lt;span itemprop="reviewCount"&gt;$RATED$&lt;/span&gt; раз&lt;/span&gt;
<br>&lt;/div&gt;

Полученный результат:

Инструменты для работы с микроразметкой поисковых систем:

• 1. Structured Data Testing Tool. Особенность сервиса состоит в том, что можно на примерах увидеть, как выполняется микроразметка. Просто скопируйте пример в свой шаблон и подставьте $переменные$ в код
• 2. Разделы “Структурированные данные” и “Маркер” в Search Console от Google, которые позволят настроить микроразметку
• 3. Валидатор микроразметки от “Яндекс”
• 4. Яндекс.Справочник. Добавьте информацию о своей организации и в результатах поиска “Яндекс” будет показываться адрес, телефон и график работы

Микроразметка для социальных сетей

Микроразметка для социальных сетей позволяет роботам получить информацию для анонса при репосте (ссылки “Поделиться” или “Рассказать друзьям”). Для Facebook, VK, Google+ можно использовать словарь OpenGraph.

Пример:

&lt;html prefix="og: <a href="http://ogp.me/ns#" &gt;"="">http://ogp.me/ns#"&gt;</a>
<br>&lt;head&gt;
<br>&lt;title&gt;$ENTRY_TITLE$ - $SITE_NAME$&lt;/title&gt;
<br>&lt;meta property="og:title" content="$ENTRY_TITLE$" /&gt;&nbsp;
<br>&lt;meta property="og:description" content="$BRIEF$" /&gt;&nbsp;
<br>&lt;meta property="og:url" content="$ENTRY_URL$" /&gt;&nbsp;
<br>&lt;meta property="og:image" content="$IMG_URL1$" /&gt;&nbsp;
<br>&lt;meta property="og:type" content="article" /&gt;&nbsp;
<br>…
<br>&lt;/head&gt;
<br>…
<br>&lt;/html&gt;

Результат:

Еще можно использовать Twitter Cards. Это микроразметка для Twitter. Пример такой разметки:

<meta name="twitter:card" content="summary" />
<br>&lt;meta name="twitter:site" content="@ваш_аккаунт" /&gt;
<br>&lt;meta name="twitter:title" content="$ENTRY_TITLE$" /&gt;
<br>&lt;meta name="twitter:description" content="$BRIEF$" /&gt;
<br>&lt;meta name="twitter:image" content="$IMG_URL1$" /&gt;

Результат:

Инструменты для работы с микроразметкой социальных сетей:

• 1. Open Graph Object Debugger — сервис проверки микроразметки для Facebook
• 2. Валидатор микроразметки Twitter Cards

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

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

• 1. Подготовьте HTML-код микроразметки. Для этого воспользуйтесь инструментами, которые были приведены выше
• 2. Зайдите в панель управления и в разделе “Управление дизайном (шаблоны)” выберите шаблон “Страница материала” или “Страница товара”
• 3. Добавьте в шаблон ранее подготовленный HTML-код, который и будет отвечать за микроразметку
• 4. Проверьте, как роботы понимают установленную микроразметку с помощью сервисов валидации

Выводы

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

Установка микроразметки на сайт занимает немного времени, по нашей оценке — не более 15 минут для одного модуля. Для этого нужно скачать пример микроразметки и подставить в нее соответствующие $переменные$. При этом знаний HTML, CSS не требуется.

После внедрения микроразметки результаты в социальных сетях можно проверить сразу. Результат в поисковых системах можно увидеть только после очередного обновления (не менее недели).