В этом разделе материалы размещаются пользователями сайта и публикуются после одобрения модератором. Редакция не несет ответственности за орфографические и другие ошибки, хотя и старается исправлять их по мере возможности.
Добавить свою заметку вы можете на этой странице.
08 марта 2016, 22:26
1

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

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

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

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

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

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

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

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

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

Получи сертификат Digital Project Manager!

25 октября в Москве пройдет первая очная сертификация RDC по позиции Digital Project Manager.

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

Запись на очную сертификацию Digital Project Manager 25 октября — на этой странице. Cossa рекомендует!

Реклама

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

микроразметка, примеры разметки

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

  • 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. Пример такой разметки:

&lt;meta name="twitter:card" content="summary" /&gt;
<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. Подготовьте HTML-код микроразметки. Для этого воспользуйтесь инструментами, которые были приведены выше
  • 2. Зайдите в панель управления и в разделе “Управление дизайном (шаблоны)” выберите шаблон “Страница материала” или “Страница товара”
  • 3. Добавьте в шаблон ранее подготовленный HTML-код, который и будет отвечать за микроразметку
  • 4. Проверьте, как роботы понимают установленную микроразметку с помощью сервисов валидации

Выводы

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

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

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



📰 Чем живёт digital.
Главное — в рассылке: