Cara Zone

Portal online Tips dan tutorial

Dapatkan tutorial terupdate gratis dengan berlangganan artikel

Wednesday, August 12, 2015

Cara Pasang Meta Tag Mobile Friendly

Semenjak diberlakukannya update "Mobilegeddon", dimana Mobile geddon adalah update dari google , mengutamakan situs mobile friendly untuk masuk ke dalam daftar prioritas index search engine, jadi kedepannya jangan harap blog Anda yang tidak mobile friendly bisa bersaing pada mesin pencari. Karena dari tahun ke tahun penggunaan internet dari piranti mobile terus melonjak , inilah mengapa google melakukan sistem baru di mesin pencariannya.

Cara Pasang Meta Tag Mobile Friendly
Jadi untuk bisa bersaing diserp terutama prioritas index search engine pada versi mobile tidak cukup hanya dengan template web/blog harus responsive, namun kita juga harus memasang meta tag yang tentunya mobile Friendly.

Pada artikel sebelumnya kami pernah membahas cara pasang meta tag terbaik, dan cukup mendapat respon yang baik dari para sahabat blogger yang ingin blognya lebih seo friendly. Namun untuk menghadapi era Algoritma Mobile geddon, maka untuk membuatnya lebih sempurna kita harus menambahkan meta tag untuk versi mobile

Sebelum melangkah bagaimana cara pemasangan Meta Tag Mobile Friendly, ada baiknya kita bahas kembali apa itu Meta Tag dan untuk apa mesti repot-repot pasang di blog.

Meta Tag :
adalah keterangan dari suatu halaman berdasarkan dari kalimat artikel postingan anda, elemen atau tag dalam bahasa pemrograman HTML atau XHTML yang dipakai untuk mengaplikasikan metadata dalam suatu halaman web.
Elemen meta ini harus diletakkan pada bagian “head” dalam HTML tersebut. Tag meta ini dapat dipakai juga untuk menyatakan deskripsi/keterangan dari suatu halaman web dan untuk menjelaskan mengenai kata kunci (keyword) yang terkait serta untuk metadata lain tanpa “head”.

Meta Tag Description :
Meta tag description digunakan untuk memberikan gambaran umum mengenai isi dari halaman web Anda. Ukurannya disarankan tidak lebih dari 200 karakter. Dan usahakan agar description ini bisa menjadi kalimat-kalimat yang letaknya di awal halaman web page yang bersangkutan. Contoh penulisan meta tag description adalah sebagai berikut :

Meta Tag Robots
Tujuan utama penggunaan meta tag robots adalah untuk menentukan halaman web yang mana bisa di-index oleh spider dan halaman web mana yang tidak. Tag ini sangat berguna sekali terutama jika seuatu website memakai frame untuk navigasinya. Tentunya kita tidak ingin menampilkan menu-menu dalam frame untuk dibaca oleh search engine.

Format dasar dari meta tag robots adalah sebagai berikut :
<meta name="robots" content="index | noindex | follow | nofollow">
Sebagai contoh, jika Anda ingin agar spider membaca main page, dan menelusuri semua link yang ada maka tambahkan perintah berikut ini :
<meta name="robots" content="index follow">
Dengan perintah ini spider akan meng-index main page Anda dan menjadwalkan untuk mengindex halaman-halaman lain yang bisa dicari melalui hyperlink (<a href="">).

Perintah berikut ini akan menginstruksikan agar spider tidak meng-index maupun menelusuri link yang ada pada suatu halaman web.
<meta name="robots" content="noindex nofollow">
Oke Anda sudah Cukup paham bukan dengan Meta Tag, jika belum silahkan baca ulang lagi, dan jika ga mau pening silahkan lanjut saja pada prakteknya.

Lalu Bagaimana Cara Pasang Meta Tag Mobile Friendly di Blogspot? Silahkan sobat ikuti langkah-langkah dibawah ini :

Sebelumnya kita lihat dulu Meta Tag bawaan Blogspot seperti pada gambar di bawah ini
Cara Pasang Meta Tag Mobile Friendly

Sangat sederhana dan tidak Seo friendly dan tidak mobile friendly, oke sekarang mari praktek

#Pertamax
Jika belum pernah pasang meta tag pada template blog Anda, silahkan pasang dulu karena Meta yang akan kita pasang berikut ini hanyalah menambahkan. Silahkan baca disini : cara pasang meta tag terbaik

  • Login ke Akun Blog masing-masing
  • Pilih Blog yang akan Anda pasangkan title tag
  • Klik blognya

    Cara Pasang Meta Tag Mobile Friendly
  • klik template

    Cara Pasang Meta Tag Mobile Friendly
  • klik edit HTML

    Cara Memasang MetaTag Pada blogspot

#Kedua
Setelah terbuka Silahkan Lihat dan cari kode ini :
<b:include data='blog' name='all-head-content'/>
Jika pada template Anda kode diatas tidak ada, silahkan letakkan tepat dibawah kode <head>

Pada Artikel sebelumnya Meta tag seo friendly lengkapnya seperti ini :

<meta content='P1-6SfnYegjfmkUtRPD4QF62k-YEvuaT3T-0KR1ckH4' name='google-site-verification'/>
<meta content='/qFUkQ0EONIdzHX2OHyyLLc5LTfJ5MD26/rfLx+FKh0=' name='verify-v1'/>
<meta content='AE5FF6568E9160547E058237A11F9DE9' name='msvalidate.01'/>
<meta content='9BC10362146' name='blogcatalog'/>
<meta content='rZJkOI4geGmt1zP4-BEwXnrLxBs' name='alexaVerifyID'/>
<meta content='-5;120' name='geo.position'/>
<meta content='id' name='geo.country'/>
<meta content='id-us-en' name='language'/>
<meta content='INDEX, FOLLOW, all' name='ROBOTS'/>
<meta content='no-cache' http-equiv='Pragma'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='Blogger' name='generator'/>
<meta content='-1' http-equiv='Expires'/>
<meta content='follow, all' name='Googlebot-Image'/>
<meta content='follow, all' name='Scooter'/>
<meta content='follow, all' name='msnbot'/>
<meta content='follow, all' name='alexabot'/>
<meta content='follow, all' name='Slurp'/>
<meta content='follow, all' name='ZyBorg'/>
<meta content='ALL' name='SPIDERS'/>
<meta content='ALL' name='WEBCRAWLERS'/>
<meta content='no-cache' http-equiv='Cache-Control'/>
<meta content='general' name='rating'/>
<link href='https://plus.google.com/112764290697005874210' rel='author'/>
<b:if cond='data:blog.pageType != "item"'>
<meta content=' Uraian atau Deskripsi tentang blog anda ' name='description'/>
<meta content=' keyword1 | keyword2 | keyword3 | keyword4 | keyword5 | keyword6 ' name='keywords'/>
</b:if>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://www.carazone.com/atom.xml' rel='alternate' title='carazone - Atom' type='application/atom+xml'/>
<link href='http://www.carazone.com/rss.xml' rel='alternate' title='carazone - RSS' type='application/rss+xml'/>

Untuk Melengkapinya dengan meta tag Versi mobile silahkan tambahkan code berikut diatas atau dibawah meta diatas

Berikut Codenya :

<!-- SEO Meta Tag mobile -->
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>
</b:if>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name=' Diskripsi Blog Anda '/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name=' Diskripsi Blog Anda '/>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
<b:else/>
<meta content='index,follow' name='robots'/>
</b:if>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>

<!-- SEO Title Tag -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.isMobile'>
<title><data:blog.pageTitle/> Versi Mobile</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<title>Arsip Untuk <data:blog.pageName/></title>
<meta content='noindex,nofollow,noarchive' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Halaman Tidak Ditemukan</title>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.isMobile'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
</b:if>
</b:if>
</b:if>

Hasil seperti ini

<meta content='P1-6SfnYegjfmkUtRPD4QF62k-YEvuaT3T-0KR1ckH4' name='google-site-verification'/>
<meta content='/qFUkQ0EONIdzHX2OHyyLLc5LTfJ5MD26/rfLx+FKh0=' name='verify-v1'/>
<meta content='AE5FF6568E9160547E058237A11F9DE9' name='msvalidate.01'/>
<meta content='9BC10362146' name='blogcatalog'/>
<meta content='rZJkOI4geGmt1zP4-BEwXnrLxBs' name='alexaVerifyID'/>
<meta content='-5;120' name='geo.position'/>
<meta content='id' name='geo.country'/>
<meta content='id-us-en' name='language'/>
<meta content='INDEX, FOLLOW, all' name='ROBOTS'/>
<meta content='no-cache' http-equiv='Pragma'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='Blogger' name='generator'/>
<meta content='-1' http-equiv='Expires'/>
<meta content='follow, all' name='Googlebot-Image'/>
<meta content='follow, all' name='Scooter'/>
<meta content='follow, all' name='msnbot'/>
<meta content='follow, all' name='alexabot'/>
<meta content='follow, all' name='Slurp'/>
<meta content='follow, all' name='ZyBorg'/>
<meta content='ALL' name='SPIDERS'/>
<meta content='ALL' name='WEBCRAWLERS'/>
<meta content='no-cache' http-equiv='Cache-Control'/>
<meta content='general' name='rating'/>
<link href='https://plus.google.com/112764290697005874210' rel='author'/>
<b:if cond='data:blog.pageType != "item"'>
<meta content=' Uraian atau Deskripsi tentang blog anda ' name='description'/>
<meta content=' keyword1 | keyword2 | keyword3 | keyword4 | keyword5 | keyword6 ' name='keywords'/>
</b:if>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://www.carazone.com/atom.xml' rel='alternate' title='carazone - Atom' type='application/atom+xml'/>
<link href='http://www.carazone.com/rss.xml' rel='alternate' title='carazone - RSS' type='application/rss+xml'/>

<!-- SEO Meta Tag mobile -->
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>
</b:if>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name=' Diskripsi Blog Anda '/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name=' Diskripsi Blog Anda '/>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
<b:else/>
<meta content='index,follow' name='robots'/>
</b:if>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<!-- SEO Title Tag -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.isMobile'>
<title><data:blog.pageTitle/> Versi Mobile</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<title>Arsip Untuk <data:blog.pageName/></title>
<meta content='noindex,nofollow,noarchive' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Halaman Tidak Ditemukan</title>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.isMobile'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
</b:if>
</b:if>
</b:if>

#Terakhir silahkan Simpan Semoga bermanfaat, jangan lupa jika ada masalah silahkan komentar.

19 comments:
Silahkan komentar
  1. terima kasih ilmunya mas.. akan saya coba

    ReplyDelete
  2. terima kasih mas infonya nambah lagi pengetahuan blogging saya dari sini

    ReplyDelete
  3. Terimakasih gan,, saya coba pakai yang ini

    ReplyDelete
  4. terima kasih informasinya
    bisa dicoba nih

    ReplyDelete
  5. Meta Tag yang di berikan di atas kita harus edit dulu jangan asal copy aja jangan sampai ke tipu

    ReplyDelete
    Replies
    1. Kami sudah jelaskan pada artikel sebelumnya cara edit Meta tag nya,.jadi harap baca artikel sebelumnya.
      Tidak ada maksud dan manfaat juga menipu pembaca...
      Terima kasih

      Delete
  6. nanya ya mas, kalau yang tetulis di ats terus di copy paste ke tempelate saya, apa bisa, makasih ya mas

    ReplyDelete
    Replies
    1. Sangat bisa gan, ganti deskripsi dan keywordnya saja

      Delete
  7. Gan masang kode meta tagnya udah saya coba, walau agak lama mahaminnya dibantu sama temen-temen yang udah agak ngarti akhirnya berhasil juga di simpen, semoga blog saya jadi tambah seo nantinya, terimakasih yaa gan ijin nyedot ilmu lainnya di blog ini biar saya tambah paham lagi.

    ReplyDelete
  8. 2016 ini apa masih sama atau ada perubahan ? , punya saya jadi banyak yang eror. terimakasih

    ReplyDelete
  9. Terimakasih untuk informasi yang telah diberikan,ini menjadi suatu informasi yang sangat patut untuk dibaca terutama sangat membantu dalam menambah wawasan disetiap daerah di seluruh Indonesia

    ReplyDelete
  10. Sip .. mantap pisan
    nambah2 pinter orang itu pahala Gan..
    Lanjutkan perjuanganmu .. he2

    ReplyDelete
  11. Terimakasih banyak atas ilmunya ,bagi kami yang masih newebie

    ReplyDelete
  12. Mantap dan keren, tapi bingung juga mau pake yang mana?

    ReplyDelete
  13. ini script yang di copy yang atas apa yang bawah mas..?

    ReplyDelete
    Replies
    1. yang atas gan yang ada kalimat
      Berikut Codenya :

      Delete

Silahkan Follow atau Like FP Cara Zone
Join Our Newsletter