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

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

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

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

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

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

IT-конференция МТС True Tech Day 17 мая

Что будет:

• 5 тематических треков: Main, Development, AI/ML, Cloud, Science;
• 50 спикеров с докладами про архитектуру, облачные платформы, NLP4Code, вероятностное программирование, безопасность контейнеров и другое;
• 10 часов нетворкинга;
• Цифровые зоны и digital-интеграции;
• А ещё вечеринка со звездой.

Все спикеры и темы уже на сайте. Регистрируйся на True Tech Day. Участие бесплатное.

Реклама. ПАО «МТС». ИНН 7740000076. ОГРН 1027700149124

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

Для поисковых систем отлично подойдет микроразметка 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 не требуется.

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