Membuat Komentar Blogger Valid AMP dan Anti Backlink Spam

Umumnya komentar pada blog AMP menggunakan Disqus atau Facebook comment. Awalnya versi mobile blog ini juga menggunakan komentar Facebook, tapi sekarang menggunakan Threaded Comment Blogger yang tentunya sudah di custom valid AMP. Untuk versi dekstop juga ditambahkan fitur komentar Disqus (untuk diskusi). Sama seperti di posting sebelumnya komentar blogger ini menggunakan schema.org dan anti backlink untuk SEO.

Schema komentar yang saya temukan hanya ada dua jenis yaitu https://schema.org/UserComments dan https://schema.org/comment. Karena usercomment mencantumkan sebagai cara lama untuk berinteraksi, maka diputuskan untuk menggunakan https://schema.org/comment, itu juga diperkuat lagi dengan digunakan oleh mastah blogger (platform wordpress).

Blogger sudah menggunakan tag nofollow untuk setiap anchor link yang ada pada komemtar seperti yang sudah dijelaskan di blog resminya puluh tahun lalu. Tapi bagi saya itu tidak cukup, maka dengan Anti Backlink link apapun yang ada pada komentar akan dihapus, sehingga menjadi hanya berupa teks saja.

Ada blogger yang bilang jika setiap backlink dalam komentar dan dimasukkan ke spam. Maka sistem blogger secara otomatis akan menyesuaikan perilaku yang sama yaitu memasukkan komentar yang terdapat link ke dalam spam (dilakukan secara otomatis oleh boot blogger).

Komentar ini valid AMP, cuman ada keterbatasan dalam fiturnya (tidak seperti pada non-AMP atau versi dekstop). Yaitu tidak bisa untuk balas komentar, mungkin sebenarnya bisa diakali dengan amp-bind, yaa... karena agak ribet malas otak-atik. Untuk kotak form menggunakan amp-iframe, walaupun masih ada kesalahan saat memuatnya, cek di log consol. tapi tidak berpengarus validasi amp, dan tetap bisa digunakan.

Tampilan saya buat sama seperti sebelumnya simple biar tidak memakan banyak ruang. Pertama harus sudah memasang amp-frame pada template.

Karena tampilan sama seperti sebelumnya, gunakan CSS pada posting schema.org dan anti backlink untuk SEO.

* Penting jika ingin menggunakan komentar ini - kode komentar blogger seo ini menggunakan "post.numberOfComments". Dan kode tersebut hanya support "Gadget Versi 2" dan "layout Versi 3". Artinya sarat menggunakannya, template harus sudah versi terbaru. jika tidak, nanti malah akan error. Tetapi ada kok.

Cara mengatasinya ganti kode "data:post.numberOfComments" menjadi "data:post.comments.length". biar bisa digunakan untuk template lama. silahkan lanjutkan sendiri.

Tambahkan kode xml b:includable berikut ke dalam widget blog1. Lebih mudahnya taruh setelah kode </b:widget-settings> yang ada dalam widget blog1. di dalam widget blog1 tersebut terdapat banyak .

Select All

<b:includable id='commentblock' var='cb'>
 <div class='comment-block' itemprop='comment' itemscope='' itemtype='https://schema.org/Comment'>
 <div class='avatar-image-container'>
 <b:if cond='data:cb.level.authorAvatarSrc != &quot;//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s35&quot;'>
 <img class='author-avatar' expr:alt='data:cb.level.author' expr:src='data:cb.level.authorAvatarSrc' expr:title='data:cb.level.author' height='35' width='35' />
 </b:if>
 </div>
 <div class='comment-header'><b:if cond='data:cb.level.author != &quot;Unknown&quot;'><a expr:href='data:cb.level.authorUrl' rel='noopener external nofollow' target='_blank' class='user' itemprop='author' itemscope='' itemtype='https://schema.org/Person'><span itemprop='name'><data:cb.level.author/></span></a><b:else/><span class='user'>Unknown</span></b:if><span class='datetime secondary-text' itemprop='datePublished'><a expr:href='&quot;#c&quot; + data:cb.level.id' itemprop='url'><data:cb.level.timestamp/></a></span></div>
 <div class='comment-content' itemprop='text'>
 <p>
 <b:if cond='data:cb.level.authorUrl != data:post.author.profileUrl'><b:eval expr='data:cb.level.body snippet { links: false }' /><b:else/>
 <data:cb.level.body/>
 </b:if>
 </p>
 </div>
 <b:if cond='data:cb.d'><span expr:class='&quot;item-control &quot; + data:cb.level.adminClass'><a expr:href='data:cb.level.deleteUrl' rel='noopener external nofollow' target='_blank'/></span></b:if>
 </div>
</b:includable><b:includable id='threadedComments-amp' var='post'>
 <section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
 <h4><data:messages.postAComment/>:</h4>
 <b:if cond='data:post.numberOfComments &gt; 0'>
 <div class='comments-content'>
 <meta expr:content='data:post.numberOfComments' itemprop='commentCount' />
 <ol id='comment-holder'>
  <b:loop values='data:post.comments where (c =&gt; not c.inReplyTo)' var='commentLevel1'>
  <li class='comment' expr:id='&quot;c&quot; + data:commentLevel1.id'><b:include data='{level: data:commentLevel1,d: false}' name='commentblock' />
  <b:with value='data:post.comments where (c =&gt; c.inReplyTo == data:commentLevel1.id)' var='commentL2'>
  <b:if cond='data:commentL2.size != &quot;0&quot;'>
   <div class='comment-replies'>
   <ul class='thread-chrome thread-expanded'>
   <b:loop values='data:commentL2' var='commentLevel2'>
   <li class='comment-reply' expr:id='&quot;c&quot; + data:commentLevel2.id'><b:include data='{level: data:commentLevel2,d: false}' name='commentblock' /></li>
   </b:loop>
   </ul>
   </div>
  </b:if>
  </b:with>
  </li>
  </b:loop>
 </ol>
 </div>&lt;div class=&#39;comment-form&#39;&gt;<b:else/>
 <meta content='0' itemprop='commentCount' />&lt;div class=&#39;comment-form&#39;&gt;</b:if>
 <div id='threaded-comment-form'>
 <p>Berkomentar sopan dan baik. Ada kata buruk atau berisi tautan url/link aktif, komentar tidak akan disetujui atau disetujui dengan link mati! | Berdiskusi gunakan <b>Disqus</b>!</p>
 <amp-iframe expr:src='data:post.commentFormIframeSrc' height='280' id='comment-editor' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-forms allow-top-navigation' />
 </div>&lt;/div&gt;</section>
</b:includable>

Untuk yang mark kuning itu juga bagian dari kode komentar blogger non-amp. Jadi jika sebelumnya telah mesasangnya, jangan pasang lagi kode yang di mark.

Pada kode postingan (<b:includable id='post' var='post'>) panggil komentar amp dengan kode b:include berikut:

<b:include data='post' name='threadedComments-amp'/>

Jika sebelumnya menggunakan komentar blogger, maka ganti kode di bawah ini dengan kode di atas.

<b:include data='post' name='threadedComments'/>

Intinya ganti kode b:include komentar sebelumnya dengan kode komentar baru. Atau bisa letakkan sesuai selera, contoh setelah related post AMP, maka cari kode html related post lalu letakkan di bawahnya. Dan tentunya komentar lama dihapus.

Lalu coba cek ada kesalahan tidak pada tampilan dan juga validasi AMP. Sekian dari saya, dan bantu share ya.