all-head-content Meta Tag Serba Guna untuk Template Blogger

Menambahkan tag meta pada template blogger anda bisa mendapatkan lebih banyak lalu lintas dari mesin pencari seperti Google, Yahoo, Bing, yandex dan lainnya. Terutama meta deskripsi yang paling penting.

Meta tag adalah tag yang menjelaskan situs Anda dan memberi tahu mesin pencari tentang situs keberadaan situs anda. Menambahkan meta tag merupakan faktor penting dalam SEO (Search Engine Optimization). Meta tag memungkinkan mesin pencari mengindeks halaman web Anda dengan lebih cepat dan akurat. Dengan kata lain, Meta tag berkomunikasi dengan mesin pencari dan memberi tahu lebih banyak informasi tentang situs anda dan membuatnya terindeks dengan benar dan akurat.

Dari sekian banyak meta tag yang ada di template blogger, hanya ada dua meta tag yang harus anda pehatikan. Kedua meta tag ini sangat penting, karena akan memberi tahu mesin pencari tentang informasi blog. Kita harus menambahkan dua meta tag utama ke bagian kepala (head) template. Kedua met tag tersebut adalah:

Meta description, yaitu Meta yang menggambarkan situs Anda.
Meta Keywords, yaitu meta tag yang menceritakan tentang kata kunci blog/situs

Berikut adalah cara menambahkan kedua meta tag tersebut ke dalam template blogger (blogspot).

<meta content='Sistem Jaringan Komputer' name='title'/>
<meta content='Belajar Jaringan komputer TKJ' name='description'/>
<meta content='lan,router,wireless,ip,public,local,network,jaringan' name='keywords'/>
<meta content='Iwan Setiawan' name='author'/>

A. Meta Tag Serbaguna

Selain meta tag di atas, meta tag lainnya juga sangat penting dalam membantu meningkatkan traffic dan mempercepat pengindekan. Ketika anda membuka template blogger, mungkin anda akan merasa bingung kaena banyak sekali meta tag yang digunakan. Namun, rasa bingung anda akan segera hilang, karena Google telah menyediakan meta tag super serba guna yang dapat digunakan diseluruh template blogger.

Meta tag ini dikelola oleh blogger, dimana konten ini disimpan di server mereka. Bertujuan untuk memudahkan Blogger menambahkan semua bagian yang diperlukan dalam SEO yang biasanya berada di antara <head> dan </head>

Template bawaan Blogger Versi 2 ke atas, secara default sudah ada perintah yang disematkan untuk memanggil perintah meta tag. Nama meta tag tersebut adalah all-head-content. Penulisannya dalam template blogger seperti di bawah ini.

<b:include data='blog' name='all-head-content'/>

Meskipun kita lihat skripnya sangat sedikit, ternya isi meta tag all-head-content sangat lengkap. Bila kita bedaha atau kita ekstrak isi lengkap dari meta tag all-head-content seperti di bawah ini:

<b:includable id='all-head-content'>
  <meta expr:content='&quot;text/html; charset=&quot; + data:blog.encoding' http-equiv='Content-Type'/>
  <b:if cond='data:widgets'>
    <b:comment>Chrome, Firefox OS and Opera</b:comment>
    <meta expr:content='data:skin.vars.body_background_color' name='theme-color'/>
    <b:comment>Windows Phone</b:comment>
    <meta expr:content='data:skin.vars.body_background_color' name='msapplication-navbutton-color'/>
  </b:if>
  <data:blog.latencyHeadScript/>
  <data:blog.mobileHeadScript/>
  <meta content='blogger' name='generator'/>
  <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
  <b:if cond='data:blog.adultContent'>
    <meta content='adult' name='rating'/>
  </b:if>
  <link expr:href='data:view.url.canonical' rel='canonical'/>
  <data:blog.feedLinks/>
  <b:tag cond='data:view.featuredImage' expr:href='data:view.featuredImage' name='link' rel='image_src'/>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
  </b:if>
  <b:include name='openGraphMetaData'/>
  <data:blog.ieCssRetrofitLinks/>
  <!--[if IE]><script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script>
<![endif]-->
</b:includable>

Skrip kode all-head-content di atas, biasanya berlaku pada HTML Blogger versi 2 ke atasa, sedangkan pada HTML Blogger versi 1, kode all-head-content menghasilkan kode seperti di bawah ini.

 <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link href='https://membuattemakustom.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://membuattemakustom.blogspot.com/' rel='canonical'/>
<link href='https://membuattemakustom.blogspot.com/feeds/posts/default' rel='alternate' title='Membuat Blog - Atom' type='application/atom+xml'/>
<link href='https://membuattemakustom.blogspot.com/feeds/posts/default?alt=rss' rel='alternate' title='Membuat Blog - RSS' type='application/rss+xml'/>
<link href='https://www.blogger.com/feeds/5584625439020352970/posts/default' rel='service.post' title='Membuat Blog - Atom' type='application/atom+xml'/>
<link href='https://www.blogger.com/profile/10624324989863141903' rel='me'/>
<!--Can't find substitution for tag [blog.ieCssRetrofitLinks]-->
<meta content='https://membuattemakustom.blogspot.com/' property='og:url'/>
<meta content='Membuat Blog' property='og:title'/>
<meta content='Ini adalah blog percobaan.' property='og:description'/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->

B. Mengoftimalkan Meta Tag all-head-content

Yach namanya juga bawaan atau default, pasti jauh dari sempurna. Tapi meskipun bawaan meta tag all-head-content sangat membantu bagi anda yang malas membuat skrip meta atau bagi mereka yang baru belajar koding. Nach, karena meta tag all-head-content belum sempurna, pada bagian ini kita akan mengoftimalkan fungsi meta tag all-head-content.

Contoh skrip di bawah ini adalah penyempurnaan dari skrip serba guna meta tag all-hean-content.

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
<meta content='width=1100' name='viewport'/>
    </b:if>
<meta content='max-age=31536000' http-equiv='Cache-Control'/>
    <b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<meta expr:content='data:blog.title' property='og:title'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<meta expr:content='data:blog.title' property='og:title'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;index&quot; and data:blog.url != data:blog.homepageUrl and !data:blog.searchLabel and !data:blog.searchQuery'>
    <title><data:blog.pageTitle/></title>
<meta expr:content='data:blog.title' property='og:title'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <title><data:blog.pageTitle/></title>
<meta expr:content='data:blog.title' property='og:title'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta content='summary' name='twitter:card'/>
<meta content='@iwanse' name='twitter:creator'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
    </b:if>
    <b:if cond='data:blog.searchLabel'>
<title><data:blog.pageName/> &#8212; Label - <data:blog.title/></title>
<meta expr:content='data:blog.title + &quot; membahas artikel dengan Label &quot; + data:blog.pageName + &quot;. &quot;' name='description'/>
    </b:if>
    <b:if cond='data:blog.searchQuery'>
<title><data:blog.pageName/> Pada <data:blog.title/></title>
<meta expr:content='data:blog.title + &quot; membahas artikel dengan Label &quot; + data:blog.pageName + &quot;. &quot;' name='description'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
    </b:if>
<meta expr:content='data:blog.title' name='twitter:site'/>

Nach sekarang blog Anda sudah full Search Engine Friendly. Jika Anda menghadapi masalah dalam penggunaan meta tag, rajin rajinlah membaca dan mencari artikel lainnya di Google. Asah terus kemampuan anda dan tingkatkan skill anda dalam hal blogger.

Warnet Dapurnet

Internet Cafe

all-head-content Meta Tag Serba Guna untuk Template Blogger

A. Meta Tag Serbaguna

B. Mengoftimalkan Meta Tag all-head-content

Silahkan Berkomentar, Kakak...! Bunda...!

Posting Komentar