Cara Membuat Sitemap atau Daftar Isi SEO Friendly Pada Blog

Daftar isi blog atau sering juga disebut sitemap merupakan salah satu komponen yang sangat penting keberadaannya pada blog. Sitemap merupakan suatu media yang memberikan informasi secara garis besar kepada para pengunjung blog tentang isi blog yang anda kelola.

Dalam postingan kali ini saya akan memberikan tutorial singkat tentang cara membuat sitemap yang fast loading, responsive dan tentu saja SEO friendly. Sebenarnya sitemap default bawaan dari blogger sudah tersedia namun sitemap tersebut kurang menarik dan terlihat biasa biasa saja.

Adapun sitemap atau daftar isi yang saya bagikan tutorialnya ini merupakan sitemap otomatis yang menampilkan judul postingan yang sesuai dengan label yang anda buat pada blog. Artikel-artikel atau postingan postingan terbaru pada blog pun akan terindex secara otomatis jadi tidak perlu ribet memasukan satu persatu lagi pada sitemap.

Contoh sitemap atau daftar isi yang saya bagikan pada artikel kali ini

Tertarik??...silahkan langsung saja ikuti langkah langkahnya, pertama silahkan log in ke akun blogger anda dan seterusnya pilih "Laman" kemudian klik pada "laman baru"

Langkah berikutnya, 1. isi pada kolom judul laman dengan "sitemap" atau "daftar isi" terserah anda enaknya apa... 2. kemudian pilih atau klik kolom HTML lalu 3. copy paste kode berikut ini 

#show-cat{float:left;margin-right:20px;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px}
#show-cat ul{margin:0;border-top:1px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px}
#show-cat ul li a,#navi-cat a{background:#fff;color:#d80556;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:15px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:left;width:60%}
#show-post ul li{list-style-type:none;padding-bottom:15px}
#navi-cat{padding:20px 0}
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px}
#navi-cat span{float:right}
</style>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://jadulation.blogspot.co.id/';cat_numb=11;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>

dan langkah ke empatnya setelah copy paste kode diatas klik publikasikan maka selesai sitemap atau daftar isi blog anda sudah jadi dan silahkan lihat hasilnya...

Untuk lebih jelasnya silahkan lihat pict berikut ini...

catatan : ganti http://jadulation.blogspot.co.id/ dengan url blog anda dan setelah anda copy paste kode script diatas jangan klik kolom compose (disebelah kolom HTML tadi) karena bisa jadi sitemap yang anda buat tadi tidak akan muncul atau hanya ada halaman kosong.

Nah begitulah langkah langkah membuat Daftar Isi atau Sitemap yang fast loading, responsive dan SEO friendly dari saya semoga membantu dan bermanfaat untuk ada...wassalam... 

Read more »

Tutorial Cara Mendaftarkan Blog Ke DMCA Protection

Tutorial Cara Mendaftarkan Blog Ke DMCA Protection. DMCA merupakan kepanjangan dari Digital Millenium Copyright Act yang artinya perlindungan hak cipta dari sebuah website atau blog. Singkatnya tujuan mendaftar DMCA untuk melindungi artikel-artikel blog kita di curi atau di copy paste/copas oleh orang lain karena dengan telah mendaftar DMCA secara langsung kita telah memiliki hak cipta atas artikel yang telah dipublikasikan di blog yang kita kelola (baca juga Cara Pasang Anti Copy Paste di Blog).

Tanpa panjang lebar lagi berikut langkah-langkah untuk mendaftarkan blog ke DMCA protection :

• Masuk ke situs DMCA http://dmca.com/
• kemudian isi form Register your Protection Badge dan setelahnya klik submit

• setelah itu buka email yang didaftarkan tadi karena DMCA akan mengirimkan email yang berisi data untuk log in ke situs DMCA tersebut. Cek inbox email dan klik url log in yang diberikan disana (contohnya seperti dibawah)

• lalu anda akan dibawa ke halaman log in dan silahkan log in dengan username dan password yang diberikan pada email tadi
• setelah log in, maka pada kolom Current Protected Pages akan terlihat disitu belum adanya website atau blog yang telah diproteksi oleh DMCA. Maka klik Add Badges to Your Site untuk memasukan website atau blog yang akan diproteksi.

• kemudian pilih badge yang diinginkan lalu pasang di HTML blog atau website anda, misalnya dipasang di widget.
• selesai

Itulah tutorial singkat cara mendaftarkan blog ke DMCA protection semoga dengan didaftarkannya blog ke DMCA protection bisa meminimalisir orang iseng yang suka mencuri artikel blog. Good luck dan semoga bermanfaat.

Read more »

Memperbaiki Missing Error Structured Data Pada Blog

Untuk mengetahui adanya missing error pada struktur data blog anda, silahkan anda cek pada halaman Structured Data Testing Tool yang telah disediakan oleh google pada link berikut https://developers.google.com/structured-data/testing-tool/ setelah masuk ke halaman tadi kemudian klik ambil url dan masukan url blog anda ke kolom yang ada dan klik ambil & validasi setelah itu akan muncul hasil dari tes yang dilakukan tadi.

Pada kolom sebelah kanan hasil tes tersebut akan terlihat beberapa missing error yang terjadi pada struktur data blog anda misalnya missing error pada Author, Name, Published, DatePublished, MainEntityOfPage dan ImageDateModifie. Beberapa blogger berpendapat tentang error-error pada struktur data blog tersebut dapat diabaikan alias tidak berpengaruh pada SEO, tetapi alangkah baiknya apabila error-error tersebut bisa kita perbaiki meskipun itu katanya tidak terlalu penting untuk SEO.

Untuk memperbaiki missing error yang terjadi pada struktur data blog tersebut silahkan ikuti langkah-langkahnya dibawah ini :

catatan : dalam memperbaiki missing tersebut lakukan langkah-langkahnya secara berurutan dan apabila ada missing error yang sudah fix dapat berlanjut pada langkah selanjutnya dan jangan lupa untuk selalu cek di structured data testing tool untuk mengetahui missing error tersebut telah diperbaiki atau tidak.

seperti biasa log in ke akun blogger dan klik template kemudian klik edit HTML

• Memperbaiki Missing Error Pada Image di Homepage

Cari kode itemprop='image' kemudian hapus kode tersebut (biasanya terdapat dua buah kode tersebut)

• Memperbaiki Missing Error pada Image, Publisher dan MainEntityOfPage Pada Halaman Posting dan Homepage

Cari kode berikut ini

<article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

lalu copy kode dibawah ini kemudian pastekan dibawah kode tadi

<div itemType='https://schema.org/WebPage' itemprop='mainEntityOfPage' itemscope='itemscope'/>
<b:if cond='data:post.firstImageUrl'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
  <meta expr:content='data:post.firstImageUrl' itemprop='url'/>
  <meta content='600' itemprop='width'/>
  <meta content='300' itemprop='height'/>
  </div>
    </b:if>
  <div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
    <div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
      <meta content='URL LOGO BLOG ANDA' itemprop='url'/>
      <meta content='300' itemprop='width'/>
      <meta content='300' itemprop='height'/>
    </div>
    <meta expr:content='data:blog.title' itemprop='name'/>
  </div>

ganti tulisan berwarna merah dengan url blog anda

• Memperbaiki Missing Error DateModified Pada Halaman Posting dan Homepage

Temukan kode seperti dibawah ini

<a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>

dan tambahkan kode berikut yang ditandai dengan warna merah

<span itemprop='dateModified'><a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a></span>

• Memperbaiki Missing Error Author dan Name pada Halaman Posting dan Homepage

Hapus dan ganti kode Author (Person) pada HTML template blog anda dengan kode dibawah ini

<span class='author' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><a expr:href='data:post.authorProfileUrl' itemprop='url' rel='publisher' title='author profile'>
<span class='post-author vcard'><span class='fn' itemprop='name'><data:post.author/></span>
</span></a></span>

• Memperbaiki Struktur Data Blog yang Dobel

Cari kode berikut ini jika terdapat pada template blog anda kemudian hapus

<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>

Demikianlah langkah-langkah untuk memperbaiki missing error pada struktur data blog, semoga membantu dan good luck.

sumber : bungfranki.com

Read more »

Cara Memperbaiki Thumbnail Artikel yang Tidak Muncul Ketika Share ke Facebook

Cara memperbaiki thumbnail artikel atau postingan blog yang tidak muncul ketika artikel di share ke facebook. Ketika kita selesai membuat suatu artikel dan mempublikasikannya di blog tentu saja artikel yang kita tulis tersebut ingin dibaca oleh semua orang. Untuk bisa menarik pembaca atau pengunjung datang ke blog yang kita kelola salah satunya dengan cara membagikannya ke media sosial.

Facebook merupakan lahan yang besar untuk menarik pengunjung untuk datang ke blog kita. Ketika kita share artikel ke facebook kadang kalanya thumbnail atau gambar kecil dari artike tersebut tidak ikut muncul. Hal tersebut terjadi karena mesin telusur facebook gagal mengambil data-data dari halaman blog yang kita share, dan apabila muncul pun thumbnailnya bukan merupakan gambar yang kita sisipkan pada artikel blog tersebut.

Untuk memperbaikinya bisa dilakukan dengan cara sebagai berikut :

• log in ke akun blogger seperti biasa
• klik template dan edit HTML 
• kemudian cari kode <head>
• copy kode dibawah ini dan pastekan di bawah kode <head> tadi

<!-- [ Social Media meta tag ] -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='ISI DESKRIPSI ALTERNATIF DISINI' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='KODE-APLIKASI' property='fb:app_id'/>
<meta content='KODE-ADMIN' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>

• setelah itu cari kode <body> 
• copy kode dibawah ini dan pastekan dibawah kode <body> tadi

<div id='fb-root'/>

<script>

window.fbAsyncInit = function() {

FB.init({

appId : 'KODE-APLIKASI',

status : true, // check login status

cookie : true, // enable cookies to allow the server to access the session

xfbml : true // parse XFBML

});

};

(function() {

var e = document.createElement('script');

e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';

e.async = true;

document.getElementById('fb-root').appendChild(e);

}());

</script>

• klik simpan/save template

catatan

1. ganti ISI DESKRIPSI ALTERNATIF DISINI dengan deskripsi sesuai keinginan (deskripsi alternatif akan muncul apabila artikel tidak diberikan deskripsi)
2. KODE-APLIKASI ganti dengan kode aplikasi facebook anda
3. KODE-ADMIN ganti dengan kode fans page atau kode profil facebook anda

Tambahan Tips

• gambar yang disisipkan atau diupload pada artikel dimensinya tidak kurang dari 600x315 pixel

Setelah semua langkah-langkah tadi diterapkan, silahkan cek link artikel di link dibawah dengan catatan kode aplikasi dan kode admin sudah diisikan di blog

cek di link ---> https://developers.facebook.com/tools/debug/ 

Masukan link url artikel yang akan di share pada kolom yang ada dan klik debug kemudian klik fetch new scrape information maka secara otomatis data-data dari blog anda akan tersimpan pada sistem penelusuran facebook dan masalah thumbnail pun teratasi.

Nah itulah cara memperbaiki thumbnail artikel yang tidak muncul saat dishare ke facebook, semoga bermanfaat dan good luck.

sumber : arlinadzgn 

Read more »

Tutorial Cara Membuat Widget Recent Post Berdasarkan Label

Tutorial cara membuat, memasang dan menampilkan Recent Post atau Latest Post atau juga Posting Terbaru yang berdasarkan label atau kategori. Widget recent post ini tanpa menggunakan javascript dalam pemasangannya dan contohnya bisa dilihat ada pada bagian footer blog ini.

Recent post bisa dibilang penting fungsinya pada sebuah blog. Dengan adanya widget recent post pada blog dapat memudahkan pengunjung untuk melihat lihat artikel-artikel terbaru apa saja yang dipublikasikan pada blog. 

Oke langsung saja cara pemasangan widget recent post bisa dilakukan sebagai berikut :

• seperti biasa log in dulu ke akun blogger
• pada dashboard klik tata letak kemudian klik tambahkan gadget (bisa di sidebar atau footer untuk penempatannya)
• scroll ke bawah dan klik feed
• copy link di bawah dan paste kan pada kolom url feed

http://www.URL_BLOG_ANDA.com/feeds/posts/default/-/Ganteng

• klik lanjutkan
• atur tampilan sesuai keinginan
• klik simpan dan lihat hasilnya

keterangan

1. ganti http://www.URL_BLOG_ANDA.com dengan url blog
2. ganti Ganteng dengan nama label atau kategori yang ingin ditampilkan
3. apabila nama label terdiri dari dua kata, misal nama label Ganteng Banget sisipkan kode %20 diantara kedua kata tersebut. contoh penulisannya jadi Ganteng%20Banget
4. satu lagi yang tidak kalah penting penulisan huruf besar/kecil dari nama label tersebut sangat berpengaruh

Nah cukup mudah kan cara membuat widget recent post berdasarkan per label atau per kategori, good luck dan semoga bermanfaat.

Read more »