Membuat Komentar Blogger Simple SEO Ringan dengan Schema.org

Komentar merupakan salah satu bagian dari blog yang digunakan untuk pertanyaan, pendapat, dan bisa juga berdiskusi. Komentar bawaan blogger tersedia dalam 2 jenis yaitu yang biasa tidak ada fitur balas komentar (Comments) dan yang bertingkat (Threaded Comments) dengan fitur balas komentar. Kedua jenis komentar tersebut tidak menyertakan schema data terstruktur, yang tentunya berfungsi untuk SEO.

Dengan adanya schema.org komentar yang positif dapat dengan mudah dibaca / index oleh mesin google dan tentunya dapat berguna untuk reputasi blog di pencarian google. Karena google sendiri juga menggunakan komentar untuk menilai konten, intinya reaksi pengunjung setelah membaca artikel. Mungkin dengan ditambahkannya schema akan lebih baik jika dibandingkan dengan tanpa schema.

Blog ManKoin menggunakan komentar dengan schema.org, pada postingan kali ini membahas tentang membuat komentar dengan banyak fitur tapi sederhana. Awalnya ini dari blogger lain yang meminta membuat komentar seperti blog ini. Tapi, karena panjang saya posting sekalian di blog ini.

Dan kali ini adalah cara untuk membuat komentar blogger bisa lebih SEO dengan schema.org. Tidak hanya itu komentar ini juga super ringan, tanpa javascript eksternal seperti jQuery, dan bisa juga untuk fitur yang lain-lain.

Fitur komentar

1. Valid HTML5 - memiliki struktur yang baik
2. Sangat Ringan - tanpa javascript eksternal
3. SEO - dengan schema.org
4. Threaded comment - komentar bertingkat (balas komen)
5. Anti backlink - menghapus link aktif apapun pada komentar dengan snippet.
6. Valid AMP - bisa digunakan untuk blog AMP

Dari segi fiturnya cukup menarik dan bagus, utamanya Anti backlink untuk mengatasi (menghapus) backlink yang aktif. Tapi ini ada kekurangannya, pertama komentar dikelola atau di buat di blogger. Artinya saya merasa kalau ini bisa membuat respon dari server lebih lambat apalagi jika jumlah komentarnya banyak. Walaupun mungkin waktu respon server sama saja seperti komentar bawaan blogger. Kedua, jika terdapat komentar yang banyak (lebih dari 200) tidak ada tombol load more atau paginasi.

* 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.

Pertama mulai dengan menaruh CSS style. CSS saya buat simple, artinya tampilan komentar juga simpel sepeti blog ini. Tujuannya biar mudah dan nyaman digunakan, walaupun tampilan tidak sebagus para mastah.

Select All

/*By: mankoin.com*/
*,:after,:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#comment-holder,.thread-chrome{margin:0;padding:0;position:relative;z-index:1;}
b{font-weight:700;}
cite,i{font-style:italic;}
a,a:link{color:#2962ff;}
a:link,a:visited{text-decoration:none;}
p{margin-top:20px;margin-bottom:20px;}
:focus{outline:0;}
h4{line-height:normal;font-weight:700;margin-bottom:10px;}
h4{font-size:110%;}
li,ul{margin:5em 0;}
ul{list-style:disc;}
a:focus,a:hover,a:link:hover,a:visited:hover{color:#2962ff;}
:target:before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden;}
#comments h4{margin-top:0;font-size:22px;}
#threaded-comment-form p,.comment-form p{line-height:24px;padding:10px;margin-top:0;border-radius:2px;position:relative;background-color:#eee;color:#444;font-size:16px;margin-bottom:10px;font-weight:500;}
#threaded-comment-form p:before,.comment-form p:before{content:"";width:0;height:0;position:absolute;top:100%;left:30px;border:10px solid transparent;border-top-color:#eee;display:block;}
.comment-replies{padding-left:10px;border-left:1px solid #ccc;margin-top:15px;}
#comments .comment{list-style-type:none;padding:15px 10px;box-shadow:inset 0 -1px 0 0 rgba(100,121,143,.122);margin:0;}
#comments .comment-reply{padding:10px 10px 5px;list-style-type:none;background-color:#fafafa;margin-bottom:0;}
.avatar-image-container{width:35px;height:35px;float:left;background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='35' height='35' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234374e0' d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-repeat:no-repeat;}
.comment-block:hover .item-control{opacity:1;}
.comment-header a.user{font-size:15px;font-style:normal;font-weight:700;color:#202124;}
.reply-to{cursor:pointer;}
.comment-header .datetime a{bottom:0;color:rgba(0,0,0,.54);display:inline-block;font-size:13px;font-style:italic;}
.datetime a{color:rgba(0,0,0,.54);}
.comment-content p{margin:7px 0 10px;font-size:16px;}
#comment-editor{border:0;width:100%;height:250px;}
.comments .continue{display:inline-block;margin-top:10px;}
#addcomment+#threaded-comment-form{margin-top:-55px;}
#addcomment{color:#fff;margin:20px 10px;text-align:center;padding:6px;cursor:pointer;font-weight:700;font-size:17px;border-radius:2px;}
#addcomment{background-color:#31a954;}
#comments .comment:hover{box-shadow:0 1px 3px 1px rgba(60,64,67,.15);}
.comment-reply:hover{box-shadow:0 1px 2px 0 rgba(60,64,67,.3);}
.item-control{background-color:transparent;opacity:0;}
.item-control,.item-control:hover{position:absolute;top:0;right:0;padding:5px;border-radius:17px;}
.comment-block{position:relative;}
.item-control a:before{content:'';border-radius:50%;background-color:rgba(32,33,36,.059);line-height:0;width:24px;height:24px;display:none;}
.item-control a:after,.reply-to:before{content:'';width:24px;height:24px;background-repeat:no-repeat;vertical-align:middle;}
.item-control a:after{opacity:54;background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23000000' d='M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-size:24px 24px;display:block;}
.comment-header{margin-left:45px;line-height:17px;}
.reply-to{color:#5f6368;padding:3px 8px 5px 5px;box-shadow:inset 0 0 0 1px #dadce0;border-radius:4px;}
.comment-actions{margin:10px 0 0;}
.comment-reply:hover .item-control,.item-control:hover a::after{opacity:1;}
.reply-to:before{background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23757575' d='M10,9V5L3,12L10,19V14.9C15,14.9 18.5,16.5 21,20C20,15 17,10 10,9Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-size:20px 20px;display:inline-block;}
.item-control:hover,.reply-to:hover{background-color:rgba(32,33,36,.059);}
.comment-replies .author-avatar{background-color:#fafafa;}
.user{display:block;}

Kedua mengganti kode pada templale. Cari kode dan hapus kode antara kode <b:includable id='threadedComments' var='post'> dan </b:includable>,ganti dengan kode berikut.

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' 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: true}' name='commentblock' />
 <div class='comment-actions'><span class='reply-to' expr:data-reply-to='data:commentLevel1.id'>Balas</span></div>
 <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: true}' name='commentblock' /></li>
 </b:loop>
 </ul>
 <div class='continue'><span class='reply-to' expr:data-reply-to='data:commentLevel1.id'>Balas</span></div>
 </div>
 </b:if>
 </b:with>
 </li>
 </b:loop>
 </ol>
 </div>&lt;div class=&#39;comment-form&#39;&gt;
 <script>
 var comment = true;
 </script>
 <div aria-label='Berkomentar' id='addcomment' role='button'>Tambahkan Komentar</div><b:else/>
 <meta content='0' itemprop='commentCount' />
 <script>
 var comment = false;
 </script>&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>
 <iframe class='blogger-iframe-colorize blogger-comment-from-post' expr:data-src='data:post.commentFormIframeSrc' height='250' id='comment-editor' name='comment-editor' width='100' />
 </div>&lt;/div&gt;</section>
<script>//<![CDATA[mankoin.com
document.addEventListener("DOMContentLoaded", function() {
 var a=document,
 b = a.getElementById("comment-editor"),
 d = b.getAttribute("data-src");
 if (b.setAttribute("src", d), 1 == comment) {
 var f = a.getElementsByClassName("reply-to"),
 c = a.getElementById("threaded-comment-form"),
 h = f.length,
 k = function(b, d, e, f) {
 b.addEventListener("click", function() {
 var c = b.getAttribute("data-reply-to");
 a.getElementById("c" + c).appendChild(d);
 e.src = f + "&parentID=" + c
 })
 };
 for (i = 0; i < h; i++) k(f[i], c, b, d);
 var l = a.getElementsByClassName("comment-form")[0];
 a.getElementById("addcomment").addEventListener("click", function() {
 l.appendChild(c);
 b.src = d
 })
 }
}); //]]></script>
 </b:includable>

Setelah mengganti komentar bawaan blogger, coba cek apakah ada kesalahan atau masalah. Untuk postingan selanjutnya Komentar Blogger Valid AMP dan Anti Backlink Spam.

Mungkin hanya itu dan sekian tentang custom komentar blogger.

Update Tampilan Baru 30/01/2019.