Memasang microdata pada komentar

Microdata umumnya dipasang pada sebuah blog posting, review produk, event dll. — komentar pun sebenarnya bisa kita pasangi microdata. Ada schema yang bisa kita gunakan, bisa kita lihat di situs Schema.org pada bagian Comment dan UserComments.

Ada beberapa hal yang perlu kita cermati:

Pertama kita mendeklarasikan Comment sebagai sebuah wrapper, kemudian untuk tiap komentar menggunakan UserComments.

Misal kita mempunyai html markup seperti ini:

<div id='comment-wrapper'>
  <h3>Komentar</h3>
  <div class='comment'>
    <h5>Matt Cutts</h5>
    <div class='comment-body'><p>Great blog post, keep it up!</p></div>
    <div class='comment-timestamp'><span>13 Juli 2013 13.13</span></div>
    <div class='comment-reply'><a href='#'>Reply</a></div>
  </div>
</div>

Dengan menambahkan microdata maka markup akan menjadi seperti ini:

<div id='comment-wrapper' itemscope='itemscope' itemtype='http://schema.org/Comment'>
  <meta content='Judul artikel' itemprop='about'/>
  <meta content='URL dari artikel' itemprop='discussionUrl'/> 
  <h3>Komentar</h3>
  <div class='comment' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/UserComments'>
    <h5 itemprop='creator'>Matt Cutts</h5>
    <div class='comment-body' itemprop='commentText'><p>Great blog post, keep it up!</p></div>
    <div class='comment-timestamp' itemprop='commentTime'><span>13 Juli 2013 13.13</span></div>
    <div class='comment-reply' itemprop='replyToUrl'><a href='#'>Reply</a></div>
  </div>
</div>

Berikut adalah contoh implementasi Comment microdata yang saya tambahkan di blog ini:

<b:includable id='comments' var='post'>
  <div class='comments' id='comments' itemscope='itemscope' itemtype='http://schema.org/Comment'>
    <meta expr:content='data:post.title' itemprop='about'/>
    <meta expr:content='data:post.canonicalUrl' itemprop='discussionUrl'/>
    <a name='comments'/>
    <div id='disqus_thread'>
      <div id='noscript-comments'>
        <b:if cond='data:post.allowComments'>
          <h3>
            <data:post.commentLabelFull/>
          </h3>
          <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
            <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
              <b:loop values='data:post.comments' var='comment'>
                <div class='comment' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/UserComments'>
                  <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName' itemprop='creator' itemscope='itemscope' itemtype='http://schema.org/Person'>
                    <a expr:name='data:comment.anchorName'/>
                    <b:if cond='data:comment.authorUrl'>
                      <a itemprop='name' expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                        <data:comment.author/>
                      </a>
                      <b:else/>
                      <span itemprop='name'>
                        <data:comment.author/>
                      </span>
                    </b:if>
                    <data:commentPostedByMsg/>
                  </dt>
                  <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix' itemprop='commentText'>
                    <b:if cond='data:comment.isDeleted'>
                      <span class='deleted-comment'>
                        <data:comment.body/>
                      </span>
                      <b:else/>
                      <p>
                        <data:comment.body/>
                      </p>
                    </b:if>
                  </dd>
                  <dd class='comment-footer'>
                    <meta expr:content='data:post.canonicalUrl + "#" + data:comment.anchorName' itemprop='replyToUrl'/>
                    <a class='comment-timestamp' expr:href='data:post.canonicalUrl + "#" + data:comment.anchorName'>
                      <span itemprop='commentTime'>
                        <data:comment.timestamp/>
                      </span>
                    </a>
                  </dd>
                </div>
              </b:loop>
            </dl>
          </div>
        </b:if>
      </div>
    </div>
    <noscript>
      <p>
        Mohon aktifkan JavaScript di browser Anda untuk menambahkan komentar.
      </p>
    </noscript>
  </div>
</b:includable>

Saya menggunakan tema buatan sendiri jadi kode sedikit berbeda dengan tema standard blogspot tapi tetap saja mempunyai struktur yang hampir sama.