Мобильная
версия

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

Дата: Категория: Разное

Не так давно я задумался - почему при поиске в 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
Также можете просто посмотреть страница полный статей, в моем блоге - там еще есть пара-тройка сущностей о которых я не упомянул.

Теги: #Оптимизация, #Микроразметка

Ваша оценка:

Рейтинг: 8.3 (Оценок: 6)

Комментарий:

Copyright © DOC_tr 2015-2017 г. Все права защищены
Яндекс.Метрика
Перейти к мобильной версии