Membuat TOC SEO di Blog Manual dan Otomatis
Membuat TOC SEO di Blog | www.prantau.com - Table of Content (TOC) memiliki manfaat terhadap SEO on page di blog. Anda pengguna blogger? Berikut adalah pengertian apa itu TOC, apa manfaat TOC, dan cara membuat TOC secara otomatis dan manual di blog.
Hampir semua blogger, mulai menulis artikel dengan jumlah kata yang banyak dengan alasan teori seo on page bahwa semakin banyak kata dan kalimat yang ditulis akan semakin dilirik oleh mesin pencari. Benarkah?
Sebenarnya para pengunjung yang masuk dari mesin pencari hanya ingin langsung membaca point utama dari artikel. Untuk mempermudah pembaca mendapatkan langsung point - point penting tersebut, para blogger disarankan untuk menggunakan daftar isi pada artikel.
Definisi TOC
Table of Content (TOC) adalah menu navigasi pada artikel blog. Secara umum, para blogger mengartikan TOC adalah :- Table of Content (TOC) adalah daftar isi.
- Link pintasan ke sub judul.
- Penunjuk inti artikel.
- Rangkuman inti artikel.
- Melompat ke (jump to) sub judul.
- Widget navigasi.
- Widget SEO di Google search.
- Widget wajib untuk seo.
Manfaat TOC
- Mempermudah bot Google untuk merayapi url artikel (seo on page).
- Membuat artikel memiliki multi keyword yang relevan dengan judul.
- Menambah visitor organik dari search engine Google berkat multi keyword.
- Mempermudah pembaca mengetahui sub-sub judul.
- Mempermudah navigasi pembaca untuk langsung membaca sub judul yang dikehendaki.
- Membuat artikel terlihat rapi dan terstruktur.
- Membuat pembaca mudah memahami judul dengan penjelasan dari sub-sub judul.
- Membuat pembaca leluasa memilih mana yang akan terlebih dahulu dibaca.
Cara membuat TOC di blog - by igniel
Cara membuat TOC ala Igniel.com ini terdapat pada artikel yang berjudul membuat daftar isi seperti table of content (toc) wikipedia seo friendly.TOC seperti wikipedia
Gaya TOC seperti wikipedia adalah memiliki sub dari sub menu. Bagaimana cara membuat TOC seperti wikipedia?Buka blogger, pilih tema, dan klik edit html. Kemudian copy kode css berikut di bawah ini dan paste di atas ]]></b:skin>
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {display:inline-block; margin-right:10px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left}
.toc ul li {list-style-type:none;}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0645ad}
:not(:checked) > .toctoggle {display:inline !important; position:absolute; opacity:0}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'sembunyikan';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'tampilkan'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}
Sekarang masuk ke post, pilih tampilan html, jangan di mode tulisan. Copy kode css berikut dan paste di paling atas atau sesuaikan dengan kebutuhan.
<div class="toc">
<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h2>Daftar isi</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
<ol>
<li>1 <a href="#toc1" title="Judul Satu">Judul Satu</a></li>
<li>2 <a href="#toc2" title="Judul Dua">Judul Dua</a>
<ul>
<li>2.1 <a href="#toc2_1" title="Sub Judul dua ke Satu">Sub Judul Dua ke Satu</a></li>
<li>2.2 <a href="#toc2_2" title="Sub Judul dua ke Dua">Sub Judul Dua ke Dua</a></li>
</ul> </li>
<li>3 <a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>
<li>4 <a href="#toc4" title="Judul Empat">Judul Empat</a></li>
<li>5 <a href="#toc5" title="Judul Lima">Judul Lima</a>
<ul>
<li>5.1 <a href="#toc5_1" title="Sub Judul Lima ke Satu">Sub Judul Lima ke Satu</a></li>
<li>5.2 <a href="#toc5_2" title="Sub Judul Lima ke Dua">Sub Judul Lima ke Dua</a></li>
</ul>
</li>
<li>6 <a href="#toc6" title="Judul Enam">Judul Enam</a></li>
</ol>
</div>
Supaya TOC SEO bekerja, silakan buat tag heading (h2) pada sub menu seperti berikut ini (pergunakan mode penulisan/tampilan html) :
<h2 id="toc1">Judul Satu</h2>
...isi paragraf satu
<h2 id="toc2">Judul Dua</h2>
...isi paragraf dua
<h2 id="toc3">Judul Tiga</h2>
...isi paragraf tiga
<h2 id="toc4">Judul Empat</h2>
...isi paragraf empat
<h2 id="toc5">Judul Lima</h2>
...isi paragraf lima
<h3 id="toc5_1">Sub Judul Lima ke Satu</h3>
...isi paragraf lima part 1
<h3 id="toc5_2">Sub Judul Lima ke Dua</h3>
...isi paragraf lima part 2
<h2 id="toc6">Judul Enam</h2>
...isi paragraf enam
Pastikan id pemanggil pada daftar isi sama. Contoh pemanggil pada daftar isi adalah #toc, maka pada id heading pun harus sama yaitu id='toc'. Agar tidak bertabrakan, id pemanggil satu dengan yang lain tidak boleh sama.
Cara membuat TOC di blog - by kompiajaib
TOC versi kompiajaib tidak ada sub menu pada menu. TOC ini single menu. Berikut adalah cara dari kompiajaib.com dengan judul membuat table of contents di postingan untuk blog non AMP.Buka blogger, pilih tema, dan klik edit html. Copy kode CSS di bawah ini dan paste di atas ]]></b:skin>
#btn_toc{font-weight:bold;cursor:pointer}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li,.back_toc{cursor:pointer}
#toc{display:grid}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}
Sekarang masuk ke post, pilih tampilan html, jangan di mode tulisan. Copy kode css berikut dan paste di paling atas atau sesuaikan dengan kebutuhan.
<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="Satu">Satu</a></li>
<li><a href="#toc_2" title="Dua">Dua</a></li>
<li><a href="#toc_3" title="Tiga">Tiga</a></li>
<li><a href="#toc_4" title="Empat">Empat</a></li>
<li><a href="#toc_5" title="Lima">Lima</a></li>
</ol>
</div>
Supaya TOC SEO bekerja, silakan buat tag heading (h2) pada sub menu seperti berikut ini (pergunakan mode penulisan/tampilan html) :
<h2 id="toc1">Judul Satu</h2>
...isi paragraf satu
<h2 id="toc2">Judul Dua</h2>
...isi paragraf dua
<h2 id="toc3">Judul Tiga</h2>
...isi paragraf tiga
<h2 id="toc4">Judul Empat</h2>
...isi paragraf empat
<h2 id="toc5">Judul Lima</h2>
...isi paragraf lima
Sama dengan cara igniel, pemanggil toc harus sama. Contoh : jika pemanggil pada daftar isi adalah #arti-toc, maka id heading harus sama juga yaitu id='arti-toc'. Supaya toc tidak bertabrakan, id pemanggil satu dengan yang lain harus berbeda.
Cara membuat TOC di blog - otomatis by idnxmus
TOC otomatis dari Idnxmus ini bersumber dari artikel tutorial blog idnxmus.com yang berjudul cara membuat table of content otomatis (TOC) dalam postingan blog (seo friendly + hirarki).Karena otomatis, jadi memasang TOC pada blog tidak perlu repot harus menambahkan css khusus pada mode html. Dengan javascript, toc bisa otomatis muncul pada artikel.
Berikut adalah cara membuat TOC otomatis di blog. Seperti biasa, pilih tema dan edit html. Kemudian copy kode di bawah, paste di atas </head>
<script type='text/javascript'>
//<![CDATA[
function tockeren(){
var a=1,b=0,c="";
document.getElementById("postMiddle").innerHTML=document.getElementById("postMiddle").innerHTML.replace(/<h([d]).*?>(n.*?|.*?)</h([d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#'+f.replace(/[^a-z]/gi," ").trim().replace(/s/g,"_")+'" title="'+f+'">'+f.replace(/[^a-z]/gi," ")+"</a>",a=parseInt(e),"<h"+e+" id='"+f.replace(/[^a-z]/gi," ").trim().replace(/s/g,"_")+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("tocContent").innerHTML+=c}
//]]>
</script>
Selanjutnya tekan ctrl+f, paste kode ini : <data:post.body/> dan hapus, ganti dengan :
<div id='postMiddle'>
<div class='tableOfContent'>
<input aria-label='Daftar Isi' class='toctoggle' id='toctoggle' role='button' type='checkbox'/>
<span class='toctogglespan'><label class='toctogglelabel' for='toctoggle'/></span>
<div id='tocContent'/>
</div>
<data:post.body/>
<script>tockeren();</script>
</div>
Terakhir, copy CSS di bawah ini, paste di atas ]]></b:skin>
/* TOC Otomatis by idnxmus.com */
.post-body .tableOfContent {
padding:12px 15px;
margin:20px 0;
background-color:#f8f9fa;
border:1px solid #e4e9ef;
border-radius:4px;
font-size:16px;
line-height:1.5em;
}
.post-body .tableOfContent #tocContent {
margin:5px 0;
}
.post-body .tableOfContent #tocContent ol, .post-body .tableOfContent #tocContent ul {
margin:0 0 10px;
padding:10px 0 0 17px;
position:relative;
}
.post-body .tableOfContent #tocContent ol ol, .post-body .tableOfContent #tocContent ul ul, .post-body .tableOfContent #tocContent ol ul, .post-body .tableOfContent #tocContent ul ol {
padding-left:30px;
}
.post-body .tableOfContent #tocContent li {
position:relative;
margin:0 0 10px;
}
.post-body .tableOfContent #tocContent ol ul:before, .post-body .tableOfContent ol ol:before, .post-body .tableOfContent #tocContent ul ol:before, .post-body .tableOfContent ul ul:before {
content:'';
display:block;
width:1px;
height:calc(100% - 10px);
position:absolute;
left:-11px;
border-left:1px dashed rgba(0,0,0,.2);
top:0;
}
.post-body ol.point2 li:before {
content:'';
display:block;
height:1px;
width:15px;
border-top:1px dashed rgba(0,0,0,.2);
position:absolute;
left:-38px;
top:10px;
}
.post-body .tableOfContent #tocContent a {
display:inline-table;
margin-left:5px;
}
.post-body .tableOfContent #tocContent .point2 a {
margin:0;
}
.post-body .tableOfContent #tocContent a:hover {
text-decoration:underline;
}
.post-body .tableOfContent .toctogglelabel {
display:block;
cursor:pointer;
}
.post-body .tableOfContent .toctogglespan i.icon.icon-dropdown {
float:right;
margin:0;
}
ol.point2 li {
list-style-type:circle;
position:relative;
}
:not(:checked) > .toctoggle {
display:inline !important;
position:absolute;
opacity:0;
}
.tableOfContent .toctogglespan .toctogglelabel:before {
content:'Daftar Isi :';
font-weight:600;
}
.toctoggle:checked ~ #tocContent {
display:none;
}
label.toctogglelabel:after {
background-image:url("data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z' fill='%2309204C'/></svg>");
content:'';
margin-top:3px;
width:16px;
height:16px;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
float:right;
transition:all .3s ease;
-webkit-transition:all .3s ease;
}
.toctoggle:checked + .toctogglespan .toctogglelabel:after {
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.post-body ol.point2 {
padding-top:10px;
}
:target::before {
content:"";
display:block;
height:60px;
margin-top:-60px;
visibility:hidden;
}
@media screen and (max-width:480px) {
.post-body .tableOfContent {
font-size:15px;
}
}
Jika sudah menggunakan header melayang, sesuaikan tinggi header pada code css :target::before { dan jika tidak menggunakan header melayang, silakan hapus code tersebut.
Cara membuat TOC di blog AMP - TOC valid AMP
Pada blog Accelerated Mobile Pages (AMP), TOC harus valid AMP, yang artinya tidak bisa menggunakan javascript, yang artinya lagi tidak bisa otomatis.TOC yang valid AMP maka secara kode harus pure CSS (murni CSS), tanpa javascript.
Cara membuat TOC di blog dengan css - tanpa javascript
Untuk membuat TOC valid AMP di blog AMP, silakan masuk ke blogger, pilih menu tema, dan edit html. Kemudian tekan ctrl+f, copy dan paste kode : <style amp-custom>
/* Table Of Content by idnxmus.com */
#toc_wrapper {
background:#ddd;
max-width:450px;
position:relative;
padding:10px;
border-radius:4px;
margin:20px auto;
}
.tombol_toc {
position: relative;
font-weight: bold;
outline: none;
}
.tombol_toc svg {
float:right;
}
#daftarisi {
background:#fff;
padding:10px 10px 0;
border-radius:4px;
margin-top:10px;
-webkit-box-shadow: 0 2px 15px rgba(0,0,0,.05);
box-shadow:0 2px 15px rgba(0,0,0,.05);
}
#daftarisi a {
text-decoration:none;
}
#daftarisi ul {
padding:0 0 0 20px;
margin:0
}
#daftarisi ul li.lvl1 {
line-height:1.8em;
padding:4px 0;
}
#daftarisi ul li.lvl1:nth-child(n+2) {
border-top:1px dashed #ddd;
}
#daftarisi ul li.lvl1 a {
font-weight:600;
}
#daftarisi ul li.lvl2 a {
font-weight:400;
}
#daftarisi ul li a:hover {
text-decoration:underline;
}
:target::before {
content:"";
display:block;
height:40px;
margin-top:-40px;
visibility:hidden;
}
Copy kode CSS di atas, dan paste di bawah kode tadi. Simpan tema, lalu copy kode di bawah ini, ke mode html di postingan ya, bukan mode tampilan menulis.
<div id="toc_wrapper">
<div class="tombol_toc" on="tap:daftarisi.toggleVisibility" role='button' tabindex='0'>DAFTAR ISI <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="daftarisi">
<ul>
<li class="lvl1">
<a href="#toc1" title="ganti dengan judul sub menu 1">ganti dengan judul sub menu 1</a>
<ul>
<li class="lvl2"><a href="#toc1_1" title="ganti dengan judul sub menu 1.1">ganti dengan judul sub menu 1.1</a></li>
<li class="lvl2"><a href="#toc1_2" title="ganti dengan judul sub menu 1.2">ganti dengan judul sub menu 1.2</a></li>
<li class="lvl2"><a href="#toc1_3" title="ganti dengan judul sub menu 1.3">ganti dengan judul sub menu 1.3</a></li>
</ul>
</li>
<li class="lvl1"><a href="#toc_2" title="ganti dengan judul sub menu 2">ganti dengan judul sub menu 2</a></li>
<li class="lvl1"><a href="#toc_3" title="ganti dengan judul sub menu 3">ganti dengan judul sub menu 3</a></li>
<li class="lvl1"><a href="#toc_4" title="ganti dengan judul sub menu 4">ganti dengan judul sub menu 4</a></li>
</ul>
</div>
</div>
Supaya TOC valid AMP bekerja, buat tag heading (h2) pada sub menu seperti berikut ini (pergunakan mode penulisan/tampilan html) :
<h2 id="toc1">Judul Satu</h2>
...isi paragraf satu
<h2 id="toc1_1">Judul Satu</h2>
...isi paragraf satu titik dua
<h2 id="toc1_2">Judul Satu</h2>
...isi paragraf satu titik dua
<h2 id="toc1_3">Judul Satu</h2>
...isi paragraf satu titik tiga
<h2 id="toc2">Judul Dua</h2>
...isi paragraf dua
<h2 id="toc3">Judul Tiga</h2>
...isi paragraf tiga
<h2 id="toc4">Judul Empat</h2>
...isi paragraf empat
Sama dengan cara igniel dan kompiajaib, pemanggil toc harus sama. Contoh : jika pemanggil pada daftar isi adalah #toc1_1, maka id heading harus sama juga yaitu id='toc1_1'. Supaya navigasi TOC tidak bertabrakan, selalu diingat, bahwa id pemanggil satu dengan yang lain harus berbeda.
Post a Comment
Maaf! Hanya komentar sopan dan relevan yang akan disetujui. Terima kasih.