July 2, 2014

Cara Modifikasi Template Blog agar Lebih SEO dan User Friendly

July 2, 2014

Modifikasi Template Blog
peerinfotech.com
CARA memodifikasi template blog agar lebih SEO dan user friendly itu gampang dan susah.

Gampang bagi yang sudah mengerti dasar-dasar HTML (karena blogger itu berbasis HTML).

Susah bagi yang belum mengerti, apalagi blogger baru. Lha iya lah.... :)

Modifikasi template perlu dilakukan, karena meskipun sebuah template sudah diklaim SEO friendly, kadang bahkan sering masih perlu ditambah fiturnya. Masih harus ada utak-atik dikit biar lebih "powerful" dan "indah".

Elemen Modifikasi Template Blog

Hal-hal yang biasa CB cek dan lakukan modifikasi atas sebuah template adalah sebagai berikut:
1. Related Posts
2. Social Share
3. Deskripsi Posting untuk Share Facebook
4. Struktur Data
5. Jenis dan Ukuran Huruf (Font)
6. Warna.
7. Meta Tags
8. Loading
9. Heading Tag
10. Valid HTML5

Mari kita bahas satu per satu.
1. Related Posts
Template SEO biasanya sudah ada "Posting Terkait" ini. Ada yang dengan gambar (thumbnail image). Ada juga yang hanya berupa judul. CB lebih suka yang tanpa gambar karena loading blog akan lebih cepat. Lagi pula, jika postingnya gak ada gambar, tampilan Related Post with Thumbnail Image ini akan tampak "jelek" dan menampilkan "No Image".

2. Social Share
Yaitu fasilitas untuk share ke media sosial, terutama Facebook, Twitter, dan Google Plus. Blogger memang sudah menyediakan yang default, tapi umumnya template seo membuat sendiri, misalnya dengan kode dari AddThis atau Share This.

Nah, jika kode social share itu dipasang sang desainer dari AddThis atau Share This, maka Anda harus mencari "Publication ID" (pubid) dan ganti dengan ID milik Anda. Tentu, Anda harus mempunyai akun di AddThis dan/atau Share This.

3. Deskripsi Posting untuk Share Facebook
Tidak semua, bahkan banyak, template blog yang hanya memunculkan judul saat posting di-share ke Facebook. Tidak ada kutipan deskripsi atau alinea pertama postingan. Bahkan kadang yang muncul Meta Deskripsi blog.

Nah, agar muncul deskripsi atau kutipan alinea pertama, maka perlu penambahan kode khusus dan dites di Facebook Debugger.

4. Struktur Data
Tes blog Anda di Google Richsnippets. Jika ada waring/error, maka lakukan modifikasi dengan mengubah "hfeed" menjadi "h-feed" dan "hentry" menjadi "h-entry". Jika masih error, maka lakukan langkah lainnya untuk memperbaiki struktur data yang error.

5. Jenis dan Ukuran Huruf (Font)
Ini tergantung selera, tapi kita harus memperhatikan juga popularitas huruf. Jenis huruf yang "google friendly" dan banyak digunakan antara lain Arial, Verdana, Tahoma, Helvetica, Open Sans, Droid Sans, dan Georgia.

Ukuran huruf sebaiknya antara 13px hingga 14px. Huruf terlalu kecil, apalagi "huruf aneh", akan menyusahkan pembaca sehingga mengurangi nilai "user friendly".

6. Warna.
Terutama warna link (hyperlink, visited link, dan hover link). Warna biru menjadi "warna wajib" untuk link. Hal itu berdasarkan User Experience (UX) yang sudah terbiasa dan memahami kata/kalimat yang berwarna biru dalam sebuah posting adalah sebuah link (internal ataupun eksternal).

User terbiasa dengan link di Google, Yahoo, dan Wikipedia yang berwarna biru. Maka, jangan ubah dengan warna lain --karena akan melanggar UX dan mengurangi nilai user friendly.

Hindari penggunaan warna terang yang menyilaukan mata, seperti merah atau orange. Gunakan warna yang sejuk di mata, seperti biru, hijau, hitam, atau ... pokoknya yang gelap deh!

7. Meta Tags
Ini dia elemen terpenting dalam template untuk kepentingan SEO. Meta Tags itu semacam "tanda pengenal" bagi mesin pencari. Maka, gunakan Meta Tags yang SEO Friendly, terutama di bagian "Meta Description" yang berisi gambaran konten blog Anda secara umum.

8. Loading
Ini juga penting banget karena Google sendiri menyarankan blog kita harus cepat dan ringan. Maka, hindari penggunaan flash, animasi, atau javascript berlebihan. Cek blog Anda di GT Metrix dan lihat apa saja yang membuat blog Anda berat, lalu perbaiki.

9. Heading Tags Dinamis
Heading Tags dinamis (Dynamic Heading Tags) biasanya sudah diterapkan di template blog seo. Jika belum, maka lakukan modifikasi agar blog Anda lebih "poperful" untuk diindeks mesin pencari.

10. Valid HTML5
Setidaknya, jangan terlalu banyak error deh. Blog yang valid HTML katanya akan lebih kenceng dan disukai mesin pencari. Jika terlalu banyak error dan warning, lakukan modifikasi agar mendekati valid HTML.

Elemen-elemen itulah yang mesti kita perhatikan dalam memodifikasi template blog. Setidaknya, itu yang CB perhatikan saat mengedit sebuah template. Terbaru, ketika CB memodifikasi New Johny Wuss Versi 2 .

Banyak juga ya? Makanya, hargailah para desainer template blog!!! Hargai pula yang memodifikasinya!!!

Caranya: jangan hapus credit link di footer template yang Anda gunakan, kecuali Anda bikin sendiri, modif sendiri, atau beli (premium template).

Ada tambahan? Good Luck! (http://www.contohblog.com).*


Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

13 comments on Cara Modifikasi Template Blog agar Lebih SEO dan User Friendly

  1. Terima Kasih atas kemudahan Template yang diberikan Mudah2an Ok Selalu

    ReplyDelete
  2. Heading Tag untuk judul postingan tu yang baik apa? H1, H2 atau H3

    ReplyDelete
  3. baru saja saya sempat mendownload beberapa template SEO friendly di blog ini. Saya test cepat dan mempunyai score 100. Thanks atas sharenya mas. Ditunggu update postingan terbarunya.
    Thanks

    ReplyDelete
  4. Salam Blogger Gan,

    Berhubung agan ane rasa paham sekali kode-kode yang ada di dalam template blog terlihat dari banyaknya beberapa template populer yang berhasil agan modifikasi bahkan lebih SEO friendly dari template aslinya,ane meminta bantuan pada agan untuk menilai template yang ane pergunakan dan menjawab beberapa pertanyaan saya di bawah ini tentang template lebih jelasnya:

    1.Gan please lihat tampilan template blog ane disini informaside.blogspot.com,apakah sudah masuk kategori template yang SEO friendly dengan editan yang ane lakukan di lihat dari responsive template,fast loading,dynamic headling dan lain-lain?

    2.Masih di tampilan template yang sama gan,agan ane pikir kenal sama chkme.com.jika saya cek url blog ane di chkme.com menunjukan adanya deskripsi blog dan keyword blog,tapi jika saya cek url postingan di blog yang sama,keywordnya tidak ada gan,itu tentunya mengurangi nilai seo on page dari postingan blog ane.Lantas apa yang bisa ane lakukan untuk dapat menunjukan keyword postingan jika di cek di chkme.com,apakah dapat dilakukan dengan mengedit template blog?

    3.Gan please lihat tampilan template blog ane yang ke dua disini kreasinfo.blogspot.com,pertanyaannya sama dengan pertanyaan yang pertama?

    4.Blog CB ini the next blog SEO and tutorial yang akan selalu ane kunjungi setelah Buka Rahasia milik Kang Azmi yang akhir-akhir ini berhenti atau vakum sejenak dalam memberikan panduan untuk blog dan lain-lain blog melihat perkembangan blog itu sendiri yang selalu harus di update apalagi dalam hal SEO.

    Terima Kasih.

    ReplyDelete
    Replies
    1. Templatenya sudak OK, fast dan responsif
      Meta Tags harus diisi di template, cek daleman templatenya....

      Delete
  5. Mantap...terima kasih infonya

    ReplyDelete
  6. wah Sudah Komplit ulasannya mas. Makasih

    ReplyDelete
    Replies
    1. Semoga demikian. Btw, Meta Tags blognya blm diisi lengkap tu masbro...
      Cyber News | [ini masih kosong] Diisi akan lebih OK :)

      Delete
  7. Terima kasih artikelnya sangat membantu mau coba pelajarin nih bos..tks

    ReplyDelete
  8. thanks gan ilmunya. gan mau nanya nih btw template kya blog agan tu donlot di situs apa ?

    ReplyDelete
  9. Modifikasi template itu memang asyik kalau sudah paham dengan html/css, nah kalau saya sendiri masih agak kesulitan untuk memahami soal Schema mas.. soalnya masih sering terjadi error di GWT nya nih..

    Mohon bantu pencerahannya ya mas.

    Terimakasih

    ReplyDelete

Contact Form

Name

Email *

Message *