Микроразметка комментариев по schema.org

Оглавление

• Микроразметка комментариев по schema.org
  • Подбираем разметку
  • Создаем микроразметку

В данной статье я опишу создание микроразметки комментариев. Цеплять разметку будем к разметке статьи, так что для начала советую прочитать мою статью о создании микроразметки непосредственно к самой статье.

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

Что у нас есть в комментарии, какие ключевые поля:

1. Количество комментариев к статье.
2. Общий маркированный список для ветки комментариев.
3. Обертка для каждого комментария.
4. Автор комментария.
5. Дата публикации.
6. Рейтинги.
   • Количество положительных голосов.
   • Количество отрицательных голосов.
   • Общая оценка комментария, которая складывается из положительных и отрицательных голосов.
7. Текст комментария.

То что я выделил жирным, нам нужно будет разметить в микроразметке.

Подбираем разметку.

Теперь определимся какую разметку 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 микроразметка готова!