Cara Membuat Sitemap di Blog AMP HTML

Seperti yang sudah kita ketahui fungsi adanya Peta situs dalam sebuah blog AMP atau Non-AMP mampu memberikan kontribusi dalam penilaian Google terhadap suatu situs terutama perihal Search Engine Optimization (SEO), juga memudahkan pembaca agar tidak kebingungan saat mencari atau sekedar melihat daftar isi blog Anda..

Membuat peta situs di blog Non AMP sangatlah mudah karena Anda hanya memerlukan script yang otomatis menampilan deretan isi blog sesuai postingan yang di publikasikan.

Yang jadi petanyaanya adalah "Bagaimana cara membuat sitemap di blog AMP?"

Dikarenakan blog Amp tidak support JavaScript dalam postingan, platform blogger tidak Support SSL atau HTTPS menggunkan custom domain Top Level Domain (TLD)  maka dari itu pembuatan sitemap pada blog AMP sedikit menemui kesulitan karena tidak akan bekerja sama sekali.

Sebagai jalan keluarnya, Pembuatan sitemap di blog AMP bisa diakali dengan menghosting file javascript kita ke github misalnya dan memanipulasi URL menggunakan cdn.ragwit sebagai Url penggantinya lalu gunakan komponen amp-Iframe agar bekerja dengan baik...

...dengan begitu Sitemap otomatis akan tampil sesuai konten blog Anda.

Biasanya Blog Amp menggunakan plaform blogger menampilakn dua buah sitemap dengan url yang berbeda. untuk itu Anda harus membuat dua buah sitemap untuk versi Dekstop dan Mobile..

Sebagai contohnya silahkan lihat perbedaan keduanya :

Sitemap Omboolom Versi Dekstop
Sitemap Omboolom Versi Mobile

Untuk pembuatanya simak tutorial dibawah kreasi Kang Adhy Suryadi dibawah ini :

Langkah Pertama

Silahakan buat halaman static dengan judul "Sitemap" dan publikasikan,

Langkah Kedua

Lihat halaman yang sudah dipublish tadi lalu klik kanan pilih View Page Source dan silahkan Copy Paste semua kodenya di notepad atau dreamweaver.

Langkah Ketiga

Silahkan hapus kode yang tidak perlu seperti verifikasi search engine (webmasters) dan Analytic.

Langkah Keempat

Rubah Judul halaman Static Blog Anda, seperti contoh dibawah ini.

<title>sitemmap Omboolom</title>

menjadi

<title>Sitemap Blog Sobat</title>

Langkah Kelima

Cari Kode Sperti dibawah ini :

<div class='post-body entry-content' id='post-body-080808070797970' itemprop='articleBody'>


*Nomer yang berwarna kuning hanyalah sebai contoh

Tambahkan kode dibawah ini sebelum <div class='clear'></div> 


<div id="table-outer">

<table><tbody>

<tr><td><label for="feed-order">Urutkan artikel berdasarkan:</label></td> <td><select id="feed-order"> <option selected="" value="published">Artikel terbaru</option> <option value="updated">Artikel yang terakhir di update</option> </select></td></tr>

<tr><td><label for="label-sorter">Filter artikel berdasarkan kategori:</label></td> <td><select disabled="" id="label-sorter"> <option selected="">Loading....</option> </select></td></tr>

<tr>                 <td><label for="feed-q">Cari artikel dengan kata kunci:</label></td> <td><form id="post-searcher">

<input id="feed-q" type="text" placeholder="Ketik dan tekan ENTER"/>

</form>

</td></tr>

</tbody></table>

</div>

<header id="result-desc"></header>

<ul id="feed-container"></ul>

<div id="feed-nav">

</div>

<script type='text/javaScript'>

document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={homePage:"http://www.omboolom.net/",maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",loading:"<span>Memuat...</span>",counting:"<div>Memuat artikel...</div>",searching:"<span>Mencari...</span>"},w=window,d=document,el=function(id){return d.getElementById(id);},o={a:el('feed-order'),b:el('label-sorter').parentNode,c:el('post-searcher'),d:el('feed-q'),e:el('result-desc'),f:el('feed-container'),g:el('feed-nav'),h:d.getElementsByTagName('head')[0],i:0,j:null,k:'published',l:0,m:""},fn={a:function(){old=el('temporer-script');old.parentNode.removeChild(old);},b:function(param){var script=d.createElement('script');script.type="text/javascript";script.id="temporer-script";script.src=param;if(el('temporer-script'))fn.a();o.h.appendChild(script);},c:function(mode,tag,order){o.i++;o.e.innerHTML=cfg.counting;o.g.innerHTML=cfg[mode==1?"searching":"loading"];if(mode===0){fn.b(tag!==null?cfg.homePage+'/feeds/posts/summary/-/'+ tag+'?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc':cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc');}else if(mode==1){fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&q='+ tag+'&orderby='+ order+'&callback=loadToc');}

o.j=(tag!==null)?tag:null;o.l=mode;o.a.disabled=true;o.b.children[0].disabled=true;},d:function(json){var _h;o.g.innerHTML="";o.e.innerHTML=o.l==1?'<span>Hasil penelusuran untuk kata kunci <b>&#8220;'+ o.m+'&#8221;</b> ('+ json.feed.openSearch$totalResults.$t+' Hasil)</span>':'<div>Total: '+ json.feed.openSearch$totalResults.$t+' Artikel</div>';if("entry"in json.feed){var a=json.feed.entry,b,c,_d,e="0 Komentar",f="",g;for(var i=0;i<cfg.maxResults;i++){if(i==a.length)break;b=a[i].title.$t;_d=("summary"in a[i])?a[i].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,cfg.numChars):"";g=("media$thumbnail"in a[i])?a[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+""):cfg.noImage.replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+"");for(var j=0,jen=a[i].link.length;j<jen;j++){c=(a[i].link[j].rel=="alternate")?a[i].link[j].href:"#";}

for(var k=0,ken=a[i].link.length;k<ken;k++){if(a[i].link[k].rel=="replies"&&a[i].link[k].type=="text/html"){e=a[i].link[k].title;break;}}

_h=d.createElement('li');_h.innerHTML='<div class="inner"><img style="width:'+ cfg.thumbWidth+'px;height:'+ cfg.thumbHeight+'px;" src="'+ g+'" alt="'+ b+'"><a class="toc-title" href="'+ c+'" target="_blank" title="'+ b+'">'+ b+'</a><div class="news-text">'+ _d+'&hellip;<br style="clear:both;"></div></div>';o.f.appendChild(_h);}

_h=d.createElement('a');_h.href='#load-more';_h.innerHTML=cfg.navText;_h.onclick=function(){fn.c(o.l,o.j,o.k);return false;};}else{_h=d.createElement('a');_h.href='#reset-content';_h.innerHTML=cfg.resetToc;_h.onclick=function(){o.i=-1;o.e.innerHTML=cfg.counting;o.f.innerHTML="";fn.c(0,null,'published');o.a.innerHTML=o.a.innerHTML;o.b.children[0].innerHTML=o.b.children[0].innerHTML;return false;};}

o.g.appendChild(_h);o.a.disabled=false;o.b.children[0].disabled=false;},e:function(json){var a=json.feed.category,b='<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';for(var i=0,len=a.length;i<len;i++){b+='<option value="'+ encodeURIComponent(a[i].term)+'">'+ encodeURIComponent(a[i].term)+'</option>';}

b+='</select>';o.b.innerHTML=b;o.b.children[0].onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.loading;fn.c(0,this.value,o.k);};}};loadToc=fn.d;loadCategories=fn.e;fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+(o.i+ 1)+'&max-results='+ cfg.maxResults+'&orderby=published&callback=loadToc');fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');o.a.onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.counting;o.b.children[0].innerHTML=o.b.children[0].innerHTML;fn.c(0,null,this.value);o.k=this.value;};o.c.onsubmit=function(){o.i=-1;o.f.innerHTML="";o.m=o.d.value;fn.c(1,o.d.value,o.k);return false;};}};_toc.init();

</script>

Ganti kode http://www.omboolom.net dengan URL blog Anda.

Langkah Keenam

Simpan file yang sudah dirubah dengan extensi html silahkan hosting ke github dan manipulasi url yang sudah di hosting di cdn.ragwit tanpa menggunakan HTTPS.

*Untuk tatacara menghosting file ke guthub silahkan cari aja di google, karena saya belum membuat tutorialnya.

Pembuatan sitemap sudah selesai

Cara Menerapkan Sitemap Di Blog AMP


Langkah Pertama

Silahkan simpan CSS di bawah ini di atas kode </style>. *Biasanya terdapat lebih dari satu


#table-outer{padding:7px 10px;margin:0 auto}

#table-outer table{width:auto;margin:0 auto}

#table-outer form{font:inherit}

#table-outer label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}

#table-outer select[disabled]{opacity:.4}

#post-searcher{display:block;margin:0;padding:0}

#table-outer input,#table-outer select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family: Roboto,sans-serif;font-size:16px;font-weight:500;text-transform:capitalize;outline:0;color:#333;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

#table-outer select option{min-height:1.4em;}

#table-outer input#feed-q{padding:5px 10px;}

#feed-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}

#feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}

#feed-container li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}

#feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:500}

#feed-container li a:hover{text-decoration:none;color:#E94141}

#feed-container li .news-text{margin-top:5px;line-height:1.3em}

#feed-container li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;}

#result-desc{margin:0;padding:0;}

#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}

#result-desc div{color:inherit}

#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}

#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}

#feed-nav a,#feed-nav span:hover{color:#1B1B1B}

#feed-nav a:active,#feed-nav a:hover{color:#555}

#feed-nav span{cursor:wait}

@media screen and (max-width:600px){#table-outer table{margin:0 auto;width:100%}

#feed-container,#table-outer{margin:0 auto}

#feed-container li .inner{margin:5px auto;height:auto}

#feedContainer li{float:none;display:block;width:auto;height:auto}

#feed-container li .news-text, #feedContainer:after,#feed-container li img{display:none}

}

Langkah Kedua

Ganti URL sitemap untuk mode tampilan dekstop Template blog Anda menggunakan URL dari cdn.ragwit. (Tanpa HTTPS)

Sampai disini pembuatan dan penerapan peta situs untuk mode dekstop sudah selesai.

Membuat dan Menerapkan Sitemap Versi Mobile Untuk Blog AMP


Seperti yang sudah diutarakan diatas, pembuatan Sitemap di Blog AMp terbagi menjadi dua kategori yaitu versi PC dan Mobile....

Menyikapi perihal penjelsan diatas, maka dibawah ini Admin Akan membagikan tata Cara Pembuatan Sitemap Versi Mobile

Totorialnya hampir sama persis seperti panduan diatas, namun ada sedikit perbedaan dari URL sitemap yang akan di buat Anda

Jika link Sitemap Versi Dekstop Anda seperti ini httpL//www.omboolom.net/p/sitemap.html maka untu membuat sitemap tampilan Mobile Anda harus menambahkan ?m=1 agar bekerja seperti halnya tampilan Seluler, maka tampilannya seperti ini http//www.omboolom.net/p/sitemap.html?m=1

Untuk langkah langkah selanjutnya sama seperti diatas , begitu juga penerapannya.

Nah itulah cara membuat sitemap di blog Amp yang mungkin selama ini Anda cari.

Sudah mengerti?

Langsung kerjakan sekarang!

Happy Blogging...

Source Kode : Kompi Ajaib

Reactions:
Share this with short URL:

You Might Also Like:

Newest Post
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Newest Post