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

Не так давно я задумался – почему при поиске в google многие сайты выглядят как мы привыкли их видеть – обычно, и ничем не выделяющееся.

Но некоторые сайты выделяются многим – от рейтинга, до хлебных крошек и разделов на сайте.

Быстрый поиск показал что дело тут в микроразметке, и я начал изучать этот вопрос.
Сегодня мы разберем микроразметку на примере моего блога.

Первым делом я полез в google-webmasters. В “другие ресурсы” есть раздел “Мастер разметки структурированных данных” – то что нам нужно.
Очень удобный интерфейс, позволяет за считанные минуты разметить всю страницу, но это не очень удобно когда у тебя не одностраничный сайт, а блог. Поэтому поигравшись с ним я пошел искать дальше.

Ваш основной инструмент при создании микроразметки на страницах – это Schema.org

Отличный справочник.
Он был создан в 2011 году, и его стандартов придерживаются полностью Google, Yandex, Bing, Yahoo, ну а все остальные стараются их придерживаться, и большинство тэгов будет доступно практически во всех поисковых системах.
У Google, кстати, есть пара сущностей которых нет в стандарте, (например максимальная и минимальная оценка за новость/статью), но это не столь важно.

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

А пока покажу азы на примере блога.

Начнем – у нас блог, значит нам нужно что то связанное с блогом. Поиск по странице сущностей выдал нам блог.
По сути это страница которая содержит в себе сущности blogPost.

Хорошо, но как теперь его интегрировать на страницу?

Интеграция сущностей происходит следующим образом – если сущность включает в себя другие сущности (например блог включает в себя посты) мы должны у корневого элемента (например div который оборачивает все посты)  задать следующие атрибуты – itemscope itemtype=”http://schema.org/Blog”. Например

<div id="contentleft" itemscope itemtype="http://schema.org/Blog">
    ...
    Посты в ленте
    ...
</div>

Теперь google воспринимает страницу не просто как очередной набор текста, а как блог.
Идем дальше – в блоге мы должны указать посты. Делается это точно также, но, так как это будет дочерним элементом, нужно еще указать что это такое с помощью атрибута itemprop=”blogPost”

 

<div id="contentleft" itemscope itemtype="http://schema.org/Blog">
    <div itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
    ... Пост ...
    </div>
    <div itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
    ... Пост ...
    </div>
</div>

Отлично, теперь поисковые роботы могут разобрать что из написанного является постом.
Взглянем на спецификацию сущности blogPost еще раз, и найдем те пункты которые нам нужны

  • url – полный адрес статьи
  • author – автор
    name – имя автора
    image – аватар автора
  • name – полное название статьи
  • datePublished – дата публикации
  • articleBody – статья
  • articleSection – раздел в котором она находится (может быть много)
  • commentCount – количество комментариев

Теперь зная как размечать – не составит проблем вставить все эти сущности на страницу.
Хотя…. Ведь нигде не показывается url статьи, да и зачем его отображать. Также на главной (у меня в блоге) нет никакой информации об авторе (author->name, author->image). Как поступать в таком случае?

Если нет возможности показать данные, то их можно вставить в meta тэги, а в остальном они работают точно так же.

<meta itemprop="url" content="https://phpbl.ru/3d_printery_i_pechat/podgotovka-k-3d-pechati-chast-2.html">
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="name" content="DOC_tr">
    <meta itemprop="image" content="https://phpbl.ru/content/uploadfile/201502/e5c51423644529.jpg">
</span>

С помощью следующей разметки я показываю поисковика автора статьи, и ее полный адрес, не показывая при это эту информацию пользователям.

Вот краткий рассказ о микроразметке, и о том как ее правильно применять.
Проверить валидность вашей микроразметки вы можете в google или yandex.
Посмотреть какие еще есть сущности вы можете в официальной документации shcema.org
Также можете просто посмотреть страница полный статей, в моем блоге – там еще есть пара-тройка сущностей о которых я не упомянул.

[Всего голосов: 0    Средний: 0/5]

Добавить комментарий

Ваш e-mail не будет опубликован.