Senin, 29 Januari 2018

Cara Menampilkan Iklan Adsense di Paragraf Pertama Postingan

Cara menampilkan iklan adsense di paragraf pertama postingan artikel blogger merupakan salah satu penempatan memasang iklan yang baik. Cara ini membuat iklan google adsense agar muncul setelah enter pertama artikel atau dapat dikatakan pada alinea pertama artikel ketika kamu mengeditnya.

Iklan akan muncul pada posisi atas tepatnya setelah paragraf pertama selain daripada dibawah judul postingan, diakhir postingan ataupun ditengah postingan. Sehingga akan mudah dilihat oleh pengunjung blog. Untuk itu langsung saja ikuti cara menampilkan iklan google adsense pada paragraf pertama postingan blogger.

Cara Menampilkan Iklan Adsense di Paragraf Pertama Postingan

Cara Menampilkan Iklan Adsense di Paragraf Pertama Postingan

Langkah 1. Login akun blogger >> Tema >> Edit HTML >> Klik kiri kotak Edit HTML dan Cari (ctrl+f) kode dibawah ini. Secara default template blogger, kamu akan menemuinya dua kali. Ada yang untuk tampilan mobile (kode pertama) ataupun desktop (kode kedua). Jika ketemu kodenya lagi coba yang terakhir.
<data:post.body/>
Langkah 2. Tambahkan kode yang berwarna biru diantara <data:post.body/>
<div id='adsense-target'><data:post.body/></div>
Langkah 3. Copy dan Paste kode pengkondisian berikut diatas <data:post.body/> yang sudah diedit pada langkah 2. Tentunya kode iklan google adsense kamu sudah di parse >> https://opinionatedgeek.com/Codecs/HtmlEncoder
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='adsense-content' style="display:block;text-align: center">
Kode adsense yang telah diparse
</div></b:if>
Seperti gambar berikut:
Cara Menampilkan Iklan Adsense di Paragraf Pertama Postingan

Note :
Untuk mengubah posisi iklan menjadi menjorok ke kiri silahkan ganti kode pengkondisian yang bergaris bawah pada Langkah 3. dengan kode berikut. float:left; artinya ke kiri, jika ingin menampilkan ke kanan tinggal kamu ganti dengan float:right;
<div id='adsense-content' style="display: inline-block;float:left; margin:15px 15px 15px 0px">
Langkah 4. Tambahkan kode berikut tepat dibawah <div id='adsense-target'><data:post.body/></div> seperti contoh gambar diatas.
<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition,target.nextSibling);
}
}
var adscont = document.getElementById(&quot;adsense-content&quot;);
var target = document.getElementById(&quot;adsense-target&quot;);
var linebreak = target.getElementsByTagName(&quot;br&quot;);
if (linebreak.length &gt; 0){
insertAfter(adscont,linebreak[0]);
}
</script>
Note :
~ Untuk menampilkan iklan adsense pada paragraf kedua ganti angka 0 menjadi 2 pada tulisan berwarna merah
~ Untuk menampilkan iklan adsene dibawah heading tag h2 atau h3 ganti br menjadi h2 atau h3 pada tulisan berwarna biru

Langkah 5. Simpan Tema
Silahkan lihat tampilan iklan google adsense kamu akan muncul pada paragraf pertama di postingan dengan meggunakan kondisi br enter.

Minggu, 28 Januari 2018

Cara Menampilkan Iklan Adsense di Mobile Blog

Cara menampilkan iklan google adsense di tampilan mobile blogger pada perangkat seluler smartphone hp sangat diperlukan. Berhubung semakin majunya teknologi sehingga semakin banyaknya orang yang menggunakan smartphone android dan iphone mereka untuk menjelajah dunia maya. Dengan memasang iklan adsense di tampilan mobile adalah suatu kesempatan bagi blogger untuk menambah revenue.

Untuk google adsense sendiri tersedia layanan Page-Level ads dimana iklan google akan muncul secara overlay sticky dan full screen pada layar hape. Namun iklan responsive, 300x250 dan mobile banner 320x100 dapat digunakan juga. Untuk itu dapat kamu baca Cara Memasang Iklan Google Adsense ditengah Artikel Postingan dan Memasang Iklan dibawah dan diatas Posting Blog.
Cara Menampilkan Iklan Adsense di Mobile Blog

Penempatan Kode Iklan Google Adsense

Ada dua cara menampilkan iklan google adsense berdasarkan cara meletakkan kodenya.
Cara 1. Kode yang diletakkan melalui Tambahkan Gadget >> HTML/JavaScript
Cara 2. Kode yang disematkan pada body postingan blogger dengan encode kode iklan htmlnya.

Untuk menampilkan iklan google adsense pada tampilan mobile blogger kamu harus menggunakan tema seluler. Hal ini wajib dilakukan baik untuk cara 1 maupun cara 2.
~ Pada dashboard blogger pilih Tema >> klik icon gear pada tampilan seluler >> pilih Ya. Tampilkan tema seluler di perangkat seluler dan pilih tema seluler Khusus >> Simpan.
Cara Menampilkan Iklan Adsense di Mobile Blog

Cara Menampilkan Iklan Adsense di Mobile Blog

Cara 1. Untuk iklan adsense yang menggunakan fitur Gadget Blogger

Langkah 1. Tambahkan Gadget >> HTML/JavaScript >> Paste kode adsense dan Simpan.

Langkah 2. Setelah itu buka lagi Edit HTML/JavaScript adsense tadi >> Klik kiri alamat bar widget adsense dan geser ke Kanan. Kamu akan temukan nama HTML untuk widget itu.

Cara Menampilkan Iklan Adsense di Mobile Blog

Caranya sama seperti -->> Menampilkan Gadget Blogger di Mobile

Langkah 3. Lanjut ke Tema >> Edit HTML >> Klik kiri kotak kosong Edit HTML dan cari (ctrl+f) nama ID HTML adsense yang kamu buat.
Dengan menambahkan mobile='yes' (tampil di tampilan seluler), mobile='no' (tidak tampil di tampilan seluler), mobile='only' (hanya akan tampil di mobile) pada widget iklan adsense yang diinginkan seperti contoh dibawah ini.
<b:widget id='HTML4' locked='false' mobile='yes' title='Advertisement' type='HTML'>
Saran, jangan lupa gunakan tag kondisi blogger untuk menampilkan atau menyembunyikan iklan pada beranda, postingan dan laman statis di Cara Menyembunyikan dan Menampilkan Gadget di Blog.
Langkah 4. Simpan Tema

Cara 2. Untuk iklan adsense yang disematkan pada postingan blog

Namun untuk kode adsense yang disematkan ditengah postingan, dibawah judul postingan atau diakhir artikel blog silahkan mengikuti cara dibawah berikut:
Langkah 1. Cari kode dibawah ini :
<data:post.body/>
untuk template default blogger kode itu ada dua, untuk tampilan desktop dan mobile. Untuk tampilan mobile cari yang dekat
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
seperti gambar berikut:
Cara Menampilkan Iklan Adsense di Mobile Blog

Langkah 2. Letakkan kode iklan adsense yang telah diparse diatas atau dibawah <data:post.body/>. Kamu dapat kunjungi https://www.opinionatedgeek.com/codecs/htmlencoder untuk memparse kode iklan google adsense.

Kode <data:post.body/> merupakan postingan dari blog sendiri, jadi ketika kamu meletakkan kode iklan adsense yang telah diparse diatasnya berarti iklan akan muncul diatas postingan atau dibawah judul postingan. Jika kamu meletakkan kode iklan adsense yang telah diparse dibawahnya berarti iklan akan muncul diakhir postingan. Tapi untuk ditengah postingan silahkan baca Menampilkan Iklan Google Adsense ditengah Postingan Blog.

Saran, jangan lupa gunakan tag kondisi blogger untuk menampilkan atau menyembunyikan iklan pada beranda, postingan dan laman statis di Cara Menyembunyikan dan Menampilkan Gadget di Blog.

Langkah 3. Simpan Tema
Silahkan lihat blog kamu pada tampilan mobile melalui smartphone atau dengan mengunjungi https://alamatblog.blogspot.com?m=1

Jumat, 19 Januari 2018

Cara Defer Async Kode CSS Blogger

Kali ini saya bagikan cara menggunakan defer atau async kode css di blogger. Karena selain dari widget css bundle yang memblokir perenderan konten paruh atas di blog. Ada kode css lain yang biasa dipanggil untuk mempercantik tampilan blog seperti dari maxcdn dan font awesome. Biasanya kode css eksternal itu ada karena menggunakan template luar selain dari template default bawaan blogger.

Dan sudah pasti kamu sering melihatnya. Pertanyaannya bagaimana kita menggunakan async atau defer kode css eksternal itu? Biasanya untuk font awesome bisa disematkan inline pada ]]></b:skin> blogger, namun apabila kode external css lainnya tidak dapat disematkan didalam Edit HTML blogger dan tetap ingin kamu defer, itu juga bagus karena akan lebih simpel dan menghemat ukuran HTML blog.

Baca juga:
~ Cara menghilangkan javascript yang memblokir rendering di konten paruh atas
~ Cara menghilangkan css yang memblokir blogger

Tujuan Defer Kode CSS

Tujuannya jelas karena ingin mempercepat loading blog agar rendering kode eksternal ditunda dulu sehingga konten utama blog dapat ditampilkan untuk pengunjung. Karena loading yang lama dapat membuat pengunjung pergi dari blog.

Cara Defer Kode CSS

Langkah 1. Copy kode script defer dibawah ini dan gantikan url link kode css yang ingin di defer.
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
//]]>
</script>
Langkah 2. Letakkan kode yang telah di copy, diatas </head> blog kamu dan Simpan.

Sangat mudah bukan? Silahkan kamu cek dengan pagespeed insight milik google apakah kode css eksternal masih memblokir render konten paruh atasnya.

Cara Memasang Anti Adblock di Blog

Kali ini saya akan membagikan cara untuk memasang script anti-adblock dengan menampilkan konten alternatif berupa gambar ketika pengunjung menggunakan extension atau add-ons adblocker pada browsernya. Sehingga iklan google adsense anda yang tidak muncul akan digantikan dengan konten alternatif berupa gambar dengan tujuan pengunjung blog mau menonaktifkan adbcloker untuk domain pada blog kita.

Cara Memasang Anti Adblock di Blog

Mengapa user menggunakan Adblocker?

~ Iklan yang tidak tertata rapi sehingga menyulitkan pengunjung blog membaca konten atau bahkan konten tertutupi oleh iklan.
~ Loading yang lebih cepat, karena memang script dari iklan terhalang sehingga tidak perlu menampilkannya di tampilan blog.
~ Iklan pop up dan under. Banyaknya situs yang belum diterima Google Adsense membuat webmasternya memasang iklan pop up dan under dari penyedia jasa iklan selain google adsense. Sehingga sangat membuat risih pengunjung blog.

Sebelumnya saya telah membagi Bagaimana menyikapi pengunjung yang menggunakan adblocker. Karena alasan yang sudah saya sebutkan diatas sehingga mereka menggunakannya. Menurut anda logis bukan? Karena saya sendiri juga menggunakannya walaupun disisi lain Dewa Inside blog ini menampilkan iklan dari google adsense sebagain revenue tambahan.

Memasang Script Anti-Adblock Universal

Langkah 1. Copy kode script dibawah ini
<script>
    window.onload = function(){
    setTimeout(function() {
    var ad = document.querySelector("ins.adsbygoogle");
    if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {
    ad.style.cssText = 'display:block !important';
    $(".adsbygoogle").after('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuxGhYPvaaowrTP4-8tGTSrNbDe1MCHEt9dlqqgFJkbZieO_JpMcD35CoJoNWLqyZk66PPKCddOtw5rae6509LiCYzstGtfcdpJh7XBtfE_Er8ikqRY6UgKtusDd7viMROSrfXCydydxBH/s320/anti-ablock.jpg" alt="anti-adblock" width="300" height="250"/>');
    }
    }, 1000);
    };
</script>
<script async='async' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Jika kamu lihat ada script jquery, jika di blog kamu sudah ada cukup gunakan satu. Dan diatas sudah ditambahkan asinkronnya.

Langkah 2. Paste kode script diatas bisa diatas </body> atau </head> ataupun juga dengan Tambahkan Gadget >> HTML/JavaScript.

Note:
~ url link gambar dapat kamu ganti dengan gambar kreasimu sendiri.
~ width dan height dapat kamu sesuaikan keinginan.
~ 1000 = 1 detik delay setelahnya gambar akan dimunculkan.

Selamat mencoba dan tinggalkan komentar jika ada yang dirasa sulit atau error. Mudah bukan?

Rabu, 17 Januari 2018

Membuat Heading H1 pada Gambar Header Blog

Cara membuat gambar header blog menjadi heading H1 pada beranda dan H2 pada postingan atau laman statis di blogger. Karena pada dasarnya logo blog dengan platform blogger tidak memiliki heading tag, sehingga sangat buruk untuk SEO. Hanya judul blog yang menggunakan text saja yang memiliki heading H1. Untuk kombinasi dengan tutorial Heading Tag H1 pada Gambar Header Blog ini, kamu dapat membaca >> Cara Optimasi SEO Heading Tag Blogger untuk membuat judul postingan H1 pada postingan dan membuat judul postingan H2 pada beranda.

Membuat Heading H1 pada Gambar Header Blog

Membuat Heading H1 pada Gambar Header Blog

Langkah 1. Pada dashboard blogger Tema >> Backup dulu tema blog kamu. Setelah itu Edit HTML.

Langkah 2. Klik kiri didalam kotak Edit HTML dan cari (ctrl+f)
<div id='header'>
Gantikan dengan kode berikut :
<div id='header' itemscope='itemscope' itemtype='http://schema.org/Organization'>
Seandainya kode <div id='header'> tidak ada, coba cari dengan kode berikut :
<header>
Dan gantikan dengan kode dibawah ini:
<header itemscope='itemscope' itemtype='http://schema.org/Organization'>
Jika memang keduanya tidak ditemukan. Carilah secara hati-hati kode header yang menyerupai kedua kode diatas dan tambahkan itemscope='itemscope' itemtype='http://schema.org/Organization'>.

Langkah 3. Temukan kode gambar header blog yang hanya menampilkan gambar saja, cari yang sama atau seperti kode comment dibawah ini :
Show the image only
Tepat dibawah Show the image only kamu akan menemukan kode serupa seperti dibawah ini dan gantikan yang hanya dalam tag <a href=..... </a>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
Gantikan kode diatas yang didalam tag <a> dengan kode dibawah ini yang sudah dioptimasi heading seo untuk gambar header blogger.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<h1 itemprop='name'><a expr:href='data:blog.homepageUrl' itemprop='url' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:title='data:blog.title' expr:width='data:width' itemprop='logo' style='display: block'/><span><data:blog.pageTitle/></span></a>
</h1>
<b:elseif cond='data:blog.pageType == &quot;archive&quot;'/>
<h1 itemprop='name'><a expr:href='data:blog.homepageUrl' itemprop='url' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:title='data:blog.title' expr:width='data:width' itemprop='logo' style='display: block'/><span><data:blog.pageTitle/></span></a>
</h1>
<b:else/>
<h2 itemprop='name'><a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:title='data:blog.title' expr:width='data:width' itemprop='logo' style='display: block'/><span><data:blog.title/></span></a></h2></b:if>
Dapat kamu lihat kode yang diberi warna biru merupakan judul dari blog kamu yang memakai gambar header. Sehingga dapat kamu modifikasi sesuai dengan keinginan. Untuk membuat judul artikel H1 pada postingan dan H2 pada beranda, karena sebelumnya saya telah publish terlebih dahulu makanya tidak diikut serkatan disini.
Silahkan lihat >> Cara Optimasi SEO Heading Tag Blogger

Langkah 4. Secara default tema blogger, biasanya untuk css heading H1 dan H2 dibedakan font-size dan colornya. Untuk itu jangan lupa merubahnya pada ]]></b:skin>. Pada langkah 4 akan saya berikan contohnya.
Cari kode css berikut atau yang serupa tanda bisa #(pagar) ataupun .(titik):
#header h1 {
Gantikan dengan :
#header h1, #header h2 {
Cari kode ini:
#header h1 a {
Gantikan dengan :
#header h1 a,#header h2 a {
Dan yang paling penting adalah menambahkan kode berikut diatas ]]></b:skin>
#header h1 a,#header h2 a, #header h1 a:visited, #header h2 a:visited{color:#fff; font-size:10px;text-decoration:none;margin:0;padding:0}
.header h1 span, #header h2 span{text-indent:-999em; display:block;}

Langkah 5. Simpan Tema.
Kamu bisa cek apakah heading H1 muncul pada blog kamu yang hanya menampilkan gambar header saja tanpa text dan deskripsi di situs seperti:
https://www.seocentro.com/tools/seo/seo-analyzer.html
http://www.seoreviewtools.com/html-headings-checker/
Sedikit panjang namun worth untuk dicoba karena nilai SEO yang dicari dimana ketika gambar header display:block text judul blog dan deskripsi tapi masih dapat menggunakan heading H1 pada beranda dan H2 pada postingan dan laman statis. Selamat mencoba dan apabila ada kesulitan silahkan tanyakan pada kolom komentar dibawah.

Minggu, 14 Januari 2018

Klik Select Otomatis Semua Text Kode Blockquote Blogger

Fungsi Blockquote Blogger

Kita biasa menggunakan fungsi klik kiri mouse dan menggeser kursor untuk memblok tulisan. Entah itu pada microsoft office ataupun di peramban ketika kita sedang browsing online. Sehingga memudahkan kita untuk menyalin dan menempel ataupun menghapus semua text kode dan alamat link yang telah di select tadi.

Dan pada posting kali ini saya akan membagikan cara memblok semua text secara otomatis yang menggunakan fungsi tag <blockquote> ataupun <pre> di blog dengan 1x atau 2x klik mouse agar terpilih semua. Pada blogger sendiri menggunakan fungsi quote kutipan, yaitu menandai suatu konten tulisan dengan tanda petik pada dasarnya. Namun disini secara default fungsi quote blogger lebih membuat center konten yang dikutip agar lebih eye catching. Namun semua itu dapat disesuaikan menggunakan css atau kode html.

Biasa kita juga sering menggunakan fungsi quote kutipan untuk membalas dan menjawab pertanyaan atau komentar tertentu pada forum, semisal kaskus. Script ini sangat membantu untuk memilih text ataupun kode yang terlalu panjang di blog seperti tutorial select blockquote di blog ini menggunakan fungsi double click mouse.

Pilih semua tulisan pada tag blockquote atau pre

Langkah 1. Pada dashboard blogger >> Tema >> Edit HTML

Langkah 2. Klik kiri didalam kotak Edit HTML >> dan cari (ctrl+f) kode
</body>
Langkah 3. Copy kode berikut diatas atau sebelum kode </body>
<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;blockquote&quot;);
for (var i = 0; i &lt; pres.length; i++) {
pres[i].addEventListener(&quot;dblclick&quot;, function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
 }, false);
}
</script>
Note:
~blockquote dapat diganti dengan tag pre apabila blog kamu menggunakannya namun sepertinya jarang pada blogger default.
~dblclick adalah fungsi select text dengan 2x klik kiri mouse. Untuk menggantinya hanya dengan 1x klik mouse, ganti kode dblclick dengan -->> click.

Jumat, 12 Januari 2018

Cara Memasang Notifikasi Cookie di Blog

Memasang cookie pada blog dengan platform blogspot blogger ini diwajibkan oleh google. Karena mengikuti aturan hukum yang berlaku di negara Uni Eropa. Gunanya adalah meningkatkan pelayanan informasi lebih baik. Lebih lengkapnya --> https://www.google.com/policies/technologies/cookies/. Apalagi kamu menggunakan iklan layanan google adsense yang notabene menggunakan cookie untuk meningkatkan pelayanan iklan yang lebih sesuai untuk pemirsanya.
cookie blog

Ketika sedang membuka home blogger muncul pesan tentang kewajiban menampilkan notifikasi penggunaan cookie untuk pengunjung blog. Dan sebagai webmaster, kita bener-benar diwajibkan untuk memastikan bahwa pesan notifikasi pemberitahuan penggunaan cookie dapat tampil di pengunjung blog.
cookies

Memasang Kode Notifikasi Cookie Blogger

Kali ini saya akan membagikan alat generate plugin notifikasi cookie dari cookieconsent karena memang sangat mudah diterapkan.
Langkah 1. Kunjungi --> https://cookieconsent.insites.com/
Langkah 2. Klik download untuk membuka fiturnya
cookie consent

Langkah 3. Konfigurasi bentuk, warna, posisi dan tulisan dari notifikasi cookie kamu
cookie consent 2

Langkah 4. Copy kode yang sudah digenerate otomatis oleh cookieconsent
cookie consent code

Langkah 5. Letakkan kode script dan css notifikasi cookie yang sudah dicopy diatas </head> pada Edit HTML blogger dan Simpan Tema.

Memeriksa Fungsi Notifikasi Cookie

Untuk mengecek pemberitahuan notifikasi cookie berfungsi dengan baik, tentu kita tinggal mengunjungi alamat blog yang sudah dipasang kode script dan css cookie. Tunggu loading sampai selesai dan jika muncul pop notifikasi pemberitahuan penggunaan cookie maka kamu sudah berhasil memasang notifikasi cookie di blog.
Semoga artikel ini bermanfaat. Selamat mencoba.

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.