Оглавление

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

Микроразметка комментариев по 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/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>

Разберем что мы добавили:

На этом все, валидная как для Яндекса так и для Google микроразметка готова!

При тестировании, не забудьте, что данная микроразметка должна лежать внутри объекта https://schema.org/Article.