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

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

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

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

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

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

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

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

Микроразметка

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

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

Микроразметка для социальных сетей позволяет роботам получить информацию для анонса при репосте (ссылки “Поделиться” или “Рассказать друзьям”). Для 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="http://blog.ucoz.ru/_bl/4/23545950.png" />

Результат:

Микроразметка Twitter

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

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

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

Выводы

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

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

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

60 комментариев
1 2 »
1 Написал zZzodiac 23 Декабрь 2015, 16:55
Поразительно, как раз это искал smile
Благодарю Сергея за подробный доступный рассказ!
2 Написал ilya_korzhov7 23 Декабрь 2015, 17:02
santa
avatar
3 Написал Enriko 23 Декабрь 2015, 17:48
Не в тему конечно, но спрошу. Несет ли смысл keywords и можно ли его убрать?
3
4 Написал olepav 23 Декабрь 2015, 18:07
Конечно несет. Только прописывать его нужно с умом. Если бездумно добавлять, то лучше не добавлять. А грамотно составленные ключевые описания - залог хороших позиций в выдаче поисковиков.

Почитайте другую статью из этого цикла: http://blog.ucoz.ru/researches/seo_optimization
5 Написал shatrov 23 Декабрь 2015, 18:51
Спасибо Сергей за столь полезный материал. Не так давно просил вас написать об этом еще на вашем сайте а отписались по теме тут.
6 Написал Sonor 23 Декабрь 2015, 23:13
Сергей, в примере что-то вы намудрили по части рейтинга: <span></span> <span></span> и потом закрывающий </span> и отсутствует "ratingValue" (Schema.org).
0
10 Написал olepav 24 Декабрь 2015, 00:46
В примере всё было хорошо, при верстке не заменили одну из открывающих скобок на html-код, она и сработала как тег smile
Спасибо, поправили)
7 Написал Solaris(Olga) 23 Декабрь 2015, 23:54
Был эксперимент со звездами рейтинга, который формировался на основе внутреннего рейтинга материалов и отображался в сниппетах в поисковой выдаче. По результатам - помогает! Заходов становится чуть больше. Чудес не было, конечно. Но до 10% можно получить прирост, что совсем не плохо. Особенно учитывая, что для этого ничего практически не нужно делать.
8 Написал onemore 24 Декабрь 2015, 00:14
хорошо что дали полные наборы уже заполненные кодами укоза - полезный пост. сам давно пользуюсь но почему то дескрипшены часто не подхватываются и в выдаче в сниппетах вылезают всякие системные укозовские Календари (которые хорошо оптимизированы оказывается biggrin ) и прочий мусор.
9 Написал onemore 24 Декабрь 2015, 00:16
>http://домен_сайта/$ENTRY_URL$"

зачем такая конструкция? разве "энтри_урл" не полную строку адреса выдаёт?
14 Написал sergeymitrichev 24 Декабрь 2015, 10:34
действительно. Спасибо smile
11 Написал †Angel† 24 Декабрь 2015, 02:59
Полезная информация, спасибо автору. Только вот в модуле новости не работает код $BRIEF$, как быть с этим?
12 Написал -SAM- 24 Декабрь 2015, 07:22
Если какие-то поля нельзя включить в ПУ или они уже задействованы у вас под что-то другое, то можно под эти цели использовать иные поля, включая инструментарий SEO-модуля. Более того, можно приспособить под свои нужды уже использующееся поле, вот писал.
13 Написал sergeymitrichev 24 Декабрь 2015, 10:28
Верно, $BRIEF$ не работает в новостях, поэтому нужно использовать $SEO_DESCRIPTION$ или значения доп.полей, если не используете на полную СЕО-модуль.
17 Написал Yuri_G 24 Декабрь 2015, 14:42
Так же можно использовать $SOCIAL_DESCRIPTION$ я например для модулей блог и новости именно его и использую.
24 Написал †Angel† 25 Декабрь 2015, 04:27
Спасибо, теперь всё отлично wink
15 Написал Kolizey 24 Декабрь 2015, 10:51
В разметке не хватает цены товара и наличия. Добавьте пожалуйста
16 Написал sergeymitrichev 24 Декабрь 2015, 13:23
Там на самом деле много чего можно описать, подробнее здесь https://developers.google.com/structured-data/testing-tool/
18 Написал Yuri_G 24 Декабрь 2015, 14:48
Это разметка Products как понял я, цена имеется, детали можете прочесть на странице - https://developers.google.com/structured-data/rich-snippets/products
20 Написал Kolizey 24 Декабрь 2015, 16:57
Настроил вывод рейтинга и указание цены.
19 Написал Адский-Наёмник 24 Декабрь 2015, 15:30
Ребят, новогоднии акции планируются?   smile
0
21 Написал olepav 24 Декабрь 2015, 18:10
Вы не по теме, к сожалению. Следите за новостями, тогда точно ничего не пропустите.
22 Написал Kolizey 24 Декабрь 2015, 19:14
Наконец то доделал, проверка в гугле "Проблем нет" Кому не трудно проверить мой код?
23 Написал sergeymitrichev 24 Декабрь 2015, 19:23
Если "проверка" сообщает, что проблем нет, значит надо ждать апдейта и уже смотреть вживую в выдаче
25 Написал mastero444ek 26 Декабрь 2015, 15:30
ничего не понятно из статьи... где можно найти пример микроразметки для блога или форума например???
26 Написал Kolizey 26 Декабрь 2015, 16:55
Нигде не найдешь, читай статью и делай сам. Я тоже был в поиске пока сам не разобрался.
27 Написал mastero444ek 26 Декабрь 2015, 17:57
может вы сможете подтолкнуть меня на верный путь и составить приблизительный код хотя бы??? (ну или подкиньте хоть какой-то готовый шаблон, буду и этому рад)
28 Написал Yuri_G 26 Декабрь 2015, 21:16
Просили пример, ну вот вам пример для блога и новостей, разметка Reviews :
Код
<span itemscope itemtype="http://schema.org/Review">
<a itemprop="url" href="$ENTRY_URL$"><div itemprop="name"><h1>$ENTRY_NAME$</h1></div></a>

<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 itemprop="datePublished" content="$ADD_DATE$">$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 itemprop="worstRating" content="$RATED$">$RATED$</span></span></span></span>
это считай готовый пример, думаю далее сами разберетесь.
29 Написал vvf 27 Декабрь 2015, 16:56
ребята, не поверите, позавчера поступило задание для сайта вуза сделать разметку, никогда не сталкивался... и тут неожиданно вы со своим блогом) Спасибо! теперь хоть знаю, что и как)
avatar
30 Написал bersckij 05 Январь 2016, 03:45
интересная статья,спасибо что все подробно описали smile Эвакуатор спб,http://evacuator-24h.ru/,эвакуация авто,грузоперевозки спб,http://gruzoperevozki-v-spb.ru/,заказ газели
31 Написал gudini2236 06 Январь 2016, 04:31
А в разделе "видео" работать будет?
32 Написал Yuri_G 06 Январь 2016, 22:58
Для видео читайте материалы:
1. https://developers.google.com/structured-data/rich-snippets/videos
2. https://developers.google.com/webmasters/videosearch/schema

Готовый код в описании имеется, подстраиваем под модуль, конечно готового примера нет, но сложностей возникнуть не должно.
avatar
33 Написал Nikolay8092 21 Январь 2016, 04:46
Добрый день!
Я так и не понял что и куда вставлять. Хорошо специалистам, а как быть не специалистам. Пожалуйста приведите пример для чайников с полным текстом модуля хотя бы для блога с выделенным цветом текста вставки или хотя бы начало вставки, конец вставки. Заранее благодарен, Николай.
34 Написал sergeymitrichev 21 Январь 2016, 21:00
Николай, здравствуйте.
Чтобы добавить микроразметку по Schema.org нужно увидеть код Вашего шаблона и сайт, чтобы примерно понимать, где добавленная информация будет выглядеть адекватно. И все же, это лучше дальше обсудить уже на форуме в этом разделе http://forum.ucoz.ru/forum/21

Что касается OpenGraph, то можете для блога брать пример прямо из статьи, все теги meta добавив перед закрывающим тегом </head>

Когда будет готово, воспользуйтесь инструментами для проверки микроразметки.
35 Написал Canon_L 30 Январь 2016, 04:33
Какую разметку следует смотреть для Доски объявлений?
36 Написал sergeymitrichev 30 Январь 2016, 15:13
В зависимости от раздела объявлений нужно настроить разметку под:
* Автообъявления https://yandex.ru/support/webmaster/car-ads/conditions.xml
* Вакансии https://yandex.ru/support/webmaster/vacancies/conditions.xml
* Недвижимость https://yandex.ru/support/webmaster/realty/quickstart.xml

Трудно сказать, насколько корректным будет размечать объявления под Products, но попробовать можно.
37 Написал Canon_L 03 Февраль 2016, 07:44
Спасибо! up
38 Написал borschaga 28 Февраль 2016, 10:05

Код
<div xmlns:v="http://rdf.data-vocabulary.org/#"><span typeof="v:Breadcrumb"><a href="http://ваш_Сайт/" rel="v:url" property="v:title">Название сайта</a></span>
  › <span typeof="v:Breadcrumb"><a href="http://ваш_сайт/#" rel="v:url" property="v:title">контактный телефон</a></span>


Использую на сайтах для вывода в поиске Google телефона smile
39 Написал sergeymitrichev 29 Февраль 2016, 09:17
Но, ведь, это разметка хлебных крошек? Т.е. используете не по назначению))
avatar
40 Написал infozaemru 01 Март 2016, 03:46
Ни в какую не получается вставить код  в <head> на страницу материала и комментариев к нему, на одном сайте получилось, на другом над шапкой появляется картинка из материала и часть текста, подскажите, будьте любезны, как имправить   
Код
<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" />
41 Написал sergeymitrichev 02 Март 2016, 11:45
Вероятно, у Вас в $BRIEF$ используется HTML код, в таком случае лучше использовать $SEO_DESCRIPTION$
45 Написал jazator 03 Март 2016, 21:35
del
42 Написал dinama 03 Март 2016, 19:03
Блииин, ребята, какие вы всё-таки умные))) up
1-20 21-28
Ваш комментарий