Hasil dari menimba ilmu di sana sini, saya tertarik dengan beberapa hal yang bertujuan untuk mengatur bagaimana template blogspot kita agar lebih SEO Friendly. Dimana hal ini penting sekali agar blog kita bisa lebih mudah terindex oleh bung google. Selain itu juga akan membantu untuk meningkatkan traffic.
Beberapa hal yang harus di lakukan perubahan di template blog kita adalah :
1. Mengatur beberapa Tag Heading Blog Menjadi Seo Friendly.
Berikut ini cara mengubah struktur tag heading blogspot menjadi seo friendly
Masuk blogger > rancangan > edit html > centang expand template widget
cari kode berikut ini
<h3 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><b:if cond='data:blog.url != data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if><b:else/><data:post.title/></b:if></b:if></h3>
perhatikan <h3 dan
</h3> ubah menjadi h2 dan </h2>
lanjutkan cari kode di bawah ini
lanjutkan cari kode di bawah ini
<h3 class='mobile-index-title entry-title'>
<data:post.title/>
</h3>
sama seperti di atas ubah h3 menjadi h2kemudian
cari kode di bawah ini
<Group description="Post Title" selector="h3.post-title, h4, h3.post-title a">
ganti menjadi
<Group description="Post Title" selector="h2.post-title, h4, h2.post-title a">
lanjutkan lagi cari kode di bawah ini
h3.post-title, h4 {
font: $(post.title.font);
color: $(post.title.text.color);
}h3.post-title a {
font: $(post.title.font);
color: $(post.title.text.color);
}h3.post-title a:hover {
color: $(link.hover.color);
text-decoration: underline;
}
ubah h3 menjadi
h2
kemudian yang selanjutnya adalah mengubah
tag heading pada widget di blog cari kode di bawah ini
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
ubah h2 menjadi h3, untuk tag heading widget
ini akan ada banyak di template tergantung berapa widget yang anda
pasang di blog, jika ada 5 widget maka kode tersebut juga akan ada 5,
maka carilah kelima tersebut dan ganti tag heading nya menjadi h2.
Selanjutnya tahap terakhir cari kode berikut
Selanjutnya tahap terakhir cari kode berikut
<title><data:blog.pageTitle/></title>
hapus kode tersebut dan ganti
menjadi
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
SAVE TEMPLATE !!! akhirnya selesai
juga, untuk mengecek apakah struktur tag heading blogspot
menjadi seo friendly silahkan klik link berikut http://www.searchengineoptimisation.co.uk/seo-tools/h-tag-and-alt-tag-checker.html
masukan alamat web anda.
2. Pasang META Keyword dan Diskripsi
Berikut langsung saja cara
memasang meta tag keyword dan deskripsi di blogspot :
Masuk blogger > rancangan > edit html > centang expand template widget, cari kode di bawah ini
Masuk blogger > rancangan > edit html > centang expand template widget, cari kode di bawah ini
<title><data:blog.pageTitle/></title>
letakan kode berikut ini di bawah
kode <title><data:blog.pageTitle/></title>
<meta content=' Tulis deskirpsi kamu disini' name='description'/>
<meta content='tulis keyword1 keyword2 keyword3 kamu disini' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>
3. Menambah Kode Canonical Link Element
Canonical Link Element ini berdasarkan informasi yang saya dapat kan fungsi ini adalah untuk mencegah terjadinya duplicate content.
Cara menambahkan kode canonical link element :
Masuk Ke blogger > Rancangan > Edit Html > Expand Widget Template
Tambahkan kode berikut tepat di bawah <head>
<link expr:href='data:blog.url' rel='canonical'/>
4. Pasang Navigasi Breadcrumbs
Fungsi breadcrumb ini tentunya akan membuat template blog menjadi seo friendly dan akan mempermudah search engine dalam menemukan artikel-artikel kita.
Cara membuat navigasi breadcrumb :
Masuk
blogger > rancangan > edit html > centang expand template
widget
cari kode ]]></b:skin>, Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>
cari kode ]]></b:skin>, Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double
#e6e4e3;
}
Kemudian
selanjutnya cari kode <div class='post hentry'>,
letakan kode berikut ini tepat di bawah kode <div class='post
hentry'>
5. Membuat Readmore<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
» <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop></div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
Berikut cara membuat auto readmore
Masuk blogger > rancangan > edit html > centang expand template widget
cari kode </head> kemudian letakkan script di bawah ini tepat di atas kode </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script><script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)(C)2008 by Anhvovisit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Kemudian selanjutnya cari kode <data:post.body/>
setelah ketemu hapus atau ganti kode tersebut menjadi seperti di bawah
ini
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Setelah Itu Save Template
keterangan
Script Cara
Membuat Auto Read More :
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
Script Itu bisa di ubah dan di sesuai kan Sehingga Menjadi Auto Readmore yang kita inginkan.
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
Script Itu bisa di ubah dan di sesuai kan Sehingga Menjadi Auto Readmore yang kita inginkan.
6. Membuat Related Post / Artikel Terkait
Masuk blogger > rancangan > edit html >
centang expand template widget
cari kode </head> kemudian letakkan script di bawah ini tepat di atas kode </head>
cari kode </head> kemudian letakkan script di bawah ini tepat di atas kode </head>
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>
Kemudian cari kode <data:post.body/>
kemudian letakkan script berikut ini di bawah kode <data:post.body/>
7. Mematikan Setting Archive<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if><b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
Menurut para master seo setting archive ini menyebabkan duplicate content, pada widget archive yang di pasang pada halaman blog, setiap isi dari arsip tersebut linknya kira-kira begini http://blablabla.blogspot.com/2011_25_01_archive.html
Cara mematikan fungsi archive di blog :
Masuk k blogger > Pengaturan > Arsipkan
Pada Frekuensi Pilih Arsip Tidak Ada
Sedikit hasil oleh-oleh jalan-jalan di mbah google yang sekiranya bisa membantu blogspot kita menjadi SEO friendly yang tujuan akhirnya apalagi kalo bukan kunjungan. Namun hal tersebut tidaklah cukup kalo kita juga jarang melakukan update artikel.
Semoga bermanfaat.
0 komentar: — Skip to Comment.
Posting Komentar — or Back to Content