Merancang Homepage Blogger Valid AMP HTML (1)


Blogger memiliki tiga bagian utama yaitu Homepage, Single Post, dan Static Page. Ketiga-tiganya harus valid AMP HTML bila memang ingin berkiblat ke teknologi baru yang satu ini.

Kita mulai dengan Homepage terlebih dahulu. Homepage dikenali sebagai dua macam hal yaitu nama blog dan nama domain. Adapun domain yang saya maksud adalah TLD. Mengapa harus yang TLD dan bukan sub domain dari Blogspot? Nanti akan saya jelaskan.

Tentang panduan menyusun web atau blog berbasis AMP telah lengkap dijelaskan di situs pengembang amp html. Dan pada artikel saya ini akan dibahas tentang implementasinya untuk Blogger. Sebagai catatan, implementasi pada Blogger memang lebih sulit dibanding pada Wordpress.

Pada Wordpress self hosting telah tersedia plugin AMP-nya, sedangkan untuk Blogspot kita harus telaten memodifikasinya bagian perbagian.

Oh ya, apakah anda merasakan bahwa Blog saya ini cukup cepat ketika diakses? Ya, itu karena dengan susah-payah saya telah menerapkan AMP. Benar-benar susah-payah karena saya memang belum menjadi seorang pakar AMP. Hehehe.



Menyusun Bagian Header


<!—Pembuka -->
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML amp='amp'>
&lt;!--<head>--&gt;&lt;head&gt;
<meta charset='utf-8'/>
<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>
<!—Akhir Pembuka -->

Untuk kode <head> saya memodifikasinya menjadi &lt;!--<head>--&gt;&lt;head&gt; Tujuannya agar css dan javascript bawaan Blogger bisa di-disable secara maksimal. Tentu saja masih ditambah dengan beberapa modifikasi pada kode </head>, <body>, dan </body>.

<!—Link Penting -->
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.url' rel='amphtml'/>
<link href='http://www.kontakmedia.com/feeds/posts/default' rel='alternate' title='Kontakmedia - Atom' type='application/atom+xml'/>
<link href='http://www.kontakmedia.com/feeds/posts/default?alt=rss' rel='alternate' title='Kontakmedia - RSS' type='application/rss+xml'/>
<link href='https://www.blogger.com/feeds/5415361236701470684/posts/default' rel='service.post' title='Kontakmedia - Atom' type='application/atom+xml'/>
<link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://www.kontakmedia.com/' rel='openid.delegate'/>
<!—Akhir Link Penting-->

<!—Meta Tak Penting -->
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='1539578036353824' property='fb:app_id'/>
<meta content='689589373' property='fb:admins'/>
<meta content='P8bV1MgPHYLBts82GPvjKim975HQ62TjatD25314lZE' name='google-site-verification'/>
<meta content='2C8E3BF8487DDF6F1C6AD92D4C24CBC9' name='msvalidate.01'/>
<meta content='Ci0hDuKoAJYC3PJf8OsMJ_0aSGE' name='alexaVerifyID'/>
<meta content='74611126d5f8e6b3' name='yandex-verification'/>
<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:if>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://lh3.googleusercontent.com/-5toT3bsUTQ0/Vkqsoadn1oI/AAAAAAAALEY/gkSTcviFNlAOgcBT3J5MW7bwjOTOKNp-ACCo/s200/Kontakmedia%2BSquare-min.png' property='og:image'/>
</b:if>
<!—Akhir Meta Tak Penting-->

<!—Markup Untuk Optimasi SEO-->
<script type='application/ld+json'>
{ &quot;@context&quot; : &quot;http://schema.org&quot;,
  &quot;@type&quot; : &quot;Organization&quot;,
  &quot;url&quot; : &quot;http://www.kontakmedia.com/&quot;,
  &quot;contactPoint&quot; : [
    { &quot;@type&quot; : &quot;ContactPoint&quot;,
      &quot;telephone&quot; : &quot;+62-878-8893-4333&quot;,
      &quot;contactType&quot; : &quot;Customer Service&quot;
    } ] }
</script>
<script type='application/ld+json'>
{ &quot;@context&quot; : &quot;http://schema.org&quot;,
  &quot;@type&quot; : &quot;Website&quot;,
  &quot;name&quot; : &quot;Kontakmedia&quot;,
  &quot;url&quot; : &quot;http://www.kontakmedia.com/&quot;,
  &quot;sameAs&quot; : [ &quot;http://www.facebook.com/kontak.media.persada&quot;,
    &quot;http://twitter.com/UgaPamungkas&quot;,
    &quot;https://plus.google.com/u/0/107743115082449841377/&quot;]
}
</script>
<!—Markup Untuk Optimasi SEO-->

<!—CSS Reset-->
&lt;!--<b:skin><![CDATA[*//*]]></b:skin>
<!—Akhir CSS Reset-->

Catatan : Sudah banyak yang membahas tentang bagaimana cara menerapkan CSS Reset untuk validasi HTML5. Tapi rupanya AMP HTML menghendaki lain. Kode CSS Reset di ataslah yang justru diperlukan untuk validasi AMP HTML. Saya mendapatkan ini melalui eksperimen.

<!—CSS Wajib-->
<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>
<!—Akhir CSS Wajib-->

<!—CSS Custom-->
<style amp-custom='amp-custom'>
--- Cantumkan css anda sendiri ---
</style>
<!—CSS Custom-->

<!—External JS Wajib-->
<script async='async' src='https://cdn.ampproject.org/v0.js'/>
<!— Akhir External JS Wajib-->

&lt;!--</head>--&gt;&lt;/head&gt;

Itulah kode untuk bagian header yang diterapkan pada blog saya. Bila anda ingin menerapkannya, tentu tinggal menyesuaikan settingannya untuk link dan meta tag.

Baru bagian header ya, belum membahas body dan footer.

Sebelumnya : Mari Menyambut Accelerated Mobile Pages

IKLAN INI BUKAN BAGIAN DARI ARTIKEL

No comments: