Sebenarnya langkah membuat template blogger menjadi seo friendly ini lebih pasnya akan mengarah pada cara mengedit template standar atau default bawaan blogger yang sudah ada. Hanya saja menurut beberapa webmaster template yang telah disediakan tersebut kurang seo friendly dan kita akan mencoba membuatnya menjadi sebuah template yang seo friendly. Dengan template yang seo friendly maka ada kemungkinan nantinya anda bisa menjadi juara di serp google. Are you ready? yuk mari kita mulai.
Langkah membuat template blogger menjadi seo friendly
1. Memasang meta tag. Apa itu meta tag? Meta tag adalah elemen dari sebuah template yang dibentuk dalam sebuah bahasa pemograman seperti html atau xhtml yang dipakai untuk mengaplikasikan data dalam sebuah halaman web. Biasanya meta tag ini diletakkan dalam "head" yang fungsinya dapat pula sebagai sebuah deskripsi atau keterangan dari suatu blog atau web. Secara Umum Meta Tag Itu ada 4, yaitu Meta Tag Title, Deskripsi, Keyword, dan Robots, namun tidak menutup kemungkinan masih banyak meta tag yang lain terdapat pada sebuah Blog ataupun Website. Tujuan pemberian meta tag ini adalah untuk membantu meningkatkan peringkat mesin pencari dan meningkatkan lalu lintas ke halaman tersebut.
Untuk menjadikan template blogspot atau blogger anda menjadi seo friendly sebaiknya anda segera pasang meta tag di blog yang anda miliki. Berikut ini adalah meta tag yang sering dipakai oleh webmaster untuk menjadi juara di search engine :
a. Cari kode <title><data:blog.pageTitle/></title>
b. Ganti dengan kode berikut ini
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
c. Simpan template anda.
2. Memasang breadcrumb. Banyak para webmaster merekomendasikan untuk menjadikan template blogspot menjadi seo friendly untuk selalu memasang breadcrumb ini. Cara untuk memasang breadcrumb adalah sebagai berikut :
a. Cari kode ]]></b:skin (gunakan Ctrl+F untuk mempermudah pencarian)
b. Jika sudah menemukan kode tadi letakan kode dibawah ini diatas ]]></b:skin.
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}
c. Setelah selesai cari kode seperti dibawah:
<b:includable id='main' var='top'>
Ganti kode diatas dengan kode dibawah:
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
d. Simpan template anda.
3. Memasang Related Post. Selain sebagai fungsi seo, memasang related post ini adalah agar pengunjung dapat lebih mudah menemukan artikel yang sejenis atau memiliki tema yang sama dengan tulisan anda yang mereka baca saat ini. Cara untuk memasang related post ini juga sangat mudah dan berikut caranya :
a. Temukan kode ]]></b:skin> dan letakan kode dibawah tepat di atasnya.
.related-post .post-thumbnail {
z-index: 1;
position: relative;
width: 98px;
height: 98px;
margin: 0;
display: block;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 5px #444;
-moz-box-shadow: inset 2px 2px 5px #444;
box-shadow: inset 2px 2px 5px #555;
}
.related-post {
float: left;
position: relative;
width: 98px;
height: 98px;
margin: 0 10px 10px 0;
background: #F6F6F6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.related-post .related-post-title {
display: none;
float: left;
background: #000;
color: #fff;
text-shadow: none;
font-weight: bold;
padding: 10px;
position: absolute;
top: -20px;
left: 40px;
z-index: 2;
width: 200px;
-webkit-box-shadow: 0 0 2px #444;
-moz-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
}
.related-post:hover .related-post-title {display: block;}
b. Selanjutnya cari kode <div class='post-footer'>
c. Letakkan kode berikut di bawahnya
<div id='related-posts'>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3> No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigQwDuSLRnrCpVYbgyinUtDmyh_z9tCZhLaxJXVHs3mk0AEq7ZqPRLtQlkB6FcJHs8e6sl9LcaojAfhWY-lnFmEfEqyvpBYIllON9ZNXNhbrrQp8T9pi0CDKU2XhKyA0Ctzjw9CV3lXMXN/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>varmaxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</b:if>
</div>
<div class='clear'/>
d. Simpan template anda.
Demikian cara membuat template blogger menjadi seo friendly ini semoga tulisan ini bisa berguna dan dapat membantu anda dalam membuat sebuah template blogger yang seo friendly.
No comments:
Post a Comment