Sabtu, 21 Februari 2015

Pelajaran yang harus gue lakukan Alamat Situs Dengan Atau Tanpa WWW

Sering kita menjumpai alamat situs atau website yang menggunakan www, demikian pula yang tidak menggunakan www.
Contohnya:
www.semutkecil.com => Menggunakan www
semutkecil.com => Tanpa www
Lalu pertanyaannya adalah lebih bagus dengan www atau tanpa www ?
Nah ini dia, jawabannya adalah sesuai selera masing-masing pemilik atau pengelola situs aja. :)
Namun pastikan hanya mempergunakan satu saja, jika dengan www maka seluruhnya dengan www, demikian pula sebaliknya.
Kenapa demikian?
  1. Konsistensi.
    Apabila alamat menggunakan www maka terus konsisten dengan hal tersebut, demikian pula sebaliknya.
  2. Menghindari Duplikasi.
    Search engine menganggap dengan dan tanpa www sebagai website terpisah sehingga memiliki “dua website” dengan isi yang sama persis tentu bukan hal yang baik bagi “mata” search engine.
Bagaimana cara pengaturannya ?
Sangat mudah sekali.

Ada beberapa cara untuk melakukan pengaturannya. Dan pada contoh artikel ini adalah pengaturan melalui control panel Cpanel yang untuk penggunaan dengan www dan akan me-redirect tanpa www menjadi dengan www.
  1. Login ke Cpanel dan klik “Redirects“.
    Klik Redirects Pada Cpanel
  2. Masukkan isian:
    Type“: “Permanent (301)
    http://“: pilih “semutkecil.info” (Sesuaikan dengan nama domain teman-teman)
    redirects to→“: Masukkan “http://www.semutkecil.info” (Sesuaikan dengan nama domain teman-teman dan pastikan menggunakan www)
    www. redirection:“: Pilih yang “Do Not Redirect www.
    Centang isian “Wild Card Redirect
    Lalu klik “Add
    Redirects Tanpa WWW Menjadi Dengan WWW
  3. Sukses!
    Pengaturan Redirect Sukses
Sangat mudah bukan?
Semoga artikel ini bisa bermanfaat.

Pelajaran yang harus gue lakukan keluar sandbox

Pada postingan ini saya ingin share tentang Cara Ampuh yang saya lakukan agar blog saya Keluar dari Google Sandbox. Pada bulan desember tahun 2013 kemarin, 2 blog saya terkena dampak dari google sandbox. Semua postingan menghilang dari serp. Alhasil visitor turun drastis. Ketika itu jujur saya masih kebingungan untuk mengatasi masalah ini. Saya mencoba mencari-cari solusinya di google, caranya hampir sama antar blog satu dengan blog lainnya. Namun saya rasa apa yang dijelaskan di blog-blog itu kurang masuk akal. Tapi karena saya juga belum mengerti apa-apa waktu itu, jadi saya ikuti saja apa yang disarankan. Oh ya, meskipun begitu saya ingin mengucapkan banyak terimakasih kepada para blogger yang telah memposting artikel tentang cara keluar dari google sandbox. Karena secara langsung maupun tidak, postingan-postingan tersebut telah membantu blog saya telah terbantu keluar dari google sandbox.

Cara Ampuh Keluar dari Google Sandbox

Kenapa bisa masuk google sandbox?

Alasannya sederhana = SPAM. Seingat saya sebelum masuk sandbox, saya pernah sesekali mencantumkan link blog saya saat berkomentar di blog lain. Ternyata hal ini sangat fatal akibatnya. Jadi jika kalian tidak ingin mengalami nasib yang sama dengan blog saya, biasakanlah berkomentar dengan baik dan membangun.

Dengan demikian saya jadi ingat apa yang dikatakan mas Dan (pemilik forum bersosial.com): “Spam itu mungkin akan cepat menaikkan SERP, tapi akan berakibat buruk untuk efek jangka panjang”.

Baiklah, sekarang saya uraikan cara saya mengatasi google sandbox.

2 blog saya yang terkena sanbox adalah http://shofighter.blogspot.com dan http://shofactor.blogspot.com. Kedua blog ini awalnya saya ikutkan kontes SEO, jadi agar SERP naik dengan cepat saya mencoba berkomentar dengan mencantumkan link hidup di badan komentar. Oleh karena itu, masuklah blog ini ke google sandbox. Kemudian apa yang saya lakukan?

1. Transfer akun gmail/akun google

Untuk hal ini mungkin jarang dibahas oleh blogger di luar sana. Karena ini sesuai apa yang disarankan oleh teman saya. Caranya:
  • Buat akun google baru
  • Setelah itu, masuk Dashboard Blogger – Setting – Dasar – Izin – Penulis blog. Klik tambahkan penulis, masukkan email google anda yang baru tadi.
  • Lalu cek email di akun yang baru, klik konfirmasi.
  • Setelah selesai, jadikan akun yang baru itu sebagai admin dan hapus akun google yang lama.
Dengan demikian blog anda sudah pindah dari akun google lama kea kun google yang baru.

2. Ganti template

Untuk mengganti template, usahakan mencari template yang sudah memenuhi standar SEO dan mempunyai tampilan responsive atau bisa juga menggunakan template bawaan blogger dan mengeditnya agar nampak SEO Friendly. Untuk blog http://shofighter.blogspot.com ini saya menggunakan templatenya maskolis. Sedangkan http://shofactor.blogspot.com, saya memakai template bawaan blogger yang sudah diedit. Hal ini karena untuk blog yang satu ini agak susah keluar dari sanbox.

3. Resubmit sitemap di google webmaster tool. Cek juga semua mengenai blog di GWT termasuk di menu tautan manual.

4. Cek blog anda di http://www.searchenginegenie.com/sandbox-checker.htm, lalu akan ada tulisan seperti ini: “Your site is still in google Sandbox. Contact support@searchenginegenie.com to get you out of Sandbox." Kemudian kirim email permintaan untuk mengeluarkan blog anda dari google sanbox ke alamat email tersebut.

5. Agar membantu google merayapi blog, saya melakukan ping sesekali dengan http://www.idblogmark.com/ping-service/

Itulah hal-hal yang saya lakukan sampai blog saya keluar dari google sandbox. Jadi saya untuk masalah posting, mencantumkan link ke google dan lainnya tidak saya lakukan karena terus terang hal itu tidak masuk akal bagi saya.

Pelajaran yang harus dilakukan untuk sitemaps


Sitemap atau peta situs adalah struktur dari tautan-tautan (link) pada website yang saling memiliki relevansi dan keterkaitan. Keberadaan sitemap pada sebuah website akan memudahkan Search Engine melakukan crawl atau penjejakan ke seluruh konten yang ada di situs anda. Jadi pemilik website, khusus bagi anda yang belum memiliki sitemap di website anda, mari luangkan sedikit waktu anda hari ini untuk membuat sitemap. Berikut adalah cara membuatnya, sekaligus submit sitemap tersebut ke Google.
1. Sign in ke Google webmaster tools (www.google.com/webmasters/sitemaps) menggunakan akun google anda.
2. Add site anda ke dalam akun webmaster tools anda.
3. Verify situs Anda; bisa dengan membuat sebuah file html kosong dengan nama yang diotomatisasi oleh google, atau dengan memasukkan meta tag pada halaman index situs anda.
4. Buat sitemap. Cara termudahnya adalah menggunakan sitemap generator. Disini anda bisa gunakan alternatif sitemap generator seperti http://www.auditmypc.com/web-master-tools.asp.
  • Pada situs sitemap generator tersebut, Klik button Webmaster Tool.
  • Masukkan URL situs anda, lalu klik button play pada sudut kiri bawah.
  • Klik tab Sitemap.
  • Tunggu hingga semua file selesai di load, kemudian pilih satu lokasi pada direktori root website anda.
  • Klik button Save Sitemap, lalu pada menu popup, klik Google Sitemap.
  • Simpan file sitemap.xml pada komputer anda.
  • Upload file sitemap.xml ke hosting, letakkan di bawah direktori public_html
5. Kembali ke Google webmaster tools anda dan klik tab Sitemap.
6. Klik “Add a Sitemap”.
7. Pilih ‘General Web Sitemap’ pada menu drop down.
8. Masukkan URL dimana sitemap anda bisa diakses. Contohnya http://www.mysite.com/sitemap.xml
9. Klik ‘Add Web Sitemap’.
10. Selamat, Setting Sitemap telah selesai! Sekarang tinggal menunggu beberapa hari hingga Google mendownload sitemap baru anda. Pastikan anda tidak memasukkan halaman admin atau halaman terlindung password lainnya. Jika ya, maka pertama kali pastikan anda menghapusnya.
11. Untuk memeriksa adakah broken link di sitemap anda, bisa dilakukan melalui situs: http://validator.w3.org/checklink

Pelajaran yang harus gue lakukan Cara Membuat Label Menjadi Meta Keyword

Cara Membuat Label Menjadi Meta Keyword - Banyak cara bisa dilakukan agar blog template kita lebih SEO friedly,dari membuat template yang lebih valid XHTML maupun memasang meta tag pada template,nah bagaimana membuat label yang ada pada blog kita menjadi label? lihat gambar dibawah ini!
label



ikuti langkah-langkah berikut:
Login ke blogger sobat.
Klik rancangan.
Klik Edit HTML,jangan lupa back up template kamu.
Cara kode <head>
Letakkan kode dibawah ini tepat diatas kode <head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:section id='meta1' showaddelement='no'>
<!-- widget must be a of Type = 'blog' to have posts data exposed, and must have a unique id -->
<!-- Empty Includables(functions) to output nothing, You must keep them ): -->
<b:widget id='Blog2' locked='no' type='Blog'>
<b:includable id='nextprev'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='post' var='post' />
<b:includable id='status-message'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='comments' var='post'/>
<b:includable id='main' var='top'><!-- Main Function of Any widget comes with ID 'main' -->
<!-- Loop Page Posts (only 1 in a post page )-->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<!-- If the post has labels, make Meta keywords by looping lables -->
&lt;meta name=&quot;keywords&quot; content=&quot;<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>&quot; /&gt;
</b:if>
</b:loop>
</b:includable>
</b:widget>
</b:section>
</b:if>

Lalu letakkan kode dibawah ini lagi tepat dibawah kode <head>

<b:include data='blog' name='all-head-content'/>
<!-- Block2: Output Index Title,keywords,decription and Post Title,description -->
<!-- Post/Archive Page -->
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<title><data:blog.pageName/></title>
<meta name='description' expr:content='data:blog.pageName' />
<!-- Index Page -->
<b:else/>
<title><data:blog.pageTitle/></title>
<meta name='keywords' content='your,blog,keywords!!' />
<meta name='description' content='your blog description!!' />
</b:if>

Lalu cari lagi kode seperti di bawah :
<b:include data='blog' name='all-head-content'/>
Dan
<title><data:blog.pageTitle/></title>
Jika sudah ketemu, Hapus semua kode tersebut. karena jika tidak di Hapus akan terjadi duplikat title.
jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Coba lihat postinganmu.dan klik kanan dan lihat page sourcenya,jika berhasil maka otomatis label kamu akan jadi meta keyword seperti gambar diatas. demikian tips merubah label menjadi keywords, semoga bermanfaat.

Pelajaran yang harus gue lakukan membuat RSS Feed

Sebelum masuk ke pembuatan, kita harus tau apa itu RSS Feed, RSS Feed atau kepanjang dari Really Simply Syndication Feed adalah metode agar para pengunjung atau pembaca dapat memperoleh berita terkini dengan mudah dan otomatis melalui e-mail. Bila teman-teman berlangganan rss feed pada suatu blog atau website, maka jika pemilik website itu membuat posting atau artikel terbaru, maka teman-teman juga akan otomatis mendapatkannya melalui e-amil tentunya, di sini saya akan menjelaskan langkah-langkah membuat RSS pada blog dengan menggunakan feedburner.



Langsung aja menuju langkah-langkah cara membuat RSS Feed di blog :

1. Mbaksist dan agan-agan buka link -> 
http://feedburner.com
2. Login deh pake akun gmail kalian
3. Maka akan keluar tampilan sebagai berikut :









4. Masukkan alamat URL feed blog teman-teman dalam kotak “Burn a feed right this instant”. Untuk WordPress masukan http://namadomain.com/feed, Untuk blogspot biasnya adalah: http://domainanda.blogspot.com/feeds/posts/defaults, Biarkan “I am podcaster” tidak tercentang, kemudian klik “Next”.

5. Setelah itu silahkan Ubah feed title dan feed address sesuai keinginan teman-teman. kemudian klik Next, seperti contoh:


6. Jika kemudian tampil halaman Congrats! seperti gambar dibawah ini, berarti feedburner teman-teman sudah aktif. setelah itu silahkan klik “Skip directly to feed management”



7. Klik tab “Publicize”


lalu klik "email subcription" lalu klik "activate"
8. Maka akan keluar tampilan sebagai berikut menandakan RSS Feed anda telah dibuat :
9. Selanjutnya hanya tinggal mengcopy paste code yang terdapat pada feedburner, untuk di salin pada blog anda

CARA MENAMPILKAN RSS FEED (SUBSCRIPBE)

1. Masuk ke dasbor blog anda
2. Pilih menu "tata letak"
3. add gadget
4. lalu pilih HTML, atau bisa juga memilih RSS FEED
5. Copy paste code yang anda telah copy dari feedburner kedalam "konten" seperti gambar berikut :


6. Selesai dan SELAMAT blog anda telah memiliki rss feed
7. Selesai, semoga bermanfaat, apa bila ada pertanyaan silahkan tinggalkan komentar :)

Pelajaran yang harus gue lakukan Gzip Compression

Salah satu cara untuk memperkecil ukuran website Anda adalah dengan mengaktifkan gzip compression di server hosting Anda. Jika Anda menggunakan layanan Hosting Murah kami, fasilitas ini sudah tersedia untuk Anda di cpanel. Intinya, web server akan mengkompres konten website Anda sebelum dikirim ke visitor dan browser kemudian akan mendekompres dan menampilkan konten asli ke visitor website Anda secara cepat.
Gzip compression merupakan cara mempercepat website yang cukup efektif, karena juga mempunyai score yang bagus di Google PageSpeed and Yahoo YSlow. Jadi, pastikan Anda mengaktifkan gzip di hosting web Anda untuk meraih hasil tertinggi di kedua platform speed test di atas.

Bagaimana cara mengecek apakah web Anda sudah ter-gzip atau belum?

Untuk memastikan apakah website Anda sudah terkompresi dengan gzip atau belum, banyak tool-tool gratis yang menyediakan untuk hal ini, salah satunya Anda dapat memanfaatkan tools dari whatsmyip.org. Silahkan buka toolnya langsung di http://www.whatsmyip.org/http-compression-test/ lalu masukkan alamat website Anda.
cara mempercepat website
Contoh di atas adalah saat saya masih belum saya aktifkan gzip pada website saya, dan setelah saya aktifkan maka hasilnya akan terlihat seperti ini:
cara mempercepat website

Bagaimana Cara mengaktifkan gzip di Hosting Anda?

Jika Anda pengguna layanan shared hosting dengan cPanel, pada umumnya layanan ini sudah terinstall di shared hosting Anda, sehingga Anda tinggal mengaktifkan layanannya secara manual melalui cPanel.
Berikut adalah cara mengaktifkan gzip compression di cPanel Anda :
  1. Silahkan Anda Login ke cPanel hosting Anda.
  2. Pada kelompok menu “Software” Cari Menu “Optimize Website
    cara mempercepat website
  3. Pilih “Compress all content” lalu klik “Update Settings” ..
    cara mempercepat website
  4. Selesai dan Anda bisa memeriksa status website Anda dengan menggunakan tool tersebut di atas.
    cara mempercepat website
Selamat mencoba, dan semoga website Anda bisa lebih cepat di Akses :)

Mengaktifkan Gzip Compression di WHM

GZip merupakan salah satu tehnik kompresi yang cukup efektif. Untuk mengaktifkan GZip Compression, Anda perlu mengkompilasi ulang Apache Anda. Untuk dapat melakukan tutorial ini, tentunya Anda harus memiliki akses root pada WHM. Jika Anda adalah reseller hosting, Anda tidak dapat mengaplikasikan tutorial ini. Segera order paket VPS Murah dan cPanel hosting kami untuk dapat mengaplikasikan tutorial ini.

Bagaimana cara Mengaktifkan Gzip Compression?

Silahkan login ke WHM Anda, lalu buka EasyApache dan centang pada “deflate”.
gzip compression
Lalu aplikasikan kembali setting tersebut ke WHM Anda. Pembahasan selanjutnya terkait dengan penggunaan GZip Compression ini bisa Anda pelajari pada Cara Mempercepat Website.
Semoga Tutorial tersebut dapat membantu Anda.

Pelajaran yang harus gue lakukan Cara Menggunakan Robots.txt

Apa itu File Robots.txt

File robots.txt dibahas sebanyak beberapa kali dalam pedoman Google Webmaster, ini menunjukan bahwa bagian ini adalah sesuatu yang penting bagi mereka dalam menjelajahi website anda (Jika anda menyewa jasa pembuatan website, pastikan mereka juga mengetahui pentingnya bagian ini)

Anda dapat mengontrol bagaimana mesin pencari seperti google berinteraksi dengan halaman website anda menggunakan file robots.txt. Isi dari file ini nantinya akan memberitahu crawler mesin pencari bagaimana seharusnya mereka mengunjungi website anda.

Jika anda ingin mesin pencari tidak mengindeks sebagian dari file website anda, maka anda bisa menggunakan file robots.txt untuk melakukannya. Anda juga bisa mengatur apa saja yang bisa dijelajahi oleh mesin pencari di website anda.
Pada dasarnya file robots.txt adalah file yang sangat sederhana yang diletakan di server website anda. File ini harus diletakan di root folder, contoh:
www.websiteanda.com/robots.txt
Jika anda ingin melihat file robots.txt website tertentu, anda bisa mengetikan alamat website tersebut ditambah tulisan “robots.txt” di address bar browser anda.
Sebagai contoh, anda bisa melihat robots.txt dari dari website kami ini di
http://www.manggale.com/robots.txt

Sebenarnya, Apa fungsi robots.txt ini?

File robots.txt ini sebenarnya berfungsi untuk memberikan intruksi tertentu kepada mesin pencari ketika mereka mencoba menjelajahi website anda.
Ketika mesin pencari seperti google ingin menjelajahi website anda, maka file yang pertama kali dijelajahi adalah file robots.txt.  Dengan mengunjungi robots.txt ini, mesin pencari menjadi tahu apa yang harus mereka lakukan. Menjelajahi seluruh website anda secara keseluruhan, sebagian atau tidak sama sekali.
Masalah yang paling umum dari file robots.txt ini adalah jarang sekali para pemula mengetahui bagaimana cara menggunakan robots.txtini
Sebenarnya, jika anda bisa membuat halaman website, maka anda pasti juga bisa membuat file robots.txt ini. Anda bisa membuatnya menggunakan notepad, WordPad atau Editor lainnya. Bahkan, anda juga bisa menungunjungi website tertentu dan kemudian mengcopy file robots.txt mereka dan paste di website anda, tentunya dengan beberapa penyesuaian.

Lalu, apa yang harus anda buat di file robots.txt?

Jawabannya adalah tergantung pada keinginan anda. Kebanyakan orang, ingin mesin pencari mengunjungi semua file yang terdapat di website mereka.
Nah, jika anda ingin mesin pencari ingin mengunjungi seluruh bagian dari website anda, maka anda bisa menggunakan salah satu dari 3 cara menggunakan robots.txt dibawah ini:
1. Tidak memiliki file robots.txt sama sekali
Jika website anda sama sekali tidak memiliki file robots.txt, maka mesin pencari akan mencrawler atau menjelajahi seluruh bagian dari website anda tanpa batasan.
2. Membuat file kosong yang diberi nama dengan robots.txt
Hampir sama dengan kasus pertama, jika robot mesin pencari mengcrawler website anda, maka mereka akan mengcrawler seluruh bagian dari website anda tanpa batas.
3. Membuat file robots.txt dan kemudian menulis kode berikut
Jika anda membuat file robots.txt dan kemudian menuliskan kode berikut ini maka mesin pencari juga akan mengunjungi website anda secara bebas, karena tidak satu kode pun yang memerintahkan untuk tidak mengunjungi bagian tertentu.
Kode tersebut adalah:
User-agent: *
Disallow:
Berikut ini adalah penjelasan terhadap 2 kata yang terdapat dalam file robots.txt diatas
 User-agent:
“User-agent” , merupakan bagian yang digunakan untuk menentukan apa yang dilakukan robot mesin pencari di website anda. Ada 2 cara menggunakan bagian ini
Jika anda ingin menginformasikan semua halaman kepada robot, maka anda bisa menambahkan simbol “*” setelah kata “User-agent”. Lihat kode dibawah ini
User-agent:*
Bagi kode ini mengintruksikan kepada robot mesin pencari untuk menjelajahi seluruh bagian dari website anda. Jika anda ingin lebih spesifik anda bisa menambahkan nama robot dari mesin pencari seperti dibawah ini
User-agent: Googlebot

 Disallow

Dissalow digunakan ketika anda ingin menghalangi robot mesin pencari untuk mengcrawler bagian tertentu dari website anda.
Misalnya anda ingin menghalangi robot mesin pencari untuk menjelajahi dan mengindeks gambar anda, maka anda dapat menembatkan gambar anda disalah satu folder dan menghalangi mesin pencari untuk menjelajahinya.
Misalnya anda meletakan gambar anda di folder yang anda beri nama “Gambar”, selanjutnya anda bisa memberitahu mesin pencari untuk tidak mengindeks folder tersebut.
Berikut ini adalah tulisan yang bisa anda buat di file robots.txt :
User-agent: *
Disallow: /Gambar
Dengan menggunakan baris kode diatas, anda bisa menghalangi mesin pencari untuk mengunjungi folder anda. “User-agent: *” menginstruksikan bahwa instruksi ini berlaku untuk semua robot.

Petunjuk Khusus untuk Googlebot

Robot yang digunakan untuk menjelajahi dan mengindeks halaman website anda disebut dengan Googlebot.  Ada beberapa instruksi lain terkait dengan robot google ini. Diantaranya adalah:

Allow

Allow berarti memungkinkan mesin pencari untuk menjelajahi dan mengindeks folder atau isi folder yang sebelumnya sudah kita kecualikan untuk tidak di indeks.
Seperti contoh sebelumnya, kita sudah membuat kode yang digunakan supaya mesin pencari tidak mengindeksnya:
User-agent: *
Disallow: /Gambar
Nah, jika anda ingin mesin pencari bisa mengideks salah satu gambar yang terdapat pada folder Gambar, anda bisa menggunakan kode berikut ini di file robots.txt berikut ini:
User-agent: *
Disallow: /Gambar
Allow: /Gambar/logo-manggale.png
Dengan menggunakan kode diatas, akan memberitahukan kepada mesin pencari untuk mengunjungi “logo-manggale.png”, walaupun sebelumnya folder Gambar sudah dikecualikan untuk tidak di indek.
×

Penting!!

Jika anda menggunakan file robots.txt, pastikan anda sudah menulisnya dengan benar, karena jika anda membuat kesalahan, dapat memlokir bot mesin pencari untuk mengunjungi website anda.

Pelajaran yang harus gue lakukan Mengubah Judul Postingan Menjadi H1

Sesuai judul artikel disini mengenai cara mengubah judul postingan menjadi h1 memiliki maksud bahwa setiap judul postingan yang awalnya mungkin memiliki heading h2 atau h3 diubah ke h1. Dalam beberapa template blogger yang umumnya tersedia rata-rata menggunakan judul blog sebagai h1 dan judul postingan sebagai h2 atau h3. Sehingga harus diubah agar template blogger lebih seo friendly.
Dikarenakan dalam satu halaman blog tidak boleh terdapat 2 heading h1, maka harus ada penggantian salah satu judulnya entah itu judul blog ataupun judul postingan. Nah, dalam tutorial mengubah judul postingan menjadi h1 disini saya memakai konsep sebagai berikut :
  1. Saat berada di halaman selain halaman postingan (homepage, arsip, label, halaman eror, halaman statik, halaman pencarian), heading h1 diwakili oleh judul blog.
  2. Saat berada di halaman postingan, heading h1 diwakili oleh judul postingan.
Sampai disini saya harap Anda sudah paham akan konsep dan maksud pengubahan judul postingan menjadi h1. Sekarang mulai langkah-langkah dalam pengubahan melalui editor html template blogger.
1. Backup dulu template Anda agar punya cadangan bila sewaktu-waktu terjadi kesalahan penggantian kode.

2. Kembali ke template, kemudian klik edit html

3. Centang Expand Template Widget

4. Kita akan menambah beberapa kode css seperti header h1. Dikarenakan masing-masing template blogger tidak sama, maka sesuaikan dengan css Anda. Langkahnya : cari kode h1 dan biasanya akan ada sederetan h, misalnya h1, h2, h3, h4, h5, h6. Tambahkan pa setelah h6 sehingga menjadi h1, h2, h3, h4, h5, h6, pa.
5. Cari kode css yang terdapat kode header h1, kemudian salin kode tersebut dan tambahkan header pa, contoh :

Kode awal :

#header h1 { font-size: 36px; line-height: 42px; color: #fff; margin: 0; }
#header h1 a, #header h1.title a:hover { color: #fff; text-decoration: none; }
 
Kode setelah di tambah pa h1 :

#header h1 { font-size: 36px; line-height: 42px; color: #fff; margin: 0; }
#header pa { font-size: 36px; line-height: 42px; color: #fff; margin: 0; }
#header h1 a, #header h1.title a:hover { color: #fff; text-decoration: none; }
#header pa a, #header pa.title a:hover { color: #fff; text-decoration: none; }

Ingat kode setiap template berbeda-beda, kode di atas hanyalah contoh yang diambil dari template blog infoindong . Sesuaikan kode tersebut dengan yang ada di template Anda.
6. Selanjutnya, cari kode post-title entry-title kemudian lakukan langkah dalam contoh berikut.

Kode awal (hanya contoh, h2 bisa berupa h3) :

<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'>
<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>
</h2>

Kode akhir dengan mengganti h2 menjadi h1 khusus halaman postingan :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
            <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'>
                  <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>
            </h1>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
            <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'>
                  <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>
            </h2>
</b:if>

Jika kode template awal Anda sama dengan di atas, Anda bisa mengganti (copy paste) langsung dengan kode akhir di atas. Jika kode post-title entry-title ada lebih dari satu, ganti semua aja.
7. Langkah terakhir, cari kode h1 class='title' kemudian tambahkan pa class='title', lihat contoh di bawah :

Misal, kode awal :

<h1 class='title'>
<b:include name='title'/>
</h1>

Diubah menjadi :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
          <pa class='title'>
            <b:include name='title'/>
          </pa>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
          <h1 class='title'>
            <b:include name='title'/>
          </h1>
</b:if>

Bila kode h1 class='title' ada lebih dari satu, ganti semuanya.
8. Bila semua kode sudah Anda ganti sesuai penjabaran di atas, pratinjau dulu hasil template Anda apakah sudah berhasil atau masih mengalami error. Jika berhasil, simpan template.



Itulah langkah-langkah dalam mengubah judul postingan menjadi h1, bila Anda masih kesulitan, silahkan tanya di forum infoindong. Coba perhatikan bahwa saya menambahkan kode conditional tags blogger pada kode di atas seperti dan mempunyai maksud kondisi di masing-masing halaman postingan dan bukan postingan berbeda-beda. Lebih lanjut mengenai conditional tags silahkan baca "Conditional Tags Blogger"

Pelajaran yang harus gue lakukan meniru template orang lain 2

Hampir satu bulan ga posting karena keasyikan mempercantik tampilan blog dengan meniru kode css blog orang lain, hingga akhirnya saya mencoba mencari tahu dan saya menemukan berbagai cara meniru template blog orang lain melalui perantara mbah google. Salah satu cara yang saya pilih adalah dengan menggunakan add ons firebug, pada template blog ini saya menggunakan template mudah dari perancang template, dengan tata letak 1 kolam. Sebelumnya maaf sob ga ada sedikitpun terniat di hati saya untuk menggurui sobat, artikel ini hanya semata-mata untuk menceritakan pengalaman saya.

Meniru, menjiplak dan menduplikat boleh-boleh saja dan sah, tetapi jangan seratus persen. Memang ada beberapa hal yang boleh ditiru seratus persen, tetapi ada juga hal-hal tertentu yang jika tetap dipaksakan dalam meniru akan berakibat buruk.

Desain blog, saya banyak meniru dari blog-blog lain yang sudah pengalaman dan mempunyai keahlian dalam desain. Salah satu cara yang sering saya lakukan dalam meniru ataupun mencari tahu kode template blog orang lain adalah dengan menggunakan add on firebugs  untuk mencoba add-ons firebugs silahkan sobat download add-ons firebugs setelah didownload:

Instal > tunggu sampai prosesnya selesai, setelah selesai  restart browser sobat, silahkan sobat buka blog siapa saja, setelah  berada di halaman blog, click kanan dihalaman tersebut lalu pilih inspect element with firebug maka firebug akan menampilkan  element kode template yang sedang sobat buka tadi. Silahkan pilih tool-tool yang disediakan firebug seperti HTML, Java Script, Css. untuk mengetahui element kode Css misalnya, sobat tinggal Click tombol Css yang ada pada tool tersebut. sebagai contoh tampilan Firebugs yang sedang aktif seperti gambar dibawah:


Untuk awal-awalnya mungkin sobat agak sedikit kebingungan, sama seperti saya yang dulu awal-awalnya merasa pusing, tapi Alhamdulillah setelah saya mencoba berulang-ulang kali akhirnya saya bisa menggabungkan beberapa kode, dari beberapa template. O ia hampir lupa, selain cara yang sudah saya jelaskan tadi sobat juga bisa meniru kode html, Css blog orang lain dengan cara melihat Page sourcenya dengan cara Click kanan >>View Page Source atau dengan cara menekan Ctrl+U.

Buat sobat yang lebih mahir dalam bidang Cara Meniru Template Blog Orang Lain Menggunakan Firebug ini saya mohon untuk bisa meberikan kritik dan saran dari sobat, kerena kotak komentar blog ini selalu terbuka lebar untuk komentar sobat yang bersifat membangun dan bertujuan positif. Doing positive things that will make life seem more beautiful....GoodLuck Happy Blogging!!

Pelajaran yang harus gue lakukan menjiplak template orang lain

Kali ini saya akan sedikit mengulas bagaimana kita menjiplak template blog lain. Ada yang bilang juga cara ini adalah cara mencuri template blog orang lain namun saya kira bukan mencuri akan tetapi lebih berfikir kreatif. Cara ini hampir sama dengan cara mengetahui themes blog orang lain tapi malah lebih rumit lagi :D

Kalau untuk mengetahui themes blog orang lain akan lebih mudah pada cms open source apalagi jika yang memakai adalah orang yang kurang begitu mengerti tentang coding seperti saya. Contoh saja jika kita ingin mengetahui tema blog wordpress, sedikit tips bisa diketahui melalui link CSSnya, lihat saja dengan menambahkan url wp-content/themes/ :D

Tapi kali ini kita tidak ingin membicarakan theme wp atau CMS lain karena akan repot juga jika kita mau menjiplak tema blog orang lain yang memakai CMS open source tersebut. Jelas setiap template untuk functionnya kemungkinan beda apalagi jika yang membuat tema berbeda. Namun kita akan bekerja untuk mengcopy template blog lain di blogspot.

Untuk syarat utama yang harus anda mengerti adalah, anda benar benar mengerti tentang Page Elements Tags for Layouts blogger. Sebagaimana yang pernah saya singgung dalam artikel membuat template blogger sendiri. Apalagi jika anda sudah paham semua point yang saya sebutkan. Kalaupun belum mungkin anda juga bisa mengikuti artikel ini.

Kita ketahui tipe widget yang di sediakan blogger untuk penyusunan template seperti BlogArchive, Blog, Feed, Header, HTML, SingleImage, LinkList, List, Logo, BlogProfile, Navbar, VideoBar, NewsBar. Akan tetapi yang sering digunakan orang dalam penyusunan template hanyalah BlogArchive, Blog, Header, HTML dan yang lainnya memang ada juga yang menggunakan namuan sangat jarang.
Format masing masing untuk widget ini seperti

  • <b:widget id='Header1' locked='true' title='' type='Header'/>
  • <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
  • <b:widget id='HTML1' locked='false' title='' type='HTML'/>
  • <b:widget id='BlogArchive1' locked='false' mobile='yes' title='Blog Archive' type='BlogArchive'/>
Saya kira anda harus paham dulu, tapi kalaupun sudah pusing ya sudahlah, lanjut lagi untuk membaca tulisan saya. Untuk selanjutnya supaya anda mudah dalam pekerjaan gunakan browser yang ada inspect element. Saya memakai Opera untuk pekerjaan kali ini. Untuk target kali ini saya akan mencontohkan mengcopy gameloft4u.blogspot.com yang katanya orang templatenya bagus. Kan ndak enak juga kalau yang di jadikan contoh yang premium wkwkw.

Lanjut ke cara copy template blog lain Coba kita buka blognya. Setelah itu kita masukan dalam inspect element yaitu dengan klik kanan dan memilih inspect element. Expand tag body dan jangan mengexpan apapun selain body. Copy scriptnya misalnya saya dapatkan seperti berikut
  1. <div class="topmenupic">
  2. <div id="menuwrapperpic">
  3. <div id="headerpic-wrapper">
  4. <div id="outer-wrapper">
  5. <div class="picfooter">
  6. <div class="menubottompic">
  7. <div class="creditpic">
Kemudian tiap baris kode tersebut harus di tutup dengan penutup tag div </div>
Untuk contoh selanjutnya agak sedikit njlimet lagi. Saya contohkan kita akan membuka headerpic-wrapper. Kita ketahui dari kode yang saya dapatkan untuk section ini. adalah
  1. <div id="headerpic-wrapper"></div>
Kita buka lagi dengan expand codenya. Ternyata ada tag div dengan id header-wrapper, newspic. saya membuka header-wrapper namun tidak ada yang spesial pada isi tag ini.lanjut lagi expand codenya. Nah loh, ternyata ada yang istimewa. Saya menemukan 2 section disini yaitu header dan header2. Sampai disini kita bekerja lagi yaitu dengan mencopy scriptnya dan masukan dalam headerpic-wrapper
  1. <div id="headerpic-wrapper">
  2. <div id="header-wrapper">
  3. <div class="header section" id="header">
  4. <div class="header section" id="header2">
  5. <div style="clear:both;"/>
  6. </div>
  7. <div class="newspic">
  8. </div>
Lihat pada line 3 dan 4 headerpic-wrapper tersebut. terdapat class header dan section kemudian di sini juga ditemukan id header. Dapat disimpulkan ini memakai section header. Dan bisa kita simpulkan scriptnya di replace menjadi
  1. <b:section class='header' id='header' preferred='yes'>
  2. </b:section>
Kemudian saya expand lagi untuk header tersebut dan disini saya temukan lagi
  1. <div class="widget Header" id="Header1">
Kalau sampai disini kita sudah mengetahui class yang di pakai widget dan Header serta id nya Header1. Sudah jelas kalau ini memakai widget header. Lihat script untuk header diatas copy saja. Trus kita lihat idnya adalah Header1 maka jelas untuk codenya
  1. <b:widget id='Header1' locked='true' title='' type='Header'/>
Tinggal masukan ke section header seperti berikut
  1. <b:section class='header' id='header' preferred='yes'>
  2. <b:widget id='Header1' locked='true' title='' type='Header'/>
  3. </b:section>
Kemudian saya melanjutkan lagi dengan mengexpand section header2. Ternyata saya menemukan code
  1. <div class="widget HTML" id="HTML5">
Saya menemukan class widget dan HTML kemudian juga ada id HTML5. Nah disini diketahui pada kode tersebut memakai widget HTML. Jadi lihat lagi code widget diatas tentang HTML. Jadinya kita ubah id menjadi HTML5 seperti berikut
  • <b:widget id='HTML5' locked='false' title='' type='HTML'/>
Selanjutnya kita masukan ke section header2
  1. <b:section class='header' id='header2' preferred='yes'>
  2. <b:widget id='HTML5' locked='false' title='' type='HTML'/>
  3. </b:section>
Nah dari sini mungkin anda bertanya kenapa untuk widget header maupun widget HTML 5 tidak di expand? Untuk yang ini memang bukan untuk di expan karena nantinya otomatis akan di generate blogger sendiri jadi anda tidak perlu menulis ataupun mengcopynya.
Berlanjut lagi mencoba membuka newspic. Ternyata tidak ada apapun isinya yang spesial. Tinggal copy semua isi yang ada didalamnya. Tag HTML dan semua script yang didalamnya. Tetapi harus hati hati jika didalamnya ada aksi javascript. Nah, ternyata saya lihat ini ada aksi javascript, maka ada beberapa tag yang seharusnya tidak ada menjadi ada. Hal ini karena inspect element membaca client dan sesudah aksi semua script. Jadi untuk amannya anda copas dari view source. Jadinya jika kita gabungkan semua script yang di dapatkan adalah sebagai berikut
  1. <div id="headerpic-wrapper">
  2. <div id="header-wrapper">
  3. <b:section class='header' id='header' preferred='yes'>
  4. <b:widget id='Header1' locked='true' title='' type='Header'/>
  5. </b:section>
  6. <b:section class='header' id='header2' preferred='yes'>
  7. <b:widget id='HTML5' locked='false' title='' type='HTML'/>
  8. </b:section>
  9. <div style="clear:both;"/>
  10. </div>
  11. <div class="newspic">
  12. <div class='news'>
  13. <div style='float:left;padding:5px 60px 5px 0;font:bold 14px Arial;color:#333;text-transform:none;'>
  14. News Update :
  15. </div>
  16. <div style='float:left;width:800px;padding:4px 0; position:relative; overflow:hidden;'>
  17. <script type='text/javascript'>
  18. var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
  19. cssfeed.addFeed("Herdiansyah Hamzah", "http://kloning-blog.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
  20. cssfeed.displayoptions("date") //show the specified additional fields
  21. cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
  22. cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
  23. cssfeed.entries_per_page(1)
  24. cssfeed.init()
  25. </script>
  26. </div>
  27. </div>
  28. <div style="clear:both;"/>
  29. </div>
  30. </div>
Nah selanjutnya laksanakan untuk tag tag lain dan section serta widget lain seperti di atas. Selanjutnya jika dirasa telah selesai. Uji coba kode yang sudah anda kerjakan apakan markupnya sudah benar. Pakai saja aplikasi xmlmarker, copas codenya dan jika di temukan error tinggal perbaiki. Jika tidak lanjutkan saja.
Yang anda lakukan selanjutnya adalah membuka edit template di blogger dalam HTML. Bersihkan isi di tag <body> sampai </body>. Pastekan code yang sudah anda buat tersebut. Langkah selanjutnya anda copas CSS yang ada di blog target copykan ke area antara skin <b:skin><![CDATA[/* sampai ]]></b:skin>. Kalau sebelumnya ada isi buang saja. Langkah selanjutnya adalah menyimpan atau pratinjau template. Nah sekarang tinggal sesuaikan beberapa code yang tidak sesuai keinginan dan selesai.

Pelajaran yang harus gue lakukan membuat dynamic heading di blog

Salah satu strategi seo terbaik untuk artikel blog anda adalah membuat judul postingan menjadi title blog atau menjadi H1 dalam halaman artikel. Sejauh yang saya pahami dari template blogger, memang team blogger telah menyediakan tags h1, h2, h3, dan h4 dalam elemen html templatenya. Tapi menurut saya tags title tersebut masih mempunyai kelemahan saat artikel blog anda nanti harus bersaing dengan artikel blog lainnya di hasil pencarian google.

Bentuk title tags default html template blogger.

Pada umumnya bentuk tags title di html template blogger anda adalah seperti di bawah ini:

H1: Judul homepage blog anda. Judul beranda blog anda akan selalu tetap jadi H1 di semua halaman posting.

H2: Tanggal publish artikel blog anda. Sangat cocok jika dipergunakan oleh anda yang mempunyai blog bertema berita. Karena pengunjung blog biasanya mencari berita terupdate. Bagaimana jika tema blog anda berisi tentang tutorial atau tips dan trick?. H2 biasanya juga berbentuk judul widget dalam blog anda bagi yang menggunakan add a gadget di layout blogger. Misalkan anda menggunakan popular post, aboutMe, HTML/Javascript dalam add a gadget layout blogger, maka setiap judul yang anda ketik akan menjadi H2 dalam setiap halaman blog.

H3: Judul postingan blog anda. Ini adalah judul artikel blog anda. Setiap judul posting blog anda menjadi H3.

H4: Biasanya merupakan orang yang berkomentar atau name/url dalam halaman artikel blog. Jika anda menyediakan kotak komentar di halaman artikel, maka orang atau link yang berkomantar di blog anda akan diletakkan sebagai H4.

Pahami search engine saat melihat halaman blog.

Jika anda ingin artikel blog bisa bersaing di hasil pencarian google, maka anda harus pahami juga bagaimana google melihat halaman blog anda. Search engine google akan menampilkan link postingan blog anda saat ada pengunjung mengetikkan kata dalam browser mereka. Link yang ditampilkan adalah link yang mempunyai relevansi paling tinggi dari apa yang telah diketikkan user tersebut.

Bagaimana google menilai suatu halaman blog mempunyai relevansi tinggi dengan kata kunci yang diketiikan user. Pertama google melihat judul dari suatu halaman. Berikutnya google melihat deskripsi dan seluruh isi suatu halaman blog. Semakin berkaitan antara judul, deskripsi, dan isi suatu halaman. Maka akan semakin besar kemungkinan google menampilkan halaman tersebut di hasil pencarian.

Selain text dalam halaman, google juga melihat struktur html dalam halaman blog. Sebagai contoh jika anda menggunakan html title tags bawaan dari blogger dengan susunan seperti yang saya sebutkan di atas. Maka judul postingan blog anda akan di letakkan di prioritas nomor 3 (karena judul posting blog adalah h3). Bayangkan jika anda menuliskan judul artikel yang telah banyak dibuat di search engine. Untuk bisa bersaing dengan artikel sejenis dari blog lain, Sudah seharusnya anda membuat judul artikel tersebut adalah prioritas nomor 1 saat dilihat oleh google.

Buat dynamic heading halaman artikel.

Anda sudah membuat artikel original yang berkualitas, deskriptif, informatif, dan bermanfaat buat pengunjung blog anda, tapi artikel blog anda tetap tidak bisa berada di posisi teratas hasil pencarian google. Apa sebabnya?, pemahaman saya mungkin judul artikel blog anda kurang search engine friendly. Sudah seharusnya anda membuat setiap judul halaman artikel blog anda menjadi h1 dan mengganti judul blog hompage menjadi h2. Berikut ini adalah cara membuat semua judul postingan menjadi h1 dalam blog anda.


1. Terlebih dahulu login ke dalam blogger.com dan pilih blog anda.

2. Pada tabs sebelah kiri silahkan pilih Template >> Edit HTML. Akan lebih baik jika anda backup template terlebih dahulu.

3. Hilangkan terlebih dahulu heading tag title h1 di html template blogger anda. Cari kode di bawah ini:

<div id='header-inner'>
  <div class='titlewrapper'>
  <h1 class='title'>
    <b:include name='title'/>
    </h1>
  </div>
  <b:include name='description'/>
</div>

Ganti dengan kode di bawah ini:

<div id='header-inner'>
  <div class='titlewrapper'>
    <b:include name='title'/>
  </div>
  <b:include name='description'/>
</div>

4. Hilangkan heading tag title h1 untuk homepage yang selalu menjadi h1 di semua halaman artikel blog. Cara ini akan membuat heading tag title di homepage menjadi h2 saat berada di halaman artikel. Cari kode berikut:

          <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>

Ganti dengan kode dibawah ini:

    <b:includable id='title'>
  <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:blog.pageType != "static_page"'>
      <h1 class='title'>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
          <data:title/>
        </a>
      </h1>
      <b:else/>
      <h2 class='title'>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
          <data:title/>
        </a>
      </h2>
    </b:if>
    <b:else/>
    <h2 class='title'>
      <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
        <data:title/>
      </a>
    </h2>
      </b:if>
</b:includable>

5. Langkah berikutnya adalah membuat heading atau judul artikel blog anda menjadi h2 saat di halaman homepage blog dan menjadi h1 saat berada di halaman artikel itu sendiri (otomatis homepage title yang sebelumnya h1 berubah menjadi h2). sebelumnya, saya tekankan untuk jangan mengubah kode apapun yang terdapat di antara kode:

    <b:includable id='mobile-post' var='post'>
dan
</b:includable>

Yang perlu anda lakukan hanya mengganti kode yang tedapat di bawah:

              <b:includable id='post' var='post'>


Beberapa baris di bawah nya akan terdapat kode ini:

    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <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>
    </b:if>

Ganti kode tersebut dengan kode di bawah ini:

<b:if cond='data:post.title'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'>
<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' expr:title='data:post.title'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'>
<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' expr:title='data:post.title'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'>
<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' expr:title='data:post.title'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
</b:if>

Jika anda ingin mengubah heading tag untuk tanggal postingan, silahkan cari kode di bawah ini:

        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>

Ganti tulisan h2 di atas dengan h3 atau h4 atau sesuai dengan keinginan anda. Yang terpenting susunan nya adalah h1, h2, h3, dst. Hindari menambahkan heading yang susunannya melompat-lompat. Misalkan h1, h2, tanpa ada h3, kemudian ada h4, h5, dan seterusnya.

Klik Preview terlebih dahulu dan jika tidak di temukan error silahkan klik Save Templete. Seharusnya sekarang heading blog anda sudah dinamis dan tentunya lebih search engine friendly dalam mesin pencari. Untuk mengetahui apakah judul postingan sudah berubah jadi h1, silahkan anda buka halaman artikel manapun dari blog anda. Kemudian tekan Ctrl+U, saat muncul layar tambahan klik di sembarang tempat dari layar tersebut, selanjutnya tekan Ctrl+F dan ketikkan <h1. Sekarang seharusnya anda melihat di layar tambahan tersebut kode di bawah ini:

<h1 class='post-title entry-title' itemprop='name'>
Di sinilah judul artikel blog anda.
</h1>

Lakukan cara yang sama untuk cek halaman homepage blog dan buktikan kalau title homepage berubah menjadi h2 saat berada di halaman postingan. Tolong jangan ragu-ragu untuk bertanya dengan meninggalkan komentar di bawah ini. Segala saran dan masukan dari anda akan sangat membantu saya dan sahabat blogger lainnya.

daftar isi

1. Cara menghilangkan tanda obeng
2.Cara seo membuat dynamic heading di blog
3. Cara Menginstall Internet Download Manager yang Benar
CARA Mengetahui Optimasi SEO Onpage suatu Blog

4.  6 Cara Meng-Cek Posisi Web (Situs) Anda di Google dengan Tools Gratis

Pelajaran yang harus gue lakukan untuk Duplicate Title Tags






Jika link duplicate title tags ini dibuka maka akan terlihat postingan mana saja yang terindikasi sebagai duplicate title tags. Anda dapat melihat dua URL terbentuk untuk setiap postingan jika icon panah warna hitam disebelah kiri postingan ini di expand. Ada satu bentuk URL yang saya sendiri belum mengetahui asal-usulnya, URL ini sama seperti URL postingan pada umumnya namun ada penambahan karakter unik ?m=0 seperti gambar di bawah ini.



Cara Memperbaiki Duplicate Title Tags

Ada beberapa tutorial hasil browsing yang saya temukan untuk memperbaiki duplicate title tags ini di antaranya :


1. Menambahkan rel='canonical'

Jika menggunakan cara ini maka Anda harus menambahkan elemen rel='canonical' pada URL halaman Anda yang terindikasi sebagai duplicate title tags, seperti di bawah ini, pada bagian head postingan dalam mode HTML.

<link rel="canonical" href="http://www.multipaste.web.id/2012/04/mengatur-tampilan-widget-blogger.html"/>

Tentu saja hal ini akan sangat merepotkan jika postingan yang terdeksi sebagai title tags banyak, seperti yang saya alami terdapat 88 duplicate title tags, kemudian harus menambahkannya satu persatu pada setiap halaman tersebut, sungguh ini suatu pekerjaan yang membosankan.


2. Mengatur URL Parameters

Solusi kedua adalah mengatur URL Parameters di Google Webmaster Tools. Pada halaman dashboard, pilih menu Configuration, di bawah menu ini terdapat menu URL Parameters, pilih menu ini dan lihat apakah ada parameter m di dalamnya. Pada bagian parameter m ini klik link Edit di sebelah kanan dan atur setingan menjadi No: Doesn't affect page content (ex: track usage) seperti gambar di bawah ini. Jika Anda tidak menemukan parameter m ini, maka Anda dapat menambahkannya melalui tombol Add parameter.






3. Menambahkan parameter pada robots.txt

Jika kedua cara di atas belum dapat mengatasi duplicate title tags, maka Anda dapat menambahkan baris perintah pada pengaturan parameter robots.txt yang tidak mengizinkan robot mesin pencari untuk mengcrawl url unik yang berakhiran ?m=0, bentuk baris perintah yang ditambahkan pada pengaturan parameter robots.txt adalah seperti di bawah ini

Disallow: /?m=0
Disallow: /?m=1
Disallow: /*/*/*.html?m=0
Disallow: /*/*/*.html?m=1

Atau anda dapat melihat parameter robots.txt yang terpasang pada blog ini, karena saya telah menggabungkan cara kedua dan cara ketiga untuk mengatasi duplicate title tags pada Google Webmaster Tools dan Alhamdulillah berhasil.

Jika Anda punya pengalaman lain, saya mengajak Anda untuk berbagi informasi pada bagian komentar blog ini, agar pengetahuan kita menjadi bertambah, sukses untuk Anda dan happy bloging.