Статьи
микроразметка, как добавить микроразметку на сайт, микроразметка для uCoz

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

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

Читайте также:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример:

<html prefix="og: http://ogp.me/ns#">
<head>
<title>$ENTRY_TITLE$ - $SITE_NAME$</title>
<meta property="og:title" content="$ENTRY_TITLE$" /> 
<meta property="og:description" content="$BRIEF$" /> 
<meta property="og:url" content="$ENTRY_URL$" /> 
<meta property="og:image" content="$IMG_URL1$" /> 
<meta property="og:type" content="article" /> 

</head>

</html>

Результат:

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

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

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

Результат:

микроразметка для твитера

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

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

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

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

Выводы

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

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

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

Добавлено: пример разметки Reviews - Отзывы

Просили пример, ну вот вам пример для блога и новостей, разметка Reviews : 

Код
<span itemscope="" itemtype="http://schema.org/Review"> </span>  
<div itemprop="name"> <h1><span itemscope="" itemtype="http://schema.org/Review">
<a href="$ENTRY_URL$" itemprop="url">$ENTRY_NAME$</a></span></h1>
</div> <span itemscope="" itemtype="http://schema.org/Review"> <span itemprop="description">$MESSAGE$</span> <span itemprop="itemReviewed" style="display: none;">$SOCIAL_DESCRIPTION$</span>
<span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<span itemprop="name"><a class="eauthor" href="$PROFILE_URL$">
<?if($USER$)?>$USER$<?endif?></a></span></span> <span itemprop="genre"><a class="ecategory" href="$CAT_URL$">$CAT_NAME$</a></span>
<span content="$ADD_DATE$" itemprop="datePublished">$ADD_DATE$</span> <span itemprop="reviewRating" itemscope="" itemtype="http://schema.org/Rating"> <span itemprop="ratingValue">
<?if($RATING$)?><span class="erating"><?$RSTARS$('32','/.s/t/1322/brating.png','1','float')?></span><?endif?></span><span id="entRated$ID$" itemprop="bestRating">Рейтинг: 5/<span content="$RATED$" itemprop="worstRating">$RATED$</span></span></span></span>

это считай готовый пример, думаю далее сами разберетесь.

Добавлено: пример разметки используемой на uGrade.ru

Будем рассматривать микроразметку на примере раздела статей. Страница материалов и комментариев.

Социальные сети
Код
  <meta property="og:type" content="article" />  
<meta property="og:title" content="<?if($SEO_TITLE$)?>$SEO_TITLE$<?else?>$ENTRY_TITLE$ - $CAT_NAME$ <?if($SECTION_NAME$)?>- $SECTION_NAME$<?endif?> - $MODULE_NAME$ - $SITE_NAME$<?endif?>" />
<meta property="og:description" content="<?if($SEO_DESCRIPTION$)?>$SEO_DESCRIPTION$<?else?> $ENTRY_TITLE$ в $CAT_NAME$. Скачать бесплатно $ENTRY_TITLE$. Бесплатные скрипты и шаблоны для uCoz на uGrade.ru<?endif?>" />
<meta property="og:url" content="$ENTRY_URL$" /> <meta property="og:image" content="$IMG_URL1$" />  
Схема статьи
Код
  <span itemscope itemtype="http://schema.org/Article">   
<meta itemprop="name" content="<?if($SEO_TITLE$)?>$SEO_TITLE$<?else?>$ENTRY_TITLE$ - $CAT_NAME$ <?if($SECTION_NAME$)?>- $SECTION_NAME$<?endif?> - $MODULE_NAME$ - $SITE_NAME$<?endif?>" />
<meta itemprop="description" content="<?if($SEO_DESCRIPTION$)?>$SEO_DESCRIPTION$<?else?> $ENTRY_TITLE$ в $CAT_NAME$. Скачать бесплатно $ENTRY_TITLE$. Бесплатные скрипты и шаблоны для uCoz на uGrade.ru<?endif?>" />
<meta itemprop="author" content="Антон Щибря"/> <meta itemprop="articleSection" content="$CAT_NAME$"/>
Изображение, изображение в сниппете
Код
  <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url" itemprop="image" src="$IMG_URL1$" style="display:none;"/>
<meta itemprop="width" content="100px">  <meta itemprop="height" content="100px"></span>  
Рейтинг в сниппете
Код
  <meta itemprop="inLanguage" content="ru" />
<span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">  
<meta itemprop="ratingValue" content="$RATING$">  
<meta itemprop="ratingCount" content="$RATED$">  </span>


Советуем к просмотру:

Сохраните в социальную сеть
Источник материала

Комментарии
Комментариев пока нет, вы можете оставить комментарий первым.
Оставить комментарий
avatar