Meta Tag SEO Terbaru 2020 untuk Blogger, Update Meta Tag Anda Sekarang Juga!

Kontributor Maki M.

Estimasi waktu membaca

Mengoptimasi meta tag merupakan cara terbaik untuk memberikan informasi sebuah situs kepada mesin pencarian seperti google, bing dan sebagainya. Tak hanya itu meta tag merupakan salah satu komponen terpenting yang harus diterapkan dalam situs atau blog sebagai langkah optimasi SEO onpage yang paling dasar.

Jika disederhanakan, meta tag adalah sekumpulan kode HTML yang dipasang pada sebuah situs atau blog ditulis pada bagian <head> yang berfungsi membantu mesin pencari atau media sosial untuk mengetahui rangkuman keseluruhan isi dari sebuah situs.

Seberapa Penting Meta Tag?

Agar mendapat tempat di hasil pencarian, sebuah situs atau blog harus menyertakan meta tag kedalam struktur kode blog nya, kecuali jika blog tersebut disetting untuk pribadi atau pembaca tertentu. Bisa dikatakan data yang akan muncul pada hasil pencarian sebagian besar bersumber dari meta tag.

Meta tag yang baik terseusun rapi serta lengkap akan membuat situs Anda lebih cepat terindeks oleh mesin pencari serta besar kemungkinan mendapat posisi yang tinggi pada hasil pencarian.

Hasil pencarian dari artikel ini

Apa yang Harus Ada Dalam Sebuah Meta Tag?

Meta tag yang paling standar adalah meta tag yang menyediakan beberapa informasi penting seperti Judul Situs, Desktripsi, Keyword, dan Gambar Thumbnail.

Jika keempat data diatas sudah ada pada meta tag Anda sebelumnya maka hal itu sudah cukup untuk bersaing di hasil pencarian. Tapi tidak hanya situs Anda yang menerapkan cara diatas, ada ribuan situs lain dengan niche serupa yang menerapkan hal yang sama bahkan dengan kualitas konten yang lebih baik dari situs Anda. Apakah Anda mampu bersaing dengan mereka?

Satu satunya kesempatan Anda adalah memaksimalkan meta tag Anda dengan menambahkan beberapa kode lain tak kalah penting untuk meningkatkan kualitas situs Anda. Lantas apa saja hal yang perlu Anda tambahkan dalam situs Anda? simak penjelasan dibawah:

Meta Open Graph

Sumber trafic/pengunjung sebuah situs tak hanya dari mesin pencari, sebagian besar juga bersumber dari sosial media. untuk itu juga penting untuk memberikan ringkasan informasi situs Anda kepada sosial media seperti facebook, Twitter dan sebagainya. Caranya adalah dengan menambahkan meta tag open graph pada situs Anda.

Site Authority

Berisi informasi kepemilikan dari sebuah situs, seperti nama pembuat situs tersebut link informasi pemilik situs, kode verifikasi webmaster dan lain sebagainya.

Meta Tag Robot

Meta tag ini berfungsi untuk memberikan informasi yang lebih kompleks pada robot mesin pencari, hal-hal penting yang biasa ditambahkan dalam meta tag ini adalah informasi bahasa situs Anda, lokasi situs Anda dan beberapa hal lainnya

Jika semua informasi diatas sudah Anda terapkan pada meta tag Anda, bisa dipastikan situs Anda akan menempati posisi tinggi pada hasil pencarian. Setidaknya situs Anda lebih cepat terindex dari pada biasanya.

Seperti Apa Penulisan Meta Tag yang Baik?

Tak hanya memberikan informasi yang lengkap, meta tag yang baik adalah yang tersusun rapi serta mudah difahami oleh pemilik situs itu sendiri, dengan merapikan susunan meta tag situs Anda, Anda tidak akan kesulitan untuk mengedit atau mengubahnya dika dibutuhkan dikemudian hari.

Dibawah ini kami akan membagikan meta tag terbaru dan terbaik menurut kami yang sudah digunakan situs ini, meta tag ini disusun lebih rapi agar lebih mudah untuk di modifikasi serta kami akan memberikan panduan untuk Anda mengedit beberapa bagian dari meta tag ini.

Berdasarkan pengalaman menggunakan meta tag ini, posisi situs ini jagodesain.com tidak terpengaruh bahkan setelah beberapa kali mengganti template berkat meta tag dibawah ini. Kami tidak mengatakan meta tag ini adalah yang paling sempurna, tapi setidaknya ini layak untuk dicoba karena jika kami saja berhasil maka Andapun pasti juga berhasil.

Tempelkan kode meta tag dibawah ini pada bagian <head> ... </head> di situs atau blog Anda, atau ganti meta tag yang sebelumnya Anda gunakan dengan meta tag dibawah ini:

<b:if cond='data:view.isMultipleItems'>
  <b:if cond='data:view.isHomepage'>
    <!--[ Homepage title ]-->
    <title><data:blog.title.escaped/></title>
    <b:elseif cond='data:view.search.query'/>
    <!--[ Search title ]-->
    <title><data:messages.search/>: <data:view.search.query/></title>
    <b:elseif cond='data:view.search.label'/>
    <!--[ Label title ]-->
    <title><data:blog.pageName.escaped/> - <data:blog.title.escaped/></title>
    <b:elseif cond='data:view.isArchive'/>
    <!--[ Archive title ]-->
    <title>Blog archive in: <data:blog.pageName.escaped/></title>
    <b:else/>
    <title>Blog: <data:blog.title.escaped/></title>
  </b:if>
  <b:elseif cond='data:view.isError'/>
  <!--[ Error title ]-->
  <title>Error 404: Not found</title>
  <b:else/>
  <!--[ SingleItem title ]-->
  <title><data:blog.pageName.escaped/> - <data:blog.title.escaped/></title>
</b:if>

<!--[ meta for browser ]-->
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=5' name='viewport'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>

<b:if cond='!data:view.isError'>
  <!--[ Browser data, description and keyword ]-->
  <link expr:href='data:blog.url.canonical' rel='canonical'/>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription.escaped' name='description'/>
    <b:elseif cond='data:view.isSingleItem'/>
    <meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' name='description'/>
    <b:else/>
    <meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' name='description'/>
  </b:if>
  <meta expr:content='data:blog.title.escaped + ", " + data:blog.pageName.escaped + ", Add_your_addtional_keyword_here "' name='keywords'/>
  <b:tag cond='data:view.isPost' expr:href='resizeImage(data:blog.postImageUrl, 0)' name='link' rel='image_src'/>
  
  <!--[ Generator and RRS ]-->
  <meta content='blogger' name='generator'/>
  <link expr:href='data:blog.homepageUrl.canonical path "feeds/posts/default"' expr:title='data:blog.title + " » Atom"' rel='alternate' type='application/atom+xml'/>
  <link expr:href='data:blog.homepageUrl.canonical path "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " » Feed"' rel='alternate' type='application/rss+xml'/>
  <link expr:href='data:blog.homepageUrl.canonical path "feeds/comments/default?alt=rss"' expr:title='data:blog.title + " » Comments Feed"' rel='alternate' type='application/rss+xml'/>

  <!--[ Theme color ]-->
  <meta content='#ffffff' name='theme-color'/>
  <meta content='#ffffff' name='msapplication-navbutton-color'/>
  <meta content='#ffffff' name='apple-mobile-web-app-status-bar-style'/>
  <meta content='yes' name='apple-mobile-web-app-capable'/>

  <!--[ Favicon ]-->
  <link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='120x120'/>
  <link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='152x152'/>
  <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
  <link expr:href='data:blog.blogspotFaviconUrl' rel='shortcut icon' type='image/x-icon'/>
  
  <!--[ Open graph ]-->
  <meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:title'/>
  <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
  <meta expr:content='data:blog.title.escaped' property='og:site_name'/>
  <b:if cond='data:view.isMultipleItems'>
    <meta content='website' property='og:type'/>
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>         
      <b:else/>
      <meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' property='og:description'/>
    </b:if>
    <b:else/>
    <meta content='article' property='og:type'/>
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>            
      <b:else/>
      <meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' property='og:description'/>
    </b:if>
  </b:if>
  <meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:image:alt'/>
  <b:if cond='data:blog.postImageUrl'>
    <meta expr:content='resizeImage(data:blog.postImageUrl, 0)' property='og:image'/>
    <b:else/>
    <meta content='Add_your_image_url_here' property='og:image'/>
  </b:if>
  
  <!--[ Twitter card ]-->
  <meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' name='twitter:title'/>
  <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
  <b:if cond='data:view.isMultipleItems'>
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>         
      <b:else/>
      <meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' name='twitter:description'/>
    </b:if>
    <b:else/>
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>            
      <b:else/>
      <meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' name='twitter:description'/>
    </b:if>
  </b:if>
  <meta content='summary_large_image' name='twitter:card'/>
  <meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' name='twitter:image:alt'/>
  <b:if cond='data:blog.postImageUrl'>
    <meta expr:content='resizeImage(data:blog.postImageUrl, 0)' name='twitter:image:src'/>
    <b:else/>
    <meta content='Add_your_image_url_here' name='twitter:image:src'/>
  </b:if>
    
  <!--[ Sife verification ]-->
  <meta content='xxxxxxxxxxxxxxxxx_g' name='google-site-verification'/>
  <meta content='xxxxxxxxxxxxxxxxx' name='msvalidate.01'/>
  <meta content='xxxxxxxxxxxxxxxxx' name='p:domain_verify'/>
  <meta content='xxxx_xxxxx-xxxxxxx' name='majestic-site-verification'/>
  <meta expr:content='data:blog.title.escaped' name='copyright'/>
</b:if>

Keterangan dan Panduan Penggunaan

Sebelum menyalin dan menempel meta tag diatas pada situs Anda, UBAHLAH! beberapa bagian yang ditandai dengan informasi dari situs Anda atau pada meta tag yang Anda gunakan sebelumnya.

Blog title / Judul Blog

Kelompok tag pertama ini berfungsi untuk menampilkan judul dari situs atau halaman tertentu pada blog pada hasil pencarian. Misal ada sebuah artikel baru yang dipublish maka judul artikel tersebut akan otomatis tertulis pada dalam kode ini, hasilnya pada mesin pencari bisa di dilihat pada gambar dibawah:

Aturan atau kondisi yang terdapat dalam tag ini antara lain adalah :

Judul laman error 404
Secara default hasil yang ditampilkan adalah Error 404: Page Not Found, Anda bisa menggantinya dengan judul lain sesuai keinginan misal Maaf! Halaman Tidak Ditemukan atau sebagainya

Judul pada halaman beranda
Menampilkan judul dari halaman Homepage situs Anda, Anda bisa menambahkan kalimat lain pada hasil pencarian misal seperti Nama Blog : Pusat Informasi Handphone Terbaru atau semisalnya dengan cara mengubah baris kode ini menjadi :

<!--[ Homepage title ]-->
<title><data:blog.title.escaped/> : Judul Tambahan</;title>

Hasilnya seperti contoh gambar dibawah ini:

Memang terlihat sederhana, tapi hal ini bisa nenambah kekuatan keyword yang ditarget situs Anda.

Judul pada halaman postingan dan halaman statis

Menampilkan judul halaman posting dan halaman static, defaulnya yang akan ditampilkan hanyalah judul dari postingan blog Anda, Tapi ada beberapa blog yang juga menambahkan judul blognya pada bagian ini sebagai penguat keyword blog nya contohnya seperti dibawah :

Daftar Handphone Ram 6Gb dengan Harga dibawah 3 Juta - Raja Android

Kami sudah mengubah judul blognya menjadi seperti diatas pada update meta tag terbaru. Sekarang kode untuk judul pada postingan adalah seperti dibawah ini:

<!--[ SingleItem title ]-->
<title><data:blog.pageName.escaped/> - <data:blog.title.escaped/></title>

Anda bisa mengubah tanda pisah diatas dengan tanda lain yang menurut Anda cocok seperti : atau |

Judul pada halaman index
Menampilkan judul pada halaman index blogger (selain homepage, posting dan halaman statis) yang pada blogger ditandai dengan /search pada url-nya, ada 4 kondisi yang ditulis untuk mampilkan judul yang berbeda pada halaman index blog Anda diantaranya :

Search : query pencarian - Menampilkan judul dari halaman pencarian pada blog Anda, secara otomatis kata kunci apapun yang ditulis oleh user akan tampil pada judul ini dan Anda juga bisa mengubah kata Search : pada baris ini dengan kata lain seperti Hasil Pencarian : atau kata lainnya. Contoh penerapan kode ini bisa Anda lihat pada halaman ini.

Nama Label - Judul Blog - Menampilkan judul halaman label pada blog Anda, jika user mengklik link label pada blog Anda maka bagian inilah yang akan ditampilkan sebagai judul.

Blog Archive in : Januari 2021 - Bagian ini adalah opsional yang artinya bisa Anda terapkan atau tidak Tapi seandainya Anda mengaktifkan fitur arsip atau menambahkan Widget Archive pada blog Anda, maka judul inilah yang akan tampil ketika user mengklik halaman arsip blog Anda.

Blog : Judul Blog - Jika semua kondisi diatas tidak terpenuhi maka judul inilah yang akan ditampilkan, biasanya judul ini akan tampil ketika user mengklik tombol navigasi Postingan lebih lama, Postingan lebih baru atau navigasi numbering pada blog Anda.

Kebanyakan blogger memilih untuk mencekal halaman ini untuk tampil di hasil pencarian, tapi pengaturan ini tetap layak dicoba untuk lebih mempercantik tampilan judul halaman blog Anda

Gambar Thumbnail

Meta tag ini berfungsi untuk menampilkan thumbnail/cuplikan gambar blog Anda, pada halaman postingan cuplikan gambar yang ditampilkan pada bagian ini adalah gambar pertama dari artikel Anda.

Jika artikel yang Anda tulis tidak memiliki gambar, maka yang akan ditampilkan adalah link gambar yang Anda sisipkan dalam tag ini, Ubahlah bagian yang ditandai pada baris ini dengan link logo blog Anda. (siapkan gambar logo blog Anda dengan ukuran minimal 300px x 300px)

<meta content='Add_your_image_url_here' property='og:image'/>

// ubah dengan link blog Anda, sebagai contoh hasilnya adalah seperti dibawah ini

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitcloCypqVF3HSP2LCa0Hmp2YqeaKWBM_iGNXteRKT4wpvePMKyGGvF0k-OUzWd1v67MLlv_fjXqOpKTJ_KhhMYy9oLdvcVgPVJMxlrqoOHjeMfunPF5flu9D02GopdCPzFDI4r1MqDMWv/s1600/jagodesain-logo.png' property='og:image'/>

Deksripsi Blog

Salah satu cara optimasi SEO Onpage adalah menambahkan deskripsi blog disetiap halaman, deskripsi ini akan ditampilkan pada hasil pencarian di bagian bawah judul blog seperti pada gambar dibawah ini:

Maka dari itu sebisa mungkin tambahkanlah deskripsi pencarian pada setiap Anda posting artikel, pada blogger ketika menulis artikel Anda bisa menuju bidang kanan dan klik tulisan Deskripsi Penelusuran, untuk lebih jelaskan Anda bisa lihat pada gambar dibawah ini:

Salah satu kelebihan dari meta tag yang dibagikan pada kali ini adalah disediakan alternatif deskrpisi ketika Anda tidak menuliskan deskripsi pada blog. Ketika tidak terdapat deskripsi pada sebuah postingan, otomatis paragraf pertama dari postingan tersebut akan ditampilkan menjadi desktripsi blog.

Favicon

Berfungsi untuk menampilkan icon pada platform IOS dan Android, Bagian ini otomatis terisi dengan favicon yang anda upload pada setelam Blogger. Tapi anda juga bisa mengubahnya dengan gambar yang lebih HD, caranya adalah seperti dibawah ini:

<!--[ Favicon ]-->
<link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='120x120'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='152x152'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='shortcut icon' type='image/x-icon'/>

// Contoh penerapan

<!--[ Favicon ]-->
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYVWWUv8Krk1ZLr-FU6XaYRR3b1PyqPy_4A3CmgLDzI82shK0bzjlLKWuOaI9qWZVZZjQzbmsfk2ZSih121LY-5yLTUD7NjHqEdqPZlMqG3afbG-t-WqgtJTL3qXJA7x0_gwH7NDzpouQy/s300/fletro-pro.png' rel='apple-touch-icon' sizes='120x120'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYVWWUv8Krk1ZLr-FU6XaYRR3b1PyqPy_4A3CmgLDzI82shK0bzjlLKWuOaI9qWZVZZjQzbmsfk2ZSih121LY-5yLTUD7NjHqEdqPZlMqG3afbG-t-WqgtJTL3qXJA7x0_gwH7NDzpouQy/s300/fletro-pro.png' rel='apple-touch-icon' sizes='152x152'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYVWWUv8Krk1ZLr-FU6XaYRR3b1PyqPy_4A3CmgLDzI82shK0bzjlLKWuOaI9qWZVZZjQzbmsfk2ZSih121LY-5yLTUD7NjHqEdqPZlMqG3afbG-t-WqgtJTL3qXJA7x0_gwH7NDzpouQy/s300/fletro-pro.png' rel='icon' type='image/x-icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYVWWUv8Krk1ZLr-FU6XaYRR3b1PyqPy_4A3CmgLDzI82shK0bzjlLKWuOaI9qWZVZZjQzbmsfk2ZSih121LY-5yLTUD7NjHqEdqPZlMqG3afbG-t-WqgtJTL3qXJA7x0_gwH7NDzpouQy/s300/fletro-pro.png' rel='shortcut icon' type='image/x-icon'/>

Theme Color

Ubah kode warna yang ditandai pada baris kode ini dengan warna dominan dari blog Anda, bagian ini berfungsi untuk mengubah warna address bar pada browser Google Chrome di android atau browser Safari pada IOS

Sife Verification

Bagian terakhir ini berfungsi untuk memverifikasi kepemilikan situs atau blog di beberapa situs tertentu. Dalam kode ini terdapat 4 kode verifikasi diantaranya adalah verifikasi untuk Google Webmaster / Search Console, Bing Webmaster, Pinterest Site Verification dan Majestic SEO Tools Verification.

Sementara ini tidak menyediakan tutorial cara mendapatkan kode verifikasi diatas, silahkan Anda mencari sendiri di google cara mendapatkannya.

Silahkan berikan komentar Anda setelah menggunakan meta tag ini dan silahkan ajukan pertanyaan jika ada kendala dalam penerapan meta tag diatas.

Ukuran huruf

Jarak baris

Bagikan postingan ini.

Bagikan di Facebook Kirim melalui Whatssapp Bagikan di X/Twitter Kirim melalui Telegram Tambah ke Pinterest Bagikan di LinkedIn Bagikan melalui Tumblr

jago desain