Правильная микроразметка для блога

Не так давно я задумался – почему при поиске в 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 

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