mas template

Bagaimana Agar Template Anda SEO Friendly?

maskolis SEO
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
  1. Pertama yang mesti anda lakukan tentu login dulu di Blogger 
  2. Kemudian klik Rancangan >> edit HTML
  3. Jangan lupa Centang Expand Template Widget
  4. 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 != &quot;item&quot;'>
<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 != &quot;item&quot;'>
<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>
Cari kode berikut ini
<h1  class='title'>
<b:include name='title'/>
</h1>
Ganti dengan kode berikut ini
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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 {
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;
}
Catatan: Kalau tidak berhasil, ganti hanya kode H3 nya..

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 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
Kemudian Save/Simpan template anda, selesai....

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.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

71 comments:

  1. Hello my friend, happy Wednesday with happiness and peace. KALHMERA. Follow me too. http://fotisbazakas.blogspot.com

    ReplyDelete
  2. terbaik mas..aku suka postingannya yang ini..

    ReplyDelete
  3. terima kasih infonya.
    nak cubalh.

    ReplyDelete
  4. kok di blog ane yang terakhir untuk ganti kode Set CSS tidak ada, trus gmn dunk ??

    ReplyDelete
  5. ajiibbb blog yang sangat buaaguss mass..

    ReplyDelete
  6. @Seputar Internet:
    Edit sendiri mas, kalo mau silahkan download disini

    ReplyDelete
  7. Ni Tutorials Yang Paleng mantap ane jumpa.. Nice sharing Gan,, Sukses trus.. Salam Deradja

    ReplyDelete
  8. @shidik:
    Tetep juga akan ke indeks google tetapi gambarnya dulu baru artikelnya

    ReplyDelete
  9. kalo sudah mohon kirim ke gmail saya thomijasir@gmail.com
    mohon kk infoya

    ReplyDelete
  10. hmmm...
    Memanipulasi 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/

    ReplyDelete
  11. @Beben Koben:
    Nah 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..

    ReplyDelete
  12. 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
  13. @aa Solah:
    Ini 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/

    ReplyDelete
    Replies
    1. kalo donload template yg otomatis udah ful Seo dmn ya, nama templatenya apa, minta REFERENSInya dong mas !!!

      Delete
  14. Mas saya mau coba Trik ini ,, tapi kode yang ini ada dua,, saya harus ganti yang mana? pertama ato ke dua?

    ReplyDelete
  15. @aa Solah:
    Ganti 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

    ReplyDelete
  16. 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..

    Aduhh..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)

    ReplyDelete
  17. @aa Solah:
    Ya 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

    ReplyDelete
  18. Lapor Mas,, cara pertama Manipulasi Tag Heading Judul Postingan saya praktekan alhamdulilah berhasil , tapi font nya jadi berubah yaa.
    Namun 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..

    ReplyDelete
  19. @aa Solah:
    Untuk 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

    ReplyDelete
  20. Pusing mas ... kode Css nya ngk ada yang pas malah judul postingan jadi besar semua ??? bisa kasih tutor nya kalo bisa aaa
    hehehee

    ReplyDelete
  21. Thanks ilmunya, sudah saya praktekin :D

    ReplyDelete
  22. setelah mengikuti tahap2 diatas, tempalte saya jadi agak amburadul... :)

    ReplyDelete
  23. maaf tanya lagi coach, untuk ng-edit h1 yg ada di tab category di template Johny Ember gimana ya??

    itu 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..

    ReplyDelete
  24. 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 !

    ReplyDelete
  25. Saya 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...?
    Terus 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

    ReplyDelete
  26. wah dah serius baca..
    lah...?????
    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

    ReplyDelete
  27. Makasih Mas Kolis atas postingan ini, bisa dijadikan acuan untuk lebih baik dalam mengoptimasi blog, semoga terjalin persaudaraan selamanya ya mas, amin..

    ReplyDelete
  28. mas, kode trakhir ( #header h1 {
    ............................
    } yang seperti ini tidak di temukan pada hmtl template yang saya gunakan mas, apakah tidak ada pengaruhnya mas.??

    ReplyDelete
  29. Wow....Udah Ane Praktekin Bro......Moga Aja template Ane Seo Yahh :D

    ReplyDelete
  30. mas yang kode css judul postingan sama judul blog kok gak ada ya di html saya pakai? Saya pakai Johny wusss

    ReplyDelete
  31. numpang tanya mas klw template seo-versi-5, dari bamz template,link
    http://www.blogbamz.com/2012/08/b-seo-versi-5.html
    apakah sudah seo freindly lum, mhn bantuan pencerahannya

    ReplyDelete
  32. efek perbedaannya sama yg default gmn tuh gan???

    mohon penjelasannya.. maklum saya masih nubi.. ^^





    warung-kabar.blogspot.com

    ReplyDelete
  33. Maskolis, mau tanya CSS :
    .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/

    ReplyDelete
  34. mas, apakah ini hannya belaku untuk template standart? soalnya template sy yg dr mas kolis code yg di cari tidak tersedia.. makasih

    ReplyDelete
  35. mas kode-kode di atas gak ada di template saya? nah sekarang mau ganti gimana?

    ReplyDelete
  36. langsung saya pake mas..
    blog sy semuanya jadi ala maskolis
    template maskolis, engine nya juga maskolis ,, check -> keruaknesia.blogspot.com
    thanks mas..

    ReplyDelete
  37. sya sudah saya ikutin mas mudah mudahan berhasil hehe terimakasih mas

    ReplyDelete
  38. Mas 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/
    mohon bantuannya dan terima kasih atas infonya

    ReplyDelete
  39. Sepertinya tidak semua template sesuai dengan cara oprekannya mas kolis ya mas.. BTW terimakasih juga sudah berbagi ya mas...

    ReplyDelete
  40. tanks mas , ilmunya segera saya praktekan

    ReplyDelete
  41. mas kalu untuk template pakhdejohny gimana cara editnya..
    tolong kirim ke email ku

    dbupblog@hotmail.com

    ReplyDelete
  42. saya coba di template saya gan,kmaren pas cek di webmaster bing ada multiple tag h1,ane bingung edit templatenya.trim sharenya

    ReplyDelete
  43. mas minta tulung donk... saya lumayan pusing dengan template Johny Wusss yang saya pake di www.gudangbotolplastik.com

    1. di google webmastertool banyak tag judul yang menjadi duplikat dengan versi mobile dan itu cukup mengganggu seo nya
    2. saya ingin coba trik di atas cuma kok gak ketemu kode .post h3 { nya gmina donk mas minta tolong dong...

    sebelum google pinguin 2.0 mei kemaren upgrade web ini lumayan mejreng di pejwan tapi setelah upgrade terdampar di halamn belakang stelah saya baca2 ternyata tips yang maskolis tulis diatas sangat bagus sekali tapi sayang saya menemukan masalah di atas...

    saya mohon tolong banget.. yamas

    ReplyDelete
    Replies
    1. oya satu lagi mas cara bikin sitemap yang baik gimana tuh...

      Delete
  44. maskolis, cara menghilangkan slide pada template Jonny wuss gimana ? (pada widget)

    ReplyDelete
  45. benar benar berhasil bang terima kasih ya

    ReplyDelete
  46. Dengan trik yang mas beri, ada perubahan pada judul postingan blog saya. Makasih mas atas triknya

    ReplyDelete
  47. makasih gan bermanfaat.. sekali http://inbox-me.blogspot.com

    ReplyDelete
  48. mas kolis apa ini jga bisa di gunakan di wordpres???
    mas kolis gimana biar theme ini http://www.maskolis.com/2013/03/2-simple-template-blogger-responsive.html bisa saya pakai di wordpress ya sudah saya upload zipnya terus saya extract ga bisa..boleh minta link khusus untuk pakai di wp mas?

    http://www.casino261.com

    ReplyDelete
  49. maskolis emang top deh www.juragancasing.blogspot.com

    ReplyDelete
  50. yang empunya blog ini udah bagun dari tidur panjangnya belum yah?
    apa masih bertapa untuk nambah ilmu lagi.
    hehehehe salam mas kolis
    berkunjung lagi

    Modem Murah | Indo Blog

    ReplyDelete
  51. Sekarang edit templatenya susah di sesuaikanmga kaya dulu..

    ReplyDelete
  52. wahh artikel menarik gan bisa buat nambah ilmu nih biar gak terbuang waktunya OL...,maklum masih newbie,,..ditunggu trik atau artikel lain yang bisa diterapkan..,:)

    ReplyDelete
  53. ko kodenya banyak yang beda ya mas di pencarian saya malah ada beberapa kode yang ga ada,,, mohon pencerahan

    ReplyDelete
  54. thanks gan informasinya , walaupun awanya agk pusing tapi alhamdulilah berkat panduan maskolis dapat terselesaikan juga

    terimaksih
    Dan
    Salam kenal
    Musaanimers

    ReplyDelete
  55. Wah infonya sangat bermanfaat sekali gan. izin nyimak ya gan dan jangan lupa update terus artikelnya. Oh iya sob, kapan-kapan saya akan mampir lagi jika ada waktu luang. hehehehehe. jangan lupa di update terus ya blognya. salam kenal.
    Teknik Menyisipkan Kata Kunci di H1,H2
    Thanks.

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger