All Head Content Blogspot

Jika kita menggunakan Platform Blogger atau Blogspot, kita pasti tau apa itu All Head Content. Banyak Blogger-blogger dari Indonesia yang membahas, mempelajari, misal untuk Validasi HTML5 seperti dalam postingan di Blog Kang Ismet, untuk isi daripada All Head Contents yang saya dapat melalui postingan tersebut ialah :

  • Favicon
  • Canonical url
  • RSS
  • OpenID
  • Generator
  • Meta Deskripsi
  • dan masih banyak lagi, cukup ruwet melihatnya :D

Nah, kebutuhan saya disini misal jika saya menggunakan Platform Blogger dan saya ingin membuat Template Responsive juga ingin membuat simple isi daripada head, dimana saya hanya membutuhkan, favicon, canonical, meta deskripsi, title, dan image source. Bagaimana cara membuat nya? Note: dengan catatan, ini merubah dari template default yah.

  • Hapus All Head Content
<b:include data='blog' name='all-head-content'/>
  • Hapus Meta Viewport
    <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>
  • Hapus Meta Title
    <title><data:blog.pageTitle/></title>

Lalu pasangkan ini:

<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'/>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
  <b:else/>
  <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <title><data:blog.title/></title>
  <b:else/>
  <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  <title>Error 404 | <data:blog.title/></title>
  <b:else/>
  <b:if cond='data:blog.pageName == &quot;&quot;'>
  <title>Search Posts | <data:blog.title/></title>
  <b:else/>
  <title><data:blog.pageName/> | <data:blog.title/></title>
  </b:if>
  </b:if>
</b:if>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:blog.postImageThumbnailUrl'>
  <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
  </b:if>
</b:if>

Kesimpulan mengenai apa yang saya gunakan yaitu:

  • Charset
  • Viewport
  • Meta Deskripsi
  • Title
  • Canonical
  • Favicon

Sebagai contoh saja hasilnya akan seperti ini:

<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta content=" - dBlogskies" name="description">
<title>dBlogskies</title>
<link href="http://dblogskies.blogspot.com/" rel="canonical">
<link href="http://dblogskies.blogspot.com/favicon.ico" rel="icon" type="image/x-icon">

Nah cukup simple bukan? menurut saya sih simple hehehe untuk apa yang saya butuhkan, semoga saja berguna.


Author: Mohamad Fahmi

Saya adalah seorang part-time blogger, co-founder DroidLime.com, saya besar dan tinggal di Jakarta. Menyukai hal-hal yang berkaitan dengan Web, Desain, Musik, Internet dan SEO.

Ikuti saya di Github.

Comments on “All Head Content Blogspot”