Дата публикации
29 Января 2020
Дата изменения
29 Января 2020
Уникальных просмотров
410
Создаем микроразметку комментариев по 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/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.

Благодарность автору

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

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Время работы: 0,1184 s
Время запросов: 0,1184 s
Количество запросов: 24
Источник: cache