Kumpulan Template AMP Blogger Terbaik

Accelerated Mobile Pages atau AMP adalah proyek open source yang memformat halaman situs atau blog sedemikian rupa sehingga dapat mempercepat waktu loading dan proses randering dengan sangat cepat pada perangkat mobile. AMP Project memang pada awalnya bertujuan untuk digunakan menampilkan halaman situs bagi pengguna perangkat mobile yang memiliki akses internet terbatas (lambat).

AMP Project merupakan salah satu project dari google agar dapat memberi pengalaman bagi pengguna internet untuk kenyamanan dan kecepatan berselancar didunia maya. Dengan didukungnya laman AMP pada sebuah situs diharapkan dapat mempercepat akses hingga 4X lebih cepat dari biasanya, Selain itu laman AMP juga dapat menghemat data internet hingga 10X lipat. Format artikel AMP telah digunakan oleh lebih dari 200 penerbit konten, termasuk Blogger, WordPress dan sudah digunakan di beberapa platform populer yang berbeda seperti pencarian Google, LinkedIn, Medium, Nuzzel, Pinterest, Twitter dan situs besar lainnya. Tampaknya format AMP akan menjadi standar de facto untuk konten situs yang dilihat pada perangkat mobile. Sementara pemain utama seperti Apple dan Facebook dapat tetap menggunakan format mereka sendiri, komunitas pengembangan seluler yang lebih luas cenderung menerapkan format AMP yang open source.

Informasi Singkat

Proyek Laman Seluler yang Dipercepat (AMP) adalah teknologi penerbitan situs web yang dijalankan Google yang dirancang sebagai pesaing Artikel Instan Facebook.

Proyek AMP diumumkan oleh Google pada 7 Oktober 2015 setelah diskusi dengan para mitranya di European Digital News Initiative (DNI), dan penerbit berita dan perusahaan teknologi lainnya di seluruh dunia, tentang peningkatan kinerja web seluler. Lebih dari 30 penerbit berita dan beberapa perusahaan teknologi (termasuk Twitter, Pinterest, LinkedIn dan WordPress) pada awalnya diumumkan sebagai kolaborator dalam Proyek AMP.

Halaman AMP pertama kali muncul untuk pengguna web pada Februari 2016, ketika Google mulai menunjukkan halaman web versi AMP dalam hasil pencarian mobile. Tautan awalnya ke halaman AMP dibatasi pada bagian "Top Stories" dari hasil pencarian seluler Google; pada September 2016 Google mulai menautkan ke konten AMP di area hasil pencarian mobile utama. Tautan AMP dalam pencarian Google diidentifikasi dengan ikon.

Menurut salah satu pendiri Proyek AMP, Malte Ubl, AMP awalnya bernama PCU, yang merupakan singkatan dari Portable Content Unit.

Sumber : Wikipedia

Apa bedanya AMP dengan Mobile Friendly?

Mobile friendly hanya menyesuaikan layar tempat dimana situs dibuka tanpa menghilangkan fitur fitur yang ada di dalam situs.

Contoh : Penggunaan widget blog related post, apabila pada versi AMP akan dinonaktifkan sedangkan untuk versi mobile friendly tetap ada, namun tampilannya disesuaikan.

Begitu juga dengan form yang ada di situs, jika di laman AMP dihilangkan. Pada mobile friendly tetap ada.

Secara tampilan mobile friendly jauh lebih bagus dari AMP, tapi secara kecepatan akses versi AMP jauh lebih cepat dari versi Mobile Friendly.

AMP memanfaatkan framework dan keahlian Anda untuk membuat halaman. AMP didukung oleh berbagai platform, dan kompatibel di semua browser. Ekosistem AMP mencakup 25 juta domain, 100+ penyedia teknologi, dan platform terkemuka, yang mencakup area penerbitan, periklanan, e-commerce, bisnis lokal dan kecil, dan lainnya. Agar situs Anda mendukung tampilan AMP ini, ada beberapa peraturan khusus yang harus Anda terapkan pada blog Anda, seperti menambahkan markup amp pada laman html atau Anda bisa melihat panduannya melalui situs resmi ampproject.

Halaman AMP terdiri dari 3 komponen utama:

HTML AMP
HTML AMP adalah HTML yang memiliki beberapa batasan untuk memberikan performa yang handal. HTML AMP pada dasarnya adalah HTML yang diperpanjang dengan properti AMP kustom. File HTML AMP yang paling sederhana akan tampak seperti berikut:

<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>Hello World!</body>
</html>

Meskipun sebagian besar tag di halaman HTML AMP adalah tag HTML biasa, sebagian tag HTML diganti dengan tag khusus AMP (lihat juga Tag HTML dalam spesifikasi AMP). Elemen kustom ini, yang disebut komponen HTML AMP, membuat pola umum jadi mudah diterapkan dengan cara yang baik.

Misalnya, tag amp-imgmemberikan dukungan srcset penuh, bahkan di browser yang belum mendukungnya. Pelajari cara membuat halaman HTML AMP pertama Anda.

Halaman AMP ditemukan oleh mesin telusur dan platform lainnya melalui tag HTML <link rel="">. Anda dapat memilih untuk menggunakan halaman versi non-AMP dan versi AMP, atau hanya versi AMP. Pelajari selengkapnya dalam Membuat Halaman Anda Dapat Ditemukan.

JS AMP
Library JS AMP memastikan rendering halaman HTML AMP yang cepat. Library JS AMP menerapkan semua praktik performa terbaik untuk AMP, mengelola pemuatan resource, dan menyediakan tag kustom yang disebutkan di atas, semuanya untuk memastikan rendering halaman yang cepat.
Library JS AMP menerapkan semua praktik performa terbaik untuk AMP, mengelola pemuatan resource, dan menyediakan tag kustom yang disebutkan di atas, semuanya untuk memastikan rendering halaman yang cepat.

Di antara pengoptimalan terbesarnya adalah membuat semua yang berasal dari sumber eksternal menjadi asinkron, sehingga rendering halaman dapat berjalan dengan lancar tanpa halangan apa pun.

Teknik performa lainnya meliputi penerapan sandbox pada semua iframe, perhitungan awal tata letak setiap elemen di halaman sebelum resource dimuat, dan penonaktifan pemilih CSS yang lambat.

Untuk mempelajari lebih lanjut tentang pengoptimalan sekaligus batasan, baca spesifikasi HTML AMP.

Cache AMP
Cache AMP Google dapat digunakan untuk menampilkan halaman HTML AMP yang tersimpan di cache. Cache AMP Google adalah jaringan penayangan konten berbasis proxy untuk menayangkan semua dokumen AMP yang valid. Cache tersebut mengambil halaman HTML AMP, menyimpannya di cache, dan menyempurnakan performa halaman secara otomatis. Saat menggunakan Cache AMP Google, dokumen, semua file JS, dan semua gambar akan dimuat dari asal yang sama yang menggunakan HTTP 2.0 untuk mendapatkan efisiensi maksimum.

Cache tersebut juga dilengkapi dengan sistem validasi bawaan yang menegaskan bahwa halaman dijamin berfungsi, dan sistem tersebut tidak bergantung pada resource eksternal. Sistem validasi menjalankan serangkaian penegasan yang memastikan markup halaman telah memenuhi spesifikasi HTML AMP.

Versi lain validator sudah disematkan pada setiap halaman AMP. Versi ini dapat mencatat error validasi langsung ke konsol browser saat halaman dirender, yang memungkinkan Anda melihat kemungkinan pengaruh perubahan kompleks dalam kode Anda terhadap performa dan pengalaman pengguna.

Pelajari lebih lanjut cara menguji halaman HTML AMP.

Project Google yang diumumkan secara global pada oktober 2015 ini terbukti dapat mempercepat membuka halaman web hanya dalam sepersekian detik. Tentu hal tersebut dapat menambahkan rasa kenyamanan pengunjung dalam mengakses situs atau blog Anda.

Bagaimana cara menggunakan AMP pada blogger?

Cara termudah dan tercepat mengaplikasikan AMP pada blogger adalah dengan menggunakan template blogger berbasis versi AMP ready yang sudah tervalidasi 100% untuk penggunaan dalam format AMP. Langkah selanjutnya adalah mempelajari beberapa Tag HTML yang akan digunakan pada Artikel agar menyesuaikan dengan format AMP seperti Tag Image (<img src="URL Image"/>), Tag Anchor Link (<a href="URL Target"></a>), Tag Division (<div></div>) dan beberapa Tag lainnya yang mengikuti standar format AMP.

Lebih lengkap mengenai format Tag HTML dapat dilihat pada situs AMP Project di bagian AMP HTML Format.

Template AMP Blogger Premium Resposive
Berikut beberapa template blogger versi AMP yang terbaik dan gratis untuk di download. Beberapa template yang penulis bagikan sudah responsive dan 100% valid AMP.

#1 Infinite AMP Templates

Template Blogger AMP Gratis Infinity Terbaik. Tema blogger infinite amp dibuat oleh Arlina, seorang blogger yang cukup lama. Ini adalah salah satu template terbaik SEO Optimized AMP blogger. Infinite AMP adalah tema AMP blogger premium yang didistribusikan secara gratis. Infinite AMP mencakup fitur-fitur seperti SEO Friendly, Tampilan yang elegan, ultra responsif, heading dinamis, menu footer dan terintegrasi dengan format AMP yang valid.

Kumpulan Template AMP Blogger Terbaik

Related Kumpulan Template AMP Blogger Terbaik: