Cara Buat Template Blogspot Dengan AMP Google - SEO Blog

Header Ads

Cara Buat Template Blogspot Dengan AMP Google

Dalam tutorial ini saya akan coba mengulas sepintas cara membuat template blogspot dengan AMP Google. Berhubung saya masih coba-coba dengan AMP HTML ini jadi pembahasan disini hanya dibatasi pada elemen AMP Google yang wajib disertakan saja. Sementara template blogger yang akan dibuat juga hanya untuk kerangka template-nya saja.

Cara Buat Template Blogger Dengan AMP Google

Untuk script yang bersifat opsional seperti CSS dan lain-lain tidak disertakan, karena memang di bagian CSS untuk AMP tidak ada perbedaan sama sekali, penggunaannya masih tetap seperti biasa kecuali untuk elemen HTML ada sedikit perubahan yaitu tag img menjadi amp-img dan video menjadi amp-video, khusus untuk video dari youtube menggunakan tag amp-youtube.

Sepintas Tentang AMP HTML Google

Untuk lebih jelasnya apa itu AMP Google Anda dapat merujuk ke artikel pada halaman Cara Kerja AMP Google

Dalam penulisan web untuk AMP Google ada beberapa elemen wajib disertakan sebagai berikut:
  • Dimulai dengan <!doctype html>
  • Untuk tag HTML menggunakan <html ⚡> atau <html amp>
  • Harus menyertakan link kanonik ke AMP Google <link rel="canonical" href="$SOME_URL" />, agar Google dan teknologi lain mendukung AMP dapat mendeteksi versi AMP dari artikel Anda. Link kanonik ini juga berfungsi untuk mencegah terjadinya duplikasi meta tag baik untuk judul ataupun deskripsi.
  • Menyertakan meta data schema.org <meta charset="utf-8"> dan <meta name="viewport" content="width=device-width,minimum-scale=1"> pada tag head, untuk membuat artikel Anda layak tampil di search carousel Google
  • Menyertakan AMP JS <script async src="https://cdn.ampproject.org/v0.js"></script> berfungsi untuk kecepatan loading dalam merender halaman guna menampilkan video, image dan iframe
  • Menyertakan <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>

Aturan dasar penulisan kode AMP HTML

Disarankan membaca Cara Membuat Halaman AMP Compatible pada halaman artikel blog ini sebelumnya.

Ada beberapa hal mendasar perlu diperhatikan dalam penulisan kode AMP HTML perlu diketahui berikut ini:
  • Untuk script external hanya dibolehkan dengan menggunakan asynchronous yaitu async.
  • Hanya boleh menggunakan satu buah tag <style>, apabila ada penambahan maka gunakan <style amp-custom>
  • Tidak boleh menggunakan CSS inline seperti <div class='sidebar' style='margin-top:0;padding:10px'>
  • Script tidak diperbolehkan menggunakan attribute type='text/javascript'
  • Untuk multimedia gunakan tag img menjadi amp-img dan video menjadi amp-video, khusus untuk video dari youtube menggunakan tag amp-youtube

Kerangka Dasar Halaman AMP HTML

Mari kita lihat karangka dasar halaman web berbasis AMP HTML saya kutip dari situs resmi AMP Project
<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Implementasi AMP HTML ke Template Blogspot 

Sekarang mari kita implementasikan beberapa komponen di atas ke dalam template dasar blogspot:

Dimulai dari komponen Top-level wajib ada

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML amp='amp' lang="en">

Kemudian komponen heading dan seterusnya

<!-- S:komponen heading template -->
<head>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <title itemprop='name'><data:blog.pageTitle/></title>
  <b:else/>
    <title itemprop='name'><data:blog.pageName/> | <data:blog.title/></title>
  </b:if>

  <!-- S:link kanonik ke AMP HtML -->
  <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
  <!-- E:link kanonik ke AMP HTML -->

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

  <!-- S:komponen meta data -->
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>
  <!-- tuliskan meta tag anda disini diseusaikan dengan kebutuhan template yang ada -->
  <!-- E:komponen meta data -->

  <!-- S:Komponen skin -->
  <b:skin>
    /* kode css disini */ 
 body {background :white}
  </b:skin>
  <!-- E:Komponen skin -->

  <style amp-custom='amp-custom'>
    <!-- css custom code silahkan tulis di sini -->
    body {
      background-color: white;
    }
    h2 {
      font-size: 26px;
      color: red;
      background-color: whitesmoke;
    }
    amp-img {
      background-color: gray;
      border: 1px solid black;
    }
    
  </style>

    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>

 <!-- S:Komponen style yang wajib ada -->
    <style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <!-- E:Komponen style yang wajib ada -->
  
  <!-- S:Komponen script yang wajib ada -->
    <script async='async' src="https://cdn.ampproject.org/v0.js"></script>
  <!-- E:Komponen script yang wajib ada -->

  <!-- S:Komponen Javascript tambahan jia ada -->
  <script async='async' src='http:www.example.com/example.js'/>
  <!-- E:Komponen Javascript tambahan jia ada -->

</head>
<!-- E:komponen heading template -->

Komponen body serta komponen utama blog

<body>
  <!-- S:Google Tag Manager Optional -->
  <noscript><amp-iframe height='0' src='//www.googletagmanager.com/ns.html?id=GTM-M7L5N8' style='display:none;visibility:hidden' width='0'/></noscript>
  <!-- E:Google Tag Manager Optional -->

  <!-- S:Komponen utama blog -->  
  <b:section id='header' class='header' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Header1' locked='true' title='Testground (Header)' type='Header'/>
  </b:section>
  
  <b:section id='nav' class='nav' maxwidgets='1' showaddelements='yes'>
    <b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
  </b:section>
  
  <b:section id='main' class='main' maxwidgets='' showaddelements='yes'>
    <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
  </b:section>
  
  <b:section id='sidebar' class='sidebar' maxwidgets='' showaddelements='yes'>
    <b:widget id='CustomSearch1' locked='false' title='Search' type='CustomSearch'/>
    <b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/>
  </b:section>
  
  <b:section id='footer' class='footer' maxwidgets='' showaddelements='yes'>
    <b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
  </b:section>
  <!-- E:Komponen utama blog -->  
  
</body>
</HTML>

Javascript dan css bawaan template blogspot tidak digunakan karena tidak valid AMP HTML Google.

Saya sudah mencoba implementasi tersebut diatas dan hasilnya dapat Anda lihat di blog saya yang lain di blog Bantu Blogger sebagai demonya saja.

Image Source: http://www.niemanlab.org/

Lihat juga:
Diberdayakan oleh Blogger.
Sora Templates