Selamat siang temen-temen blogger semua, bagaimana kabar anda? Semoga baik-baik aja, kali ini saya akan berbagi lagi dengan anda semua. Topik yang saya bahas adalah bagaimana agar template yang kita pakai SEO friendly. Terkadang kita memilih template dari penyedia situs template gratisan di internet hanya sekedar memenuhi selera keindahan, tapi kita lupa apakah template yang kita pakai sudah SEO friendly atau belum. Pada tutorial kali akan dibahas cara memanipulasi template blogger agar SEO friendly, khususnya dengan memberi tag h1 untuk judul postingan. Namun, jika Anda melakukannya secara sembarangan bisa jadi malah justru terjadi multiple tag h1 pada halaman Anda.
Seperti kita ketahui semua, banyak template blog yang bagus secara design diluar sana, kebanyakan dari template tersebut mementingkan masalah design. Kita yang akan memakainya perlu sedikit memodifikasi agar optimal. Baiklah, langsung saja saya akan berikan kepada temen-temen semua langkah-langkah dalam mengoptimalkan template yang kita pakai agar lebih SEO friendly
- Pertama yang mesti anda lakukan tentu login dulu di Blogger
- Kemudian klik Rancangan >> edit HTML
- Jangan lupa Centang Expand Template Widget
- Klik Download template lengkap untuk jaga-jaga.
Manipulasi Tag Heading Judul Postingan
Cari kode berikut ini..
<b:if cond='data:post.title'> <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'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if>Setelah ketemu Ganti semua kode di atas dengan kode dibawah ini.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 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'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 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'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
Manipulasi Tag Heading Judul Blog
Cari lagi kode di bawah ini
<h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1>Selanjutnya Ganti dengan kode berikut ini
<b:if cond='data:blog.pageType != "item"'>Cari kode berikut ini
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>
<h1 class='title'> <b:include name='title'/> </h1>Ganti dengan kode berikut ini
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title'>
<b:include name='title'/>
</p>
</b:if>
Terakhir, Set CSS Anda
Cari kode css judul postingan dan judul blog Anda. Misal kodenya seperti ini. Cari yang mirip.
.post h3 {
..................................
}
.post h3 a, .post h3 a:visited{
..................................................
}
.post h3 a:hover {
....................................
}Ganti kodenya dengan kode di bawah ini.post h1, .post h2 {Catatan: Kalau tidak berhasil, ganti hanya kode H3 nya..
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a, .post h2 a:visited, .post h2 strong{display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h1 strong, .post h1 a:hover, .post h2 strong, .post h2 a:hover {
color:$textcolor;
}
Langkah terakhir, cari lagi kode css judul blog. Cari yang mirip dengan kode di bawah ini
#header h1 {
............................
}Setelah itu Ganti dengan kode di bawah ini#header h1, #header p {Kemudian Save/Simpan template anda, selesai....
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
Ikuti semua langkah-langkah diatas, jika semuanya sudah anda lakukan dengan benar maka sekarang di halaman index Anda, halaman utama blog, judul blog memiki tag h1 dan judul postingan bukan tag h1. Sementara ketika google index halaman postingan Anda, judul postingan otomatis berubah ke tag h1 dan judul blog tidak lagi menggunakan tag h1. Hasilnya, tidak ada lagi tag h1 ganda yang akan menimbulkan kekhawatiran untuk peringkat Anda. Oya.. ada yang lupa, jika ada diantara temen-temen yang belum mengetahui menfaat SEO bagi kelangsungan blog, saya pernah membahasnya pada tips dasar-dasar SEO. Demikian tadi tutorial step by step untuk mengedit template blogger agar SEO Friendly ini adalah hanya salah satu cara untuk meningkatkan SERP, selamat mencoba dan semoga bermanfaat.



Hello my friend, happy Wednesday with happiness and peace. KALHMERA. Follow me too. http://fotisbazakas.blogspot.com
ReplyDeleteterbaik mas..aku suka postingannya yang ini..
ReplyDeleteterima kasih infonya.
ReplyDeletenak cubalh.
hey nice info ni :D
ReplyDeleteThank's
ReplyDeletekok di blog ane yang terakhir untuk ganti kode Set CSS tidak ada, trus gmn dunk ??
ReplyDeleteajiibbb blog yang sangat buaaguss mass..
ReplyDelete@Seputar Internet:
ReplyDeleteEdit sendiri mas, kalo mau silahkan download disini
thnks post full.hjhj.
ReplyDeletekren
ReplyDeleteNi Tutorials Yang Paleng mantap ane jumpa.. Nice sharing Gan,, Sukses trus.. Salam Deradja
ReplyDelete@shidik:
ReplyDeleteTetep juga akan ke indeks google tetapi gambarnya dulu baru artikelnya
@maskolis: Oke sekali lgi trms ats infonya...
ReplyDeletekalo sudah mohon kirim ke gmail saya thomijasir@gmail.com
ReplyDeletemohon kk infoya
hmmm...
ReplyDeleteMemanipulasi menggunakan kode bawaan blogger nih!
Lepikiran sampe sini juga ternyata master satu ini.
Walo ribet tp satu langkah yg full stylish dalam memanipulasi pakek kode blogger. Tanpa harus mengganti tagging H2/H3 bisa jadi H1..ck ck ck.
Hasil yg sama dengan mengganti tagging H2/H3 yg ada di blog secara manual.
Kasian kalo yg tidak paham dengan metode ini nih...xixixi
Salut yg punya blog nih. MASTER euy \m/
@Beben Koben:
ReplyDeleteNah komentar seperti ini yang saya tunggu dari kang beben, masa cuma maknyus sama mantap doank sih.. hehehe
Sebenernya metode ini sudah lama digunakan oleh blogger dengan memanipulasi kode CSS yang sederhana, saya dapat ilmu ini dari blog juragan dan template frameworknya master Choen
Makasih kang Beben apresiasinya..
Udah banyak artikel SEO yang saya baca mas ,, tapi saya dari dulu tetep bingung dengan H1 H2 dan H3 ,, sebenarnya itu apa mas?? hehehe bisa dikit di jelasin.. :d
ReplyDelete@aa Solah:
ReplyDeleteIni menurut Joost de Valk alias Yoast salah seorang webmaster dan designer template yang sudah terkenal, yang pertama kali di index oleh Search Engine adalah tag h1, kemudian korelasi keyword-nya pada tag h2 dan h3 (optional), oleh karena itu menurutnya struktur heading yang bagus pada homepage adalah :
H1: Judul Blog
H2: Artikel terbaru atau tulisan apapun yang berisi keyword untuk blog kita
H3: Artikel terbaru, atau, jika sudah ditempatkan pada H2, bisa digunakan untuk posting lama tertentu misalnya artikel populer.
H4: related content sidebar
H5: sidebar, footer, dll
Untuk struktur heading yang bagus halaman posting (single post) adalah :
H1: Judul Artikel
H2's dan H3's: subheading terkait
H4: Judul Blog, dan widget terkait
H5: sama seperti di atas, sidebars dll.
Itu terjemahan dari sini http://yoast.com/blog-headings-structure/
kalo donload template yg otomatis udah ful Seo dmn ya, nama templatenya apa, minta REFERENSInya dong mas !!!
DeleteMas saya mau coba Trik ini ,, tapi kode yang ini ada dua,, saya harus ganti yang mana? pertama ato ke dua?
ReplyDelete@aa Solah:
ReplyDeleteGanti semua coba mas, tapi jgn lupa di backup dulu templatenya. Sebenernya trik ini hanya untuk template tipe dua kolom, untuk tipe magazine tag h1 kalo dirubah tulisannya akan membesar seperti pada single post, tapi bisa diatasi dengan merubah post h3 yg ada di bawah skin menjadi post h1
Owh begitu toh , sekarang saya jadi sedikit tau tentang H1 H2 H3 ,, jadi sususan heading yang bagus itu seperti itu , hmm...jadi Template yang dibagikan secara gratis susunan heading nya tdk seperti itu ya mas..
ReplyDeleteAduhh..saya udah coba trik di atas di Blog saya tapi gagal terus , katanya tidak well-formed.. barangkali mas mau bantu saya benerin headingnya.. hehehe (ngarep)
@aa Solah:
ReplyDeleteYa semua template gratis yang dibagikan oleh pembuatnya semuanya masih standart dan belum memenuhi semua kriteria SEO. Kalo ada yg menambahkan embel2 SEO friendly di belakang nama template mereka karena mungkin dia melihat dari segi kecepatan loading, validasi HTML, minimnya pemasangan gambar pada edit HTML dan penambahan meta tag dan meta deskripsi yg itu juga masih harus dirubah oleh penggunanya. Makanya dri dulu saya nggak berani bilang template yg pernah saya buat termasuk kategori SEO friendly
Merubahnya satu persatu mas, jangan langsung dirubah semua, langkah pertama lakukan setelah itu save dulu lihat hasilnya demikian juga seterusnya
Lapor Mas,, cara pertama Manipulasi Tag Heading Judul Postingan saya praktekan alhamdulilah berhasil , tapi font nya jadi berubah yaa.
ReplyDeleteNamun pas cara ke-2 Manipulasi Tag Heading Judul Blog udah di coba dua kali kok gagal terus.. kira-kira apa yang salahnya? atau cara merubah Heading ini gak cocok dengan struktur template blog saya.
oia mas, ciri Blog yang sudah di manipulasi teg Headingnya judul postingannya jadi bisa di klik ya mas..
@aa Solah:
ReplyDeleteUntuk manipulasi heading langkah diatas adalah alternatif, bisa langsung untuk h3 diganti h1 pada kode itu.
Iya biasanya gitu, judul di single post mengarah ke link itu berarti tag headingnya udah memakai h1
Pusing mas ... kode Css nya ngk ada yang pas malah judul postingan jadi besar semua ??? bisa kasih tutor nya kalo bisa aaa
ReplyDeletehehehee
Thanks ilmunya, sudah saya praktekin :D
ReplyDeletesetelah mengikuti tahap2 diatas, tempalte saya jadi agak amburadul... :)
ReplyDeletepusing gan :(
ReplyDeletemaaf tanya lagi coach, untuk ng-edit h1 yg ada di tab category di template Johny Ember gimana ya??
ReplyDeleteitu tab2 template yg di bawah display post (ada 5 itu), title.nya kena h1 semua.. minta tolong cara untuk ganti ke h2 ato h3 ya.. thanks..
Alhamdulillaaah....1 kali pasang, berhasilll...terima kasih Maskolis manfaat sekali (sy menggunakan template karya Mas-->Johny Kentir) sampai sekarang blm kelar2 renovasinya dan pagerank-nya anjlog !
ReplyDeleteSaya sudah coba terapkan dan mudah-mudahan berhasil (mudah2an ga ada yang salah...) Dan kode h2 yang berhubungan dengan "date-header" saya ganti dengan h3. Betul apa salah mas...?
ReplyDeleteTerus kode css h2 yang di atas "h2 .date-header" (sekarang jadi "h3 .date-header") saya ganti dengan h3 juga...apa itu betul juga...?
Saya pakai Johny Papers Magazine
nice gan caranya beda" hehehe
ReplyDeletewah dah serius baca..
ReplyDeletelah...?????
bersambung ternyata.
ditunggu lanjutannya ah...
makasih maskolis themes nya sampe sekarang pake itu aja.
males ganti² lagi walau di "iming²i" maskolis dg themes yg bagus².
salam mas, nek ke jogja mampir kesini loh mas
Siomponk Network
siomponk.com
Makasih Mas Kolis atas postingan ini, bisa dijadikan acuan untuk lebih baik dalam mengoptimasi blog, semoga terjalin persaudaraan selamanya ya mas, amin..
ReplyDeletemas, kode trakhir ( #header h1 {
ReplyDelete............................
} yang seperti ini tidak di temukan pada hmtl template yang saya gunakan mas, apakah tidak ada pengaruhnya mas.??
Wow....Udah Ane Praktekin Bro......Moga Aja template Ane Seo Yahh :D
ReplyDeletemas yang kode css judul postingan sama judul blog kok gak ada ya di html saya pakai? Saya pakai Johny wusss
ReplyDeletethknks ya atas infonya gan,,,,
ReplyDeletenumpang tanya mas klw template seo-versi-5, dari bamz template,link
ReplyDeletehttp://www.blogbamz.com/2012/08/b-seo-versi-5.html
apakah sudah seo freindly lum, mhn bantuan pencerahannya
efek perbedaannya sama yg default gmn tuh gan???
ReplyDeletemohon penjelasannya.. maklum saya masih nubi.. ^^
warung-kabar.blogspot.com
Maskolis, mau tanya CSS :
ReplyDelete.post h3 {
..................................
}
.post h3 a, .post h3 a:visited{
..................................................
}
.post h3 a:hover {
....................................
}
s
aya cari2 gak ada ya di template saya, jadi saya skip ke CSS selanjutnya. Terus saya save deh.
Mohon bantuannya, apa udah bener kalo gak ada, di skip aja ?
@_@
Regards
http://flayerset.blogspot.com/
mas, apakah ini hannya belaku untuk template standart? soalnya template sy yg dr mas kolis code yg di cari tidak tersedia.. makasih
ReplyDeletemas kode-kode di atas gak ada di template saya? nah sekarang mau ganti gimana?
ReplyDeletelangsung saya pake mas..
ReplyDeleteblog sy semuanya jadi ala maskolis
template maskolis, engine nya juga maskolis ,, check -> keruaknesia.blogspot.com
thanks mas..
sya sudah saya ikutin mas mudah mudahan berhasil hehe terimakasih mas
ReplyDeletemakasih infonya mas..
ReplyDeletemakasih atas infonya y gan .
ReplyDeleteMas saya kurang mengerti nih, saya masih newbie, kalau template blog saya sudah SEO friendly belum ? tolong di cek jika mas berkenan ini alamt blog saya http://713devils.blogspot.com/
ReplyDeletemohon bantuannya dan terima kasih atas infonya