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.
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'>
<!--<head>--><head>
<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 <!--<head>--><head>
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 ==
"item"'>
<meta expr:content='data:blog.postImageUrl'
property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrlZ2wLSJGjxqAXUXTvAjzhzMXES-vzqGIMyC8KwwFOK8E_VqKGG2tHRFXrxbiCUKaNS0jjRdLyYW4n-AisCTFw93I2NQRla58Coz_5_Fujuc-2MIWpJ9UfZNSrcB9G5Ih961_a0rnmi4W/s200/Kontakmedia+Square-min.png'
property='og:image'/>
</b:if>
<!—Akhir Meta Tak Penting-->
<!—Markup Untuk Optimasi SEO-->
<script type='application/ld+json'>
{ "@context" :
"http://schema.org",
"@type" : "Organization",
"url" :
"http://www.kontakmedia.com/",
"contactPoint" : [
{
"@type" : "ContactPoint",
"telephone" : "+62-878-8893-4333",
"contactType" :
"Customer Service"
} ] }
</script>
<script type='application/ld+json'>
{ "@context" :
"http://schema.org",
"@type" : "Website",
"name" : "Kontakmedia",
"url" :
"http://www.kontakmedia.com/",
"sameAs" : [
"http://www.facebook.com/kontak.media.persada",
"http://twitter.com/UgaPamungkas",
"https://plus.google.com/u/0/107743115082449841377/"]
}
</script>
<!—Markup Untuk Optimasi SEO-->
<!—CSS Reset-->
<!--<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.
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-->
<!--</head>--></head>
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.
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
Demikianlah artikel dari Kontakmedia yang berjudul Merancang Homepage Blogger Valid AMP HTML (1), semoga bermanfaat. Dan terima kasih untuk Anda yang telah berkunjung ke blog ini.