MODX Revo — Микроразметка статьи

      Комментарии к записи MODX Revo — Микроразметка статьи отключены

Что такое «Schema.org»

Каждый веб-разработчик хорошо знаком с HTML-тегами, т.к. от них зависит, как веб-страница будет выглядеть в браузере. Но независимо от того, какие теги веб- разрабочик использовались для её создания, любой пользователь, читающий эту страницу, сразу поймет смысл её содержимого.

Это конечно хорошо, но кроме пользователей, веб-страницу посещают ещё и поисковые роботы, которые тоже хотят понять смысл её содержимого. И чем точнее поисковый робот сумеет распознать информацию, представленную на странице, тем более точный результат поисковая система может выдать пользователю. А чем более точный результат будет выдавать поисковая система, тем больше целевых пользователей перейдёт на Ваш сайт. Следовательно, при разработке сайта необходимо создавать такую разметку страницы, чтобы она не только хорошо отображалась в браузере, но была понятна и корректна для поисковым систем.

Для этого в 2011 году компаниями Google, Яндекс, Microsoft и Yahoo! был разработан общедоступный словарь, который называется «Schema.org». Он используется для выполнения микроразметки (или семантической разметки) веб-страниц таким образом, чтобы они было понятны поисковым роботам. Микроразметка с помощью «Schema.org» выполняется непосредственно в HTML-коде с помощью добавления специальных атрибутов к HTML-тегам. Добавляя к определённым элементам дополнительные атрибуты «Schema.org», мы тем самым указываем поисковому роботу, какая информация содержится в этом элементе. Проанализировав такую разметку, робот начинает понимать, какая информация содержится на этой странице. Т.е. он начинает различать, где находится статья, где заголовок статьи, где текст статьи, где автор статьи и т.д. В итоге всё это приводит к тому, что улучшаются поведенческие факторы у сайта и внешний вид его страниц в поиске.

Основные принципы разметки страниц с помощью «Schema.org»

Словарь «Schema.org» состоит из объектов (статья, хлебные крошки, изображение, комментарии и т.д.), с помощью которых Вы можете описать различные блоки информации (сущности), представленные на веб-странице. В свою очередь каждая такая сущность (объект «Schema.org») состоит из множества свойств (например, для статьи это заголовок, текст статьи, дата публикации, автор статьи и т.д.), которые предназначены для более детального описания (разметки) информации, содержащейся в этой сущности (например, в статье).

Процесс разметки информации с помощью «Schema.org» можно представить в виде 2 основных этапов:

  1. Описать некоторый блок информации. Для этого в элемент-контейнер, содержащий этот блок информации, добавляют следующие атрибуты:
    1. itemscope — указывает поисковому роботу, что контейнер содержит какой-то объект (статью, навигацию, комментарий и т.д.);
    2. itemtype="https://schema.org/Article" — всегда указывается вместе с itemscope и предназначен для указания типа объекта (например: Article — статья);
  2. После этого необходимо более детально разметить информацию с помощью свойств «Schema.org» внутри этого блока.
    Например, заголовок статьи: itemprop="name"
    Например, текст статьи: itemprop="articleBody"

Иногда значение свойства тоже может являться объектом.

Например, статья с комментариями. Т.е. в статье (объект Article) каждый комментарий (свойство comment объекта Article), в свою очередь тоже является объектом userComments с собственным набором свойств (commentText, commentTime, creator и др.).

Чтобы указать, что значение свойства представляет собой объект, необходимо дополнительно добавить атрибут itemscope с itemtypeсразу после соответствующего itemprop.

Например:

itemprop="comment" itemscope itemtype="https://schema.org/UserComments"

Примечание: Разметить веб-страницу с помощью «Schema.org» не всегда возможно с помощью существующей разметки. Иногда может потребоваться создание дополнительных элементов и добавления уже к ним объектов или свойств из словаря «Schema.org».

Микроразметка статьи (поста)

Микроразметку статьи (поста) будем производить с помощью объекта Article (itemscopeitemtype="https://schema.org/Article" //тип объекта — статья) и следующих его свойств:

  • itemprop="name" //название (заголовок) статьи;
  • itemprop="articleBody" //тело (текст) статьи ;
  • itemprop="dataPublished" //дата публикации;
  • itemprop="author" //автор статьи;
  • itemprop="description" //краткое описание статьи;
  • itemprop="articleSection" //категория (рубрика);
  • itemprop="image" //изображение к статье;
  • itemprop="commentCount" //количество комментариев в статье;
  • itemprop="comment" //комментарий к статье (посту).

Для выполнения микроразметки статей (постов) блога необходимо внести изменения в шаблон «Пост» и чанки tpl.Tickets.meta, tpl.Tickets.comment.wrapper, tpl.Tickets.comment.one.auth и tpl.Tickets.comment.one.guest.

В шаблоне «Пост» необходимо изменить следующие строчки:

  1. Строчку
    <div class="main-block col-md-8">

    на

    <div itemscope itemtype="https://schema.org/Article" class="main-block col-md-8">
  2. Строчку
    <h1 class="h2 page-header">[[*pagetitle]]</h1>

    на

    <h1 itemprop="name" class="h2 page-header">[[*pagetitle]]</h1>
  3. Строчку
    <div>[[*content]]</div>

    на

    <div itemprop="articleBody">[[*content]]</div>

В итоге шаблон «Пост» будет иметь следующий код:

  1. <!DOCTYPE html>
  2. <html lang=«ru»>
  3. [[$chunk.head]]
  4. <body>
  5. <div class=«container»>
  6. <div class=«row»>
  7. [[$chunk.header]]
  8. [[$chunk.navbar]]
  9. <div itemscope itemtype=«https://schema.org/Article» class=«main-block col-md-8»>
  10. [[pdoCrumbs? &tpl=`@INLINE <li><a href=«[[+link]]»>[[+menutitle]]</a></li>`
  11. &tplWrapper=`@INLINE <ol class=«breadcrumb»>[[+output]]</ol>`
  12. &tplHome=`@INLINE <li><a href=«/»><i class=«glyphicon glyphicon-home»></i></a></li>`
  13. &outputSeparator=«
  14. &showCurrent=`0`
  15. &showHome=`1`]]
  16. <h1 itemprop=«name» class=«h2 page-header»>[[*pagetitle]]</h1>
  17. <div itemprop=«description»><em>[[*description]]</em></div>
  18. <div itemprop=«articleBody»>[[*content]]</div>
  19. [[TicketMeta]]
  20. [[pdoNeighbors?
  21. &tplPrev=`@INLINE <li class=«previous»><a href=«[[+link]]»><span class=«glyphicon glyphicon-chevron-left»></span> [[+menutitle]]</a></li>`
  22. &tplNext=`@INLINE <li class=«next»><a href=«[[+link]]»>[[+menutitle]] <span class=«glyphicon glyphicon-chevron-right»></span></a></li>`
  23. &tplWrapper=`@INLINE <div class=«neighbors»><ul class=«pager»>[[+prev]][[+next]]</ul></div>`]]
  24. [[!TicketComments? &fastMode=`0` &allowGuest=`1` &allowGuestEmails=`1` &maxCaptcha=`30`]]
  25. </div>
  26. <div class=«col-md-4»>
  27. </div>
  28. </div>
  29. </div>
  30. [[$chunk.footer]]
  31. </body>
  32. </html>

В чанке tpl.Tickets.meta необходимо изменить следующие строчки:

  1. Строчку
    <i class="glyphicon glyphicon-calendar"></i> [[+date_ago]]

    на

    <i class="glyphicon glyphicon-calendar"></i> <time itemprop="datePublished" content="[[+publishedon:strtotime:date=`%Y-%m-%dT%H:%M`]]" datetime="[[+publishedon:strtotime:date=`%Y-%m-%dT%H:%M`]]">[[+date_ago]]</time>
  2. Строчку
    <i class="glyphicon glyphicon-user"></i> [[+fullname]]

    на

    <i class="glyphicon glyphicon-user"></i> <span itemprop="author" itemscopeitemtype="https://schema.org/Person"><span itemprop="name">[[+fullname]]</span></span>

    Примечание: В статье (посте) автор в свою очередь является объектом Person (itemscope itemtype="https://schema.org/Person").

  3. Строчку
    <a href="[[~[[+section.id]]]]"><i class="glyphicon glyphicon-folder-open"></i> [[+section.pagetitle]]</a>

    на

    <a href="[[~[[+section.id]]]]"><i class="glyphicon glyphicon-folder-open"></i> <spanitemprop="articleSection">[[+section.pagetitle]]</span></a>

В чанке tpl.Tickets.comment.wrapper необходимо изменить следующую строчку:

<span id="comment-total">[[+total]]</span>

на:

<span itemprop="commentCount" id="comment-total">[[+total]]</span>

В чанках tpl.Tickets.comment.one.auth и tpl.Tickets.comment.one.guest необходимо изменить следующую строчку:

<div class="ticket-comment-body[[+guest]][[+bad]]">

на:

<div itemprop="comment" itemscope itemtype="https://schema.org/UserComments" class="ticket-comment-body[[+guest]][[+bad]]">

Примечание: В статье (посте) каждый комментарий в свою очередь является объектом UserComments (itemscope itemtype="https://schema.org/UserComments").

Микроразметка комментариев к статье

Микроразметку комментариев будем производить с помощью объекта UserComments (itemscope itemtype="https://schema.org/UserComments" //тип объекта — комментарий) и следующих его свойств:

  • itemprop="commentText" //текст комментария;
  • itemprop="commentTime" //дата и время, оставления комментария;
  • itemprop="creator" //пользователь, создавший комментарий.

Для выполнения микроразметки комментариев к статьям (постам) блога необходимо внести изменения в чанки tpl.Tickets.comment.one.auth и tpl.Tickets.comment.one.guest.

В чанке tpl.Tickets.comment.one.auth необходимо изменить следующие строчки:

  1. Строчку
    <div itemprop="comment" class="ticket-comment-body[[+guest]][[+bad]]">

    на

    <div itemprop="comment" itemscope itemtype="https://schema.org/UserComments" class="ticket-comment-body[[+guest]][[+bad]]">
  2. Строчку
    <span class="ticket-comment-author">[[+fullname]]</span>

    на

    <span itemprop="creator" itemscope itemtype="https://schema.org/Person" class="ticket-comment-author"><span itemprop="name">[[+fullname]]</span></span>
  3. Строчку
    <span class="ticket-comment-createdon">[[+date_ago]]</span>[[+comment_was_edited]]

    на

    <time itemprop="commentTime" class="ticket-comment-createdon" content="[[+createdon:strtotime:date=`%Y-%m-%dT%H:%M`]]" datetime="[[+createdon:strtotime:date=`%Y-%m-%dT%H:%M`]]">[[+date_ago]]</time>[[+comment_was_edited]]
  4. Строчку
    <div class="ticket-comment-text">[[+text]]</div>

    на

    <div itemprop="commentText" class="ticket-comment-text">[[+text]]</div>

В чанке tpl.Tickets.comment.one.guest необходимо изменить следующие строчки:

  1. Строчку
    <div itemprop="comment" class="ticket-comment-body[[+bad]]">

    на

    <div itemprop="comment" itemscope itemtype="https://schema.org/UserComments" class="ticket-comment-body[[+bad]]">
  2. Строчку
    <span class="ticket-comment-author">[[+fullname]]</span>

    на

    <span itemprop="creator" itemscope itemtype="https://schema.org/Person" class="ticket-comment-author"><span itemprop="name">[[+fullname]]</span></span>
  3. Строчку
    <span class="ticket-comment-createdon">[[+date_ago]]</span>

    на

    <time itemprop="commentTime" class="ticket-comment-createdon" content="[[+createdon:strtotime:date=`%Y-%m-%d`]]" datetime="[[+createdon:strtotime:date=`%Y-%m-%dT%H:%M`]]">[[+date_ago]]</time>
  4. Строчку
    <div class="ticket-comment-text">[[+text]]</div>

    на

    <div itemprop="commentText" class="ticket-comment-text">[[+text]]</div>

Примечание: В каждом комментарии (объект UserComments) свойство creator, в свою очередь тоже является объектом Person(itemscope itemtype="https://schema.org/Person") с собственным набором свойств (в нашем случае будем использовать только свойство name).

Проверка структурированных данных

Микроразметку постов (статей) блога проверим с помощью следующих инструментов:

Статья взята с сайта