Blogger

Belajar AMP HTML Versi Saung Artikel Bangsa

Saung Artikel Bangsa – Accelerated Mobile Pages (AMP) sudah dirilis dan sudah bisa kamu lihat di beberapa lokasi pengguna untuk amp di halaman Google Search (Mesin Pencari Google). Jadi apa yang dimaksud dengan AMP Google  dan bagaimana cara kerja AMP Google ini? Berikut ini adalah pembahasannya.

Belajar AMP HTML Versi Saung Artikel Bangsa
Saung Artikel Bangsa

Pengertian dari AMP Google ?

Pada pertengahan Oktober 2015 Google memberikan pengumuman sebuah framework baru yang disebut Google AMP atau AMP HTML atau Accelerated Mobile Pages. AMP adalah sebuah framework yang dirancang khusus untuk memudahkan developer membuat sebuah halaman web yang dapat diakses dengan cepat untuk perangkat mobile.

Cara kerja AMP Google ini sendiri adalah mengurangi penggunaan HTML, CSS dan Javascript sehingga memungkinkan publisher dapat dengan mudah meningkatkan kecepatan loading halaman web di perangkat mobile.

Meskipun pengembang berpengalaman dapat membuat kinerja sebuah situs sama dengan yang dihasilkan AMP ini, namun AMP adalah sumber daya siap pakai yang memang khusus dibuat untuk kebutuhan tersebut.

Cara Kerja AMP Google

Ada tiga hal penting yang harus dipahami untuk membuat web untuk AMP Google.

1. AMP HTML

Sebuah subset HTML, bahasa markup ini memiliki beberapa custom tags, properti dan terdapat banyak pembatasan-pembatasan didalamnya dibandingkan dengan HTML biasa. Jika Anda sudah familiar dengan HTML biasa tidak sulit untuk membuat halaman web dengan AMP HTML.

2. AMP JS

Framework JavaScript untuk meningkatkan kinerja halaman web untuk perangkat mobile. Sebagian besar penggunaannya adalah dengan metode loading asynchronous. Perlu dicatat bahwa JavaScript dari pihak ketiga tidak dapat berjalan dengan AMP. Contoh penggunaannya dapat dilihat berikut ini:

<script async src="https://cdn.ampproject.org/v0.js"></script>


3. AMP CDN

CDN (Content Delivery Network), akan mengambil halaman AMP Anda lalu menyimpannya dalam cache mereka dan secara otomatis meningkatkan optimasi beberapa kinerja web kamu.


Membuat Web Untuk AMP

AMP tidak membolehkan elemen Javascript dari pihak ketiga, kemungkinan penggunaan kolom komentar seperti  Disqus, Facbook sudah tidak mungkin diimplementasikan lagi. (Mungkin bisa dilakukan dengan iframe). Kelihatannya memang harus menulis ulang template situs yang sudah ada.

Multimedia 

Untuk multimedia harus ditangani secara khusus. Misalnya, penggunaan komponen tag untuk gambar pada halaman web AMP berbeda dengan html biasa. Kalau di HTML biasa kita menggunakan img namun di AMP tag img sudah berubah menjadi amp-img. Selain itu jika Anda menggunakan gambar animasi sperti GIF Anda harus menggunakan komponen tag AMP yang lebih panjang amp-anim. 

Seperti halnya gambar demikian juga untuk video, ada tag khusus yang harus digunakan jika Anda ingin mengembed video ke halaman web Anda yaitu amp-video. Khusus untuk video dari Youtube tag yang dgunakan adalah amp-youtube.


Ada juga dukungan untuk media slideshow melalui amp-carousel dan gambar lightboxes  menggunakan amp-image-lightbox, seperti halnya yang digunakan media-media sosial  Twitter, Instagram, Facebook, Pinterest dan Vine melalui komponen entend mereka sendiri.

Agar Google (dan teknologi lain yang mendukung Proyek AMP) dapat mendeteksi versi AMP dari artikel Anda, Anda harus memodifikasi versi asli dari halaman web Anda. Halaman artikel asli harus menyertakan tag berikut, pada dasarnya disebut link canonical back AMP:

<link rel="amphtml" href="http://www.example.com/blog-post/amp/">


Pada situs resminya di halaman AMP Discovery page juga menyebutkan bahwa beberapa platform yang mendukung AMP membutuhkan meta data Schema.org untuk menentukan jenis konten halaman.

Selain itu, meta data Schema.org “merupakan syarat utama untuk membuat konten Anda layak tampil di Search Carousel Google.” Jadi, jika Anda ingin mendapatkan manfaat di masa depan dari Google dengan menerapkan AMP, pastikan Anda mendapatkan skema yang tepat!

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *