Микроразметка комментариев по schema.org
Пример создания и описание микроразметки для комментариев к статье, с помощью schema.org.
![](https://webinmind.ru/public/images/static728x90_3.png)
Оглавление
В данной статье я опишу создание микроразметки комментариев. Цеплять разметку будем к разметке статьи, так что для начала советую прочитать мою статью о создании микроразметки непосредственно к самой статье.
Микроразметка комментариев по schema.org
Мы обернули нашу статью, например, в микроразметку https://schema.org/Article
. В конце статьи как правило размещаются комментарии, давай быстро набросаем самую простую разметку комментариев:
<div class="comments-wrapper">
Комментарии (<span id="comment-total">2</span>)
<ul class="comments-list">
<li class="comment" id="comment-1">
<div class="comment-content">
<div class="comment-head">
<div class="comment-author">
<a href="#">
<span>James</span>
</a>
</div>
<div class="comment-createdon">
1 Января 2029, в 10:00
</div>
<div class="comment-rating">
<span class="plus" title="Нравится">
<i class="icon-thumbs-up"></i>
</span>
<span class="rating"
title="Всего голосов 0: Понравилось - 7, не понравилось 5">2
</span>
<span class="minus" title="Не нравится">
<i class="icon-thumbs-down"></i>
</span>
</div>
</div>
</div>
<div class="comment-text">Текст комментария
<div class="comment-reply">
<a href="#">Ответить</a>
</div>
</div>
<ul class="comments-list reply-list">
<li class="comment" id="comment-2" data-parent="1">
<div class="comment-content">
<div class="comment-head">
<div class="comment-author">
<a href="#">
<span>Sam</span>
</a>
</div>
<div class="comment-createdon">
2 Января 2029, в 10:00
</div>
<div class="comment-rating">
<span class="plus" title="Нравится">
<i class="icon-thumbs-up"></i>
</span>
<span class="rating"
title="Всего голосов 0: Понравилось - 0, не понравилось 0">0
</span>
<span class="minus" title="Не нравится">
<i class="icon-thumbs-down"></i>
</span>
</div>
</div>
</div>
<div class="comment-text">Текст комментария
<div class="comment-reply">
<a href="#">Ответить</a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
Самая обычная разметка, где есть корневой комментарий и ответ на него. Дата-атрибут data-parent
— содержит идентификатор родительского комментария, на который был дан ответ. Ну и еще есть разметка для голосования + и - за комментарий.
Что у нас есть в комментарии, какие ключевые поля:
- Количество комментариев к статье.
- Общий маркированный список для ветки комментариев.
- Обертка для каждого комментария.
- Автор комментария.
- Дата публикации.
- Рейтинги.
- Количество положительных голосов.
- Количество отрицательных голосов.
- Общая оценка комментария, которая складывается из положительных и отрицательных голосов.
- Текст комментария.
То что я выделил жирным, нам нужно будет разметить в микроразметке.
Подбираем разметку.
Теперь определимся какую разметку schema.org будем использовать. Есть два хороших варианта:
- https://schema.org/UserComments — Есть такой объект, но в его описании советуют использовать Comment.
- https://schema.org/Comment — Его я и решил применять для создания микроразметки комментариев.
И так, у нас прошла статья и пошли комментарии. Блок с комментариями должен быть внутри объекта https://schema.org/Article
. Теперь, наша задача добавить микроразметку в разметку комментариев, которую я привел выше.
Создаем микроразметку.
Обновленная разметка комментариев с микроразметкой schema.org:
<div class="comments-wrapper">
Комментарии (<span itemprop="commentCount" id="comment-total">2</span>)
<ul class="comments-list">
<li itemprop="comment" itemscope itemtype="https://schema.org/Comment" class="comment" id="comment-1">
<div class="comment-content">
<div class="comment-head">
<div class="comment-author">
<a href="#">
<span itemprop="author" itemscope itemtype="https://schema.org/Person">James</span>
</a>
</div>
<div itemprop="dateCreated" class="comment-createdon">
20 Августа 2019, в 12:06
</div>
<div class="comment-rating">
<span class="plus" title="Нравится">
<i class="icon-thumbs-up"></i>
</span>
<span class="rating"
title="Всего голосов 0: Понравилось - 7, не понравилось 5">2
</span>
<span class="minus" title="Не нравится">
<i class="icon-thumbs-down"></i>
</span>
<meta itemprop="upvoteCount" content="7">
<meta itemprop="downvoteCount" content="5">
</div>
</div>
</div>
<div itemprop="text" class="comment-text">Текст комментария
<div class="comment-reply">
<a href="#">Ответить</a>
</div>
</div>
<ul class="comments-list reply-list">
<li itemprop="comment" itemscope itemtype="https://schema.org/Comment" class="comment" id="comment-2" data-parent="1">
<meta itemprop="parentItem" content="1">
<div class="comment-content">
<div class="comment-head">
<div class="comment-author">
<a href="#">
<span itemprop="author" itemscope itemtype="https://schema.org/Person">Sam</span>
</a>
</div>
<div itemprop="dateCreated" class="comment-createdon">
20 Августа 2019, в 12:06
</div>
<div class="comment-rating">
<span class="plus" title="Нравится">
<i class="icon-thumbs-up"></i>
</span>
<span class="rating"
title="Всего голосов 0: Понравилось - 0, не понравилось 0">0
</span>
<span class="minus" title="Не нравится">
<i class="icon-thumbs-down"></i>
</span>
<meta itemprop="upvoteCount" content="7">
<meta itemprop="downvoteCount" content="5">
</div>
</div>
</div>
<div itemprop="text" class="comment-text">Текст комментария
<div class="comment-reply">
<a href="#">Ответить</a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
Разберем что мы добавили:
itemprop="commentCount"
— Общее количество комментариев к статье, является дочерним объекта https://schema.org/Article.itemprop="comment"
— Свойство указывает на комментарий, является дочерним для объекта https://schema.org/Article.itemtype="https://schema.org/Comment"
— Объект комментария.itemprop="parentItem"
— Идентификатор (или любая другая ссылка) на родительский комментарий (на тот комментарий, на который идет ответ). У стартовых комментариев не указывается.itemprop="author"
— Автор комментария.itemtype="https://schema.org/Person"
— Объект автора комментария.itemprop="dateCreated"
— Дата, когда комментарий был написан. Можно время указать в теге<time>
, для машиночитаемого формата. Но робот и так прекрасно спарсит значение.itemprop="upvoteCount"
— Количество положительных голосов комментария.itemprop="downvoteCount"
— Количество положительных голосов комментария.itemprop="text"
— Текст комментария.
На этом все, валидная как для Яндекса так и для Google микроразметка готова!
При тестировании, не забудьте, что данная микроразметка должна лежать внутри объекта https://schema.org/Article
.
Время запросов: 0,1181 s
Количество запросов: 28
Источник: cache