Rabu, 10 Januari 2018

Pentingnya Meta Tag Deskripsi?

Apa itu meta tag deskripsi?

Meta tag deskripsi adalah penjelasan singkat mengenai isi dari blog, situs atau laman terkait. Sehingga google akan lebih mudah menampilkan pada halaman hasil mesin pencari mereka yang artinya adalah SEO.
Sebagai contoh sederhana ketika kita menulis kata kunci di mesin pencari google, maka tampilannya sebagai berikut :

meta tag deskripsi

Pentingnya meta tag deskripsi?

Seperti dijelaskan secara singkat diatas fungsi dari meta tag deskripsi, Matt Cutts yang merupakan insinyur perangkat lunak dari google mengatakan bahwa mereka meggunakan meta tag deskripsi sebagai acuan dalam meningkatkan hasil pencarian google untuk suatu situs, tidak seperti meta tag kata kunci yang mereka anggap tidak perlu.


Walaupun begitu tidak semua entri dari blog ini menggunakan meta tag deskripsi. Saya secara pribadi membiarkan robot google untuk menghasilkan deskripsinya sendiri, namun untuk posting yang sekiranya penting saya menambahkannya manual.

Menggunakan meta tag deskripsi

jika ingin mengoptimalkan penggunaan meta tag deskripsi, ada beberapa hal yang perlu anda ketahui sebagai berikut:
  • Gunakan 150 huruf (Google telah mengupdate untuk maksimal huruf meta tag deskripsi adalah 300) untuk deskripsi, anda dapat memeriksanya dengan situs penghitung huruf seperti, https://www.lettercount.com/ ataupun pada google translate, karena selain sebagai alat penerjemah juga menghitung jumlah karakternya. walaupun nantinya google akan memotongnya secara otomatis apabila berlebih.
  • Relevansi antara deskripsi dengan konten dari laman blog

Kita dapat membiarkan robot google untuk menelusuri seluruh isi dari situs atau lalu membuat sendiri deskripsi mengenai konten terkait. Namun kita juga dapat memberikan deskripsi itu sendiri secara manual. Baik pada alamat situs ataupun setiap postingan.
  • Untuk deskripsi situs
a. menambahkan manual pada Tema --> Edit HTML --> pada kotak HTML klik kiri dan cari CTRL+F <head>. Gunakan format dibawah dengan deskripsi dari blog anda sendiri.
<meta content='dewainside.blogspot.com menyajikan Tutorial Blogger, Tips Blog, SEO, Gadget Blogspot, Template Blogspot, CSS, HTML, Javascript, dan jQuery' name='description'/> 
b. pada Setelan --> Preferensi penelusuran --> Edit Deskripsi --> Aktifkan deskripsi penelusuran dengan mencentang Ya lalu isi deskripsi sesuai dengan konten dari situs dan Simpan perubahan.

meta tag deskripsi blogger

  • Untuk setiap postingan
a. menambahkan manual pada Tema --> Edit HTML --> pada kotak HTML klik kiri dan cari CTRL+F <head>. Gunakan format dibawah dengan alamat link dari entri anda dan deskripsi dari entri terkait.

<b:if cond='data:blog.url == &quot;https://dewainside.blogspot.com/2010/05/cara-agar-blog-terdeteksi-search-engine.html&quot;'>
<meta content='cara agar blog terdeteksi di mesin pencari seperti google dan bing sehingga artikel, konten dan postingan dapat muncul dan tampil pada SERP google dan bing' name='description'/>
</b:if>
b. pada Pos --> pada sisi kanan Entri --> Deskripsi Penelusuran
meta tag deskripsi entri

Namun pada kenyataannya ada beberapa dari posting saya yang tidak ada meta tag deskripsinya namun teratas pada serp google. Sebagai salah satu contoh adalah entri ini : membuat link open new tab
menurut saya itu dikarenakan artikel sangat lama yang secara otomatis dibuatkan deskripsinya oleh robot google namun tetap berguna walaupun memang untuk bersaing pada posisi teratas dengan isi yang sesederhana itu tidaklah susah.

Selasa, 12 Desember 2017

Menghilangkan gambar obeng dan kunci di Blog

Apa itu gambar obeng dan kunci?

obeng dan kunci Gambar icon obeng dan kunci merupakan fitur quick edit gadget blogger yang muncul ketika kita sedang dalam keadaan login dengan akun google. Sehingga memudahkan kita untuk mengedit widget blogger dengan cepat tanpa harus menuju dashboard blogger --> layout.

Namun sayangnya gambar obeng dan tang itu dapat muncul juga di pengunjung blog seperti halnya gambar pensil, apabila kita telah menghapus widget.css bundle blogger untuk menambah kecepatan blog setelah mengujinya di pagespeed insight milik google. Sehingga dapat mengurangi nilai estetika tampilan blog di pengunjung.

Menghilangkan gambar obeng dan kunci

Untuk menghilangkan gambar obeng dan tang di blog dapat dilakukan 2 cara dengan menyembunyikan menggunakan kode css atau menghapus / menyembunyikan kode html, yaitu sebagai berikut :
Langkah 1. Untuk itu langsung saja buka dashboard blogger > Tema > Edit HTML

Cara 1 : menyembunyikan dengan css

Langkah 1a. Pada kotak Edit HTML cari (CTRL+F) kode
]]></b:skin>
Langkah 1b. Letakkan kode css berikut diatasnya
.quickedit{display:none;}
Maka akan terlihat seperti ini:
.quickedit{display:none;}
]]></b:skin>
Langkah 1c. Simpan Template
jika cara diatas tidak berhasil silahkan coba cara ke 2 untuk menghapus gambar obeng dan kunci.

Cara 2 : menyembunyikan atau menghapus kode html

Langkah 1.a Dengan mencari dan menghapus satu per satu kode dibawah berikut sebanyak jumlah widget blog kamu pada kotak Edit HTML.
<b:include name='quickedit'/>
Kalau saya pribadi lebih prefer dengan menambahkan <!-- TEXT -->. Karena lebih mudah untuk mencarinya lagi ketika dibutuhkan. Berlaku untuk semua yang ada  didalam <body> Edit HTML blogger. Sehingga untuk quick edit blogger akan menjadi seperti ini :
<!-- b:include name='quickedit'/ -->
Fungsi dari <!-- TEXT --> ini sendiri adalah "comment" atau bisa disebut sebagai keterangan dan biasa digunakan pada html body dari suatu blog untuk memberi keterangan pada suatu kode html. Karena kode html apapun yang ada didalamnya akan diabaikan untuk berfungsi atau tampil.

Minggu, 10 Desember 2017

Menghapus Gambar Pensil di Blog

Gambar icon pensil di blog merupakan fitur quick edit postingan yang memudahkan blogger untuk mengedit postingan yang diinginkan tanpa harus menuju dashboard Postingan blogger terlebih dulu. Sama halnya dengan Gambar obeng dan kunci yang muncul pada tampilan pengunjung blog karena kita telah menghapus widget bundle.css blogger.

Menghapus gambar pensil

Langkah 1. lihat pada Tata Letak --> Edit Blog Posts
Menghapus Gambar Pensil di Blog

Langkah 2. pada Opsi Halaman Entri --> hilangkan  tanda centang pada Tunjukkan Pengeditan Cepat
Menghapus Gambar Pensil di Blog

Langkah 3. Simpan perubahan.

Selasa, 05 Desember 2017

Kolom Komentar Tidak Muncul di Tampilan Mobile Blog

Berikut saya akan bagikan cara memperbaiki kolom kotak komentar blogger yang tidak muncul pada versi tampilan kustom template mobile blogger dengan menambahkan kode css.
Kesalahan ini bisa terjadi karena template yang kamu gunakan bukan bawaan default dari blogger atau sebelumnya pernah menggunakan template eksternal lalu kembali ke template default blogger. Sehingga terjadi kesalahan yang menyebabkan tidak munculnya kolom kotak komentar pada tampilan mobile view.

Memperbaiki Kolom Komentar

Langkah 1. Pada dasbord blogger Tema > Edit HTML

Langkah 2. Klik di dalam kotak Edit HTML dan CTRL + F kode berikut
]]></b:skin>
Langkah 3. Letakkan kode berikut di atas ]]></b:skin>
.mobile .blogger-iframe-colorize {
display: block !important;
}.blogger-iframe-colorize {
display: block !important;
}

kolom komentar tidak muncul di tampilan mobile
Edit HTML
Langkah 4. Simpan

Selanjutnya kamu dapat memeriksa apakah kode css-nya bekerja dengan benar menggunakan smartphone android, iphone atau windows phone kalian ataupun pada komputer desktop dengan menambahkan ?m=1 pada akhir alamat blog kamu seperti contoh : https://dewainside.blogspot.com/?m=1

Jumat, 09 Juni 2017

Menghilangkan CSS yang Memblokir di Blog

Ketika sobat menggunakan pagespeed insights dari google untuk memeriksa kecepatan loading blog sobat, dan memakai blogger sebagai hosting blog sobat, pasti muncul saran pengoptimalan yang memungkinkan yaitu menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas. Karena memang ada kode javascript (.js) atau cascading style sheets (.css) bawaan blogger yang dirender dari luar dan disematkan dalam bentuk link alamat pada template default dari blogger.

Untuk menghapus kode css widget blogger dan membuat loading blog menjadi lebih cepat, kita dapat memperbaikinya dengan memasukkan kode css eksternal itu ke dalam tema html dari blog kita pada tubuh dari tag head. Seperti yang saya lakukan pada blog dewainside ini. Sobat dapat memeriksanya sendiri kalau memang penasaran.

Note : Dengan menghapus kode widget bundle.css blogger biasanya akan membuat munculnya gambar obeng dan kunci serta pensil yang dapat muncul di tampilan pada pengunjung blog. Anda dapat menghilangkannya dengan cara berikut : Menghilangkan gambar obeng dan kunci atau menghapus gambar pensil.

Menghilangkan widget css bundle yang memblokir perenderan di konten paruh atas

Cara 1. Menghilangkan dengan b:css='false'

Cukup dengan menambahkan kode b:css='false' pada html template awal blog kamu.
b:css ='false'
b:css ='false'

Cara 2. Menghilangkan dengan mengubah tag head

Langkah 1. Mengganti kode html tag pembuka dan penutup head
<head>     dengan     &lt;head&gt;
dan pada tag penutup head :
</head>     dengan     &lt;/head&gt;&lt;!--<head/>--&gt;
**Kalau dicek lagi masih ada bundle.css yang memblokir maka lanjut ke langkah 2. Biasa hal ini terjadi untuk template default bawaan blogger. Umumnya tidak terjadi pada template external.

Langkah 2. Memasukkan kode css ke dalam format html
Lihat link widget bundle.css blogger di pengujian pagespeed insight pada situs yang sobat uji.
link widget bundle.css blogger
link widget bundle.css blogger
Untuk lebih mudahnya berikut di bawah sudah saya cantumkan alamat link kode bundle.css dari blogger untuk tampilan desktop ataupun mobile.
https://www.blogger.com/static/v1/widgets/1171200566-widget_css_mobile_2_bundle.css
https://www.blogger.com/static/v1/widgets/3213516723-css_bundle_v2.css
Setelah sobat membuka dua link css berbeda di atas, copy konten dari kode css blogger tersebut dan paste sesuai dengan pengkondisian tampilan mobile dan desktop pada tulisan yang saya beri warna merah di bawah ini :
Untuk lebih mudahnya, sobat dapat menggunakan notepad++ atau langsung buka Edit HTML pada Tema blog sobat.
&lt;head&gt;
.
.
.
<b:if cond="data:blog.isMobile">
<style type="text/css">
------KODE CSS_Mobile_2_Bundle.css DISINI --------------
</style>
<b:else/>
<style type="text/css">
------KODE CSS_2_Bundle.css DISNI --------------
</style>
</b:if>
.
.
.
&lt;/head&gt;&lt;!--<head/>--&gt;
Masukkan kode di atas yang sudah sobat maksimalkan sesudah tag pembuka &lt;head&gt; atau sebelum tag penutup &lt;/head&gt;&lt;!--<head/>--&gt; yang sobat edit pada Langkah 1 seperti gambar berikut:

Langkah 3. Simpan Tema blogger sobat.

Selamat blog anda sudah terhindar dari JavaScript dan widget CSS bundle yang memblokir perenderan di konten paruh atas.

Sabtu, 18 April 2015

Cara Memasang Kotak Komentar Facebook di Blog

Memasang Kotak Komentar Facebook di Blogger

Memasang kotak komentar facebook di blogger dengan model tab. Dimana kolom komentar akan terbagi menjadi 2 tab, yaitu tab komentar blogger dan tab komentar facebook. Widget ini sangat cocok untuk meningkatkan interaksi dan komunikasi media sosial facebook. Apalagi kita ketahui bahwa semua orang pasti memiliki akun facebook dan biasanya selalu login "ingat saya" di browser komputer atau laptop pribadi mereka. Contoh gambar seperti yang terlihat pada gambar dibawah ini:

Tab Komentar Facebook dan Blogger

Cara Memasang Kolom Komentar Facebook

Langkah 1. Pada dashboard blogger --> Template --> Edit HTML --> klik kiri area kosong kotak Edit HTML dan Cari (CTRL+F) kode  berikut:
<div class='comments' id='comments'>
Edit HTML


Langkah 2. Copy dan Paste kode berikut dibawah dari kode <div class='comments' id='comments'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfLIP-gCxrJOOZKWH9nO5sgWNSG36r2j1bbSbkp1Jpif7U3Fv8sR_Po33UyVDhkiy5tLsCqw97B34yAqGBAcZHXN7Ih4Z7JvGjaa2K3Q2vOvixeK1wiG5ERu-a8P1uGzSmJ2oj37d1xwn0/s1600/Facebook+Icon.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img alt='blogger tab' class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEise0v9yW4lJwF2zUKpbN9uQsKZ9hd6rQgaorRpQeqCwLZ7viT9ap7HSlDkXXlKnygMNlgKjaDgdsB7F-bqE8JgJ63oDmcDmo5D_VNGKIf0j0OdUwQY4o2F2JbUZYwIx_Hf2cisqXQNQCKw/s1600/Blogger+Icon.png'/> <data:post.numComments/> Comments</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='550'/></b:if></div>
<div class='comments comments-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='187715554575764' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.comments-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();}</script>
<style>.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}</style>
Catatan: Ganti tulisan Merah dengan ID Fans Page Facebook anda. Untuk mengetahui ID dari laman penggemar berikut saya berikan contoh: https://www.facebook.com/pages/Dewa-Inside/187715554575764

Langkah 3. Simpan Template

Silahkan lihat blog dan apabila berhasil, Selamat anda telah memasang kolom komentar facebook di blog anda dengan model tab. Sekian dan semoga bermanfaat bagi sobat blogger semua. :)

Jumat, 17 April 2015

Cara Memasang Tombol Pin it Pinterest di Blog

Memasang Tombol Pin It Pinterest

Memasang tombol pin it pinterest pada setiap gambar di blogger itu cukup mudah. Walapun anda tidak harus memiliki akun pinterest terlebih dahulu. Namun ada baiknya anda membuat akunnya ya di https://www.pinterest.com/. Kenapa? Karena kita dapat mendaftarkan blog yang kita miliki di akun pinterest, sehingga nantinya dapat muncul tulisan "situs terverifikasi". Selain itu tentunya menambah backlink ke blog dan apalagi anda memiliki banyak teman di akun pinterest anda. Tentu sangat disayangkan kalau ada kesempatan emas seperti itu. Tidak seperti facebook dan twitter yang harus memiliki popularitas yang tinggi dan mengirimkan beberapa persyaratan untuk verifikasinya.

Tombol Pin it Pinterest

Fungsi Tombol Pin it

Fungsi dari tombol ini adalah sharing ke sosial media untuk setiap gambar yang ada pada blog anda. Sama halnya seperti tombol g+1, like facebook ataupun retweet twitter. Namun pinterest ini terbatas khusus untuk gambar saja.

Memasang Tombol Pin it

Langkah 1. Kunjungi situs --> Pembuat Tombol Pin It pinterest

Langkah 2. Pilih Tombol Pin It --> Gambar Mengambang, anda dapat mengedit (Tipe Tombol dan Tampilan) yang disediakan oleh developer pinterest dan dapat dipratinjau. Lalu Copy kode yang ada pada bagian bawah.

Tombol pin it

Copy kode tombol pin it

Langkah 3. Buka akun blogger --> Template --> Edit HTML --> klik kiri area kosong Edit HTML dan Cari (CTRL+F) kode berikut:
</head>
Langkah 4. Paste kode tombol pin it diatasnya dan Simpan Template.

Catatan : Perlu untuk diketahui bahwa gambar yang memiliki dimensi lebar dan panjang yang terlalu kecil tidak akan memiliki tombol hover pinterest. Dikarenakan tombol pin it sendiri yang lebih besar dari gambar yang akan dipasangkannya.

Selesai dan sekarang setiap gambar yang ada pada blog anda akan memiliki tombol pin it pinterest yang hover ketika kursor mouse didekatkan ke gambar. Selamat mencoba dan semoga bermanfaat bagi sahabat blogger semua.