Contoh Template AMP HTML Atau Accelerated Mobile Pages Template Untuk Blogspot
● Apa itu AMP HTML ?
Accelerated Mobile Pages Project baru dirilis pihak Google dalam sebulan terakhir ini.
Secara singkat, yang dimaksud dengan AMP HTML atau Accelerated Mobile Pages HTML adalah suatu struktur web yang meminimalisasi penggunaan JavaScript, CSS dan HTML.
Menurut keterangan pihak Google, dengan menerapkan Accelerated Mobile Pages ( AMP ) pada sebuah web/blog dapat meningkatkan keterlihatan sebuah blog oleh pemirsa.
Sebab Visi dasar dari Accelerated Mobile Pages Project atau AMP Project atau AMP HTML adalah supaya para webmaster dapat membuat suatu halaman web/ blog dengan kecepatan loading yang tinggi atau cepat, tanpa terlalu dipengaruhi oleh script JS dan atau lainnya.
Dalam hal ini AMP HTML dapat dibuat pada struktur web/blog yang sudah ada, namun penggunaan CSS, HTML dan JavaScript dibatasi supaya web/blog memiliki kecepatan loading yang tinggi sehingga lebih cepat diakses. Yang pada gilirannya dapat meningkatkan trafik blog.
Bisa disimak juga :
Dan prioritas utama dari AMP HTML ini adalah para pengguna Web Mobile. Dan anda pasti tahu bahwa para pengguna web mobile makin hari makin bertambah banyak.
● Prinsip Kerja AMP HTML
Secara mendasar, prinsip kerja dari AMP HTML adalah hanya dengan menambahkan AMP JavaScript library, tanpa mengubah struktur utama/lama dari sebuah web/blog.
Dengan menambahkan AMP JS library pada struktur web/blog yang biasa maka sudah bisa mencukupi aspek AMP HTML.
Demikian halnya untuk kode CSS tidak ada perubahan apapun.
Namun untuk kode HTML harus dilakukan sedikit perubahan pada cara penulisannya. Sebagai contoh tag img atau video menjadi amp-img dan amp-video.
Untuk bisa melakukan perenderan secara cepat, maka harus digunakan AMP Javascript Library, yang akan merender halaman dan menampilkan video, gambar, iframe dan lainnya secara asynchronous.
Dengan menambahkan AMP JS Library, akan mencakup :
- AMP JS Library, yang mengelola pemuatan sumber daya eksternal untuk memastikan halaman di render lebih cepat.
- Sebuah validator AMP yang menyediakan cara bagi pengembang web untuk dengan mudah memvalidasi bahwa kode mereka memenuhi spesifikasi AMP HTML.
- Beberapa elemen kustom, yang disebut komponen HTML AMP, yang membuat pola umum mudah diimplementasikan.
● Markup yang harus ada pada AMP HTML, sekurangnya adalah :
- Dimulai dengan <!doctype html>
- Menyertakan <html amp>.
- Menyertakan <link rel="canonical" href="$SOME_URL" />, pada tag head untuk mengetahui versi AMP HTML.
- Menyertakan <meta charset="utf-8">.
- Menyertakan <meta name="viewport" content="width=device-width,minimum-scale=1">pada tag head.
- Menyertakan AMP Javascript Library <script async src="https://cdn.ampproject.org/v0.js"></script> pada tag head.
- Menyertakan <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> pada tag head.
● Hal yang harus diperhatikan pada AMP HTML
Selain hal yang disebut di atas beberapa hal yang harus diperhatikan ketika membuat struktur web/blog dengan menggunakan AMP HTML diantaranya adalah :
- Tidak boleh ada dua tag <style>, apabila ada penambahan maka gunakan <style amp-custom>, itupun hanya satu saja yang diizinkan.
- Tidak boleh membuat inline CSS seperti <aside class='sidebar' style='margin-top:0;padding:10px'>.
- Script harus external dan menggunakan async.
- Script tidak diperbolehkan menggunakan attribute type='text/javascript'
- Tidak boleh menggunakan tag img tapi harus amp-img
● Contoh Template AMP HTML Atau Accelerated Mobile Pages Template Untuk Blogspot
Itu adalah beberapa keterangan mendasar dan sangat penting tentang AMP HTML sebagaimana yang bisa disarikan dari informasi pihak Google – dan tentu saja ditambah dari beberapa sumber lainnya – terutama sekali dari blognya Kang Ismet.
Meskipun tampak cukup “nritik”- panjang lebar keterangannya - namun pada kenyataannya untuk mengaplikasikan keterangan di atas dalam sebuah Template AMP HTML atau Atau Accelerated Mobile Pages Template Untuk Blogspot, bukanlah sebuah perkara yang mudah.
Terlebih bagi pengelola web/blog ( webmaster ) yang awam terhadap sistem pengkodean, plus males ( seperti admin blog ini ).
Sebab agar dapat diterapkan sebagai Template AMP HTML untuk blogspot, selain harus “mentaati” batasan-batasan di atas, penambahan atau modifikasi yang harus dilakukan terbilang sangat banyak, mulai dari :
- Bagian head
- Bagian Bagian Meta Tag dan Link
- Bagian Style
- Bagian Skin
- Tata Letak halaman ( page lay out )
- CSS
- Javascript
- Gambar
- Hingga melakukan tes validasi
Bagi pengeblog macam awak ini, bisanya mengharapkan agar segera ada mastah-mastah yang rajin-rajin untuk membuat sebuah contoh Template AMP HTML untuk blogspot.
Syukur-syukur ada Template AMP HTML untuk blogspot yang siap pakai yang bisa dibagi-bagikan ( mintanya gratis ), sehingga dapat membantu semua blogger lainnya.
Hanya saja untuk saat ini untuk mencari dan menemukan contoh Template AMP HTML untuk blogspot yang siap pakai sepertinya masih sangat susah.
