Belajar AMP HTML (Accelerated Mobile Pages)

Elna Blog – Accelerated Mobile Pages (AMP) Telah dirilis dan telah digunakan oleh para blogger, contohnya dapat anda lihat di halaman Google Search (Mesin Pencari Google) terutama blog-blog yang membahas tentang desain template blog ataupun blog-blog yang membahas tentang webmaster google. Namun Masih Banyak orang yang masih awam dengan yang namanya AMP (Accelerated Mobile Pages) termasuk anda. 

Apa sih yang dimaksud dengan AMP (Accelerated Mobile Pages) Google dan bagaimana cara kerja AMP (Accelerated Mobile Pages ) Google ini? 

Simak Pembahasannya di bawah ini.

Apa itu AMP (Accelerated Mobile Pages) Google ?

Di pertengahan Oktober tahun 2015 Google telah mengumumkan sebuah framework baru yang disebut dengan Google AMP (Accelerated Mobile Pages)  atau AMP (Accelerated Mobile Pages) HTML. AMP (Accelerated Mobile Pages) adalah sebuah framework yang dirancang khusus yang bertujuan untuk memudahkan developer dalam membuat sebuah halaman web yang dapat diakses dengan sangat cepat di perangkat mobile.
Cara kerja AMP (Accelerated Mobile Pages) Google ini sendiri yaitu mengurangi penggunaan HTML, CSS dan Javascript, sehingga memungkinkan publisher akan dengan mudah meningkatkan kecepatan loading halaman web di perangkat mobile.
Meskipun developer yang berpengalaman mampu membuat kinerja sebuah situs sama seperti yang dihasilkan AMP (Accelerated Mobile Pages) ini, tapi AMP (Accelerated Mobile Pages) adalah sumber daya yang telah disiapkan dan memang dirancang khusus untuk kebutuhan tersebut.

Ada tiga poin penting yang harus anda pahami dalam membuat web untuk AMP (Accelerated Mobile Pages) Google.

1. AMP (Accelerated Mobile Pages) HTMLSebuah subset HTML, bahasa markup ini mempunyai beberapa custom tags, properti dan terdapat beberapa pembatasan-pembatasan yang lebih namyak  di dalamnya dibandingkan dengan HTML biasa. Jika Anda sudah mengenal dan tidak asing dengan HTML biasa maka tidak sulit bagi anda untuk membuat halaman web menggunakan AMP (Accelerated Mobile Pages) HTML.

2. AMP (Accelerated Mobile Pages) JS Framework JavaScript adalah untuk meningkatkan kinerja halaman web di perangkat mobile. Sebagian besar dari penggunaannya adalah dengan metode loading asynchronous. Perlu diperhatikan bahwa JavaScript dari pihak ketiga tidak akan berjalan dengan AMP (Accelerated Mobile Pages). 

Contoh penggunaannya seperti berikut ini:

3. AMP CDNCDN (Content Delivery Network), bertugas mengambil halaman AMP Anda Kemudian menyimpannya ke dalam cache browser dan secara otomatis akan meningkatkan optimasi beberapa kinerja web anda.

Membuat Web Untuk AMP

AMP tidak memperbolehkan adanya elemen Javascript dari pihak ketiga, contohnya penggunaan kolom komentar seperti Disqus, Facbook, ini sudah tidak mungkin untuk diimplementasikan lagi. (Alternatifnya adalah menggunakan iframe). Kelihatannya memang harus mendesain ulang template situs yang sudah ada.
Multimedia 
Untuk multimedia memang harus ditangani secara khusus. Misalnya, penggunaan komponen tag untuk gambar di halaman web AMP (Accelerated Mobile Pages) berbeda dengan html biasa. Kalau di HTML biasa anda dapat menggunakan img, tetapi di AMP (Accelerated Mobile Pages) tag img telah berubah menjadi amp-img. Selain itu, jika Anda menggunakan gambar animasi seperti GIF, maka Anda harus menggunakan komponen tag AMP (Accelerated Mobile Pages) yang lebih panjang amp-anim. 
Seperti halnya gambar, demikian juga untuk video, ada tag khusus yang harus anda gunakan jika Anda ingin mengembed video youtube ke halaman web Anda yaitu amp-video. Khusus untuk video dari (Youtube), tag yang digunakan 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.

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

http://www.example.com/blog-post/amp/

“>

Dalam situs resminya di halaman AMP (Accelerated Mobile Pages) Discovery page juga menyebutkan bahwa ada beberapa platform yang mendukung AMP (Accelerated Mobile Pages) yang membutuhkan meta data Schema.org untuk menentukan jenis konten pada halaman.

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

Tinggalkan komentar