Share

Pada artikel sebelumnya sudah ditulis mengenai keunggulan serta cara kerja dari Accelerated Mobile Pages, pada artikel ini saya membahas cara membuat halaman AMP untuk website Anda.

Tentunya jika kita menggunakan wordpress, maka kita tinggal menginstall plugin AMP untuk mengaktifkan halaman AMP. Tapi jika membuat website dengan menggunakan berbagai framework, maka kita akan membuat halaman AMP dengan usaha sendiri :).

Seperti kita ketahui sebelumnya, halaman AMP sangat cepat. Pada prinsipnya halaman AMP dimuat pertama kali bukanlah langsung mengarah ke url website kita, tapi dimuat dari cache Google. Dalam membuat halaman AMP, masih digunakan tag-tag html meskipun ada beberapa yang mesti diganti misalnya tag untuk gambar (<img>). Kita juga tidak bebas dalam menambahkan javascript, menggunakan external css, ataupun tag-tag dalam head.

Misalnya membuat halaman AMP yang sederhana untuk URL ini : Distro Linux Populer

Kunci pertama kita harus menambahkan url halaman AMP, tag amphtml di dalam <head>.

href diisi dengan url halaman AMP, tentu url-nya pasti berbeda dengan halaman aslinya.

Kemudian source code untuk AMP sederhana dari halaman di atas, sebagai berikut :

Penjelasan dari aturan-aturan membuat halaman AMP :

Memuat javascript AMP
<script async src=”https://cdn.ampproject.org/v0.js”></script>

Menentukan halaman asli dari halaman AMP
<link rel=”canonical” href=”http://www.yudana.id/daftar-distro-linux-paling-populer-digunakan-saat-ini/”>

Menambahkan struktur data/snippet code untuk halaman AMP
<script type=”application/ld+json”>
{
“@context”:”http://schema.org”,
“@type”:”BlogPosting”,
“mainEntityOfPage”:”http://www.yudana.id/daftar-distro-linux-paling-populer-digunakan-saat-ini/”,
“headline”:”Daftar Distro Linux Yang Paling Populer Digunakan Saat Ini”,
“datePublished”:”2017-02-12T01:22:56+00:00″,
}
</script>

CSS wajib untuk AMP
<style amp-boilerplate> …. </noscript>

CSS custom untuk menambahkan style di halaman AMP
<style amp-custom> ….. </style>

Setiap tag img di halaman, harus diganti dengan amp-img, begitupun dengan width dan height juga mesti diisi. 
<amp-img src=”http://www.yudana.id/wp-content/uploads/2017/02/Linux-master.jpg” alt=”Linux” width=”480″ height=”255″></amp-img>

Tentunya kita bisa menambahkan script analitik dari Google, dengan cara menambahkan script di bawah ini diantara head :
<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>

Dan tambahkan script dibawah, sebelum </body>
<amp-analytics type=”googleanalytics”>
<script type=”application/json”>
{
“vars”: {
“account”: “UA-XXXXX-Y”
},
“triggers”: {
“trackPageview”: {
“on”: “visible”,
“request”: “pageview”
}
}
}
</script>
</amp-analytics>

UA-XXXXX-Y diganti dengan GA ID dari website Anda.

Untuk membuat halaman AMP ada aturan-aturan tertentu, kita tidak bisa menambahkan berbagai script untuk carousel, pop up, dll. Karena pada prinsipnya halaman AMP adalah representasi dari website Anda secara sangat sederhana. Karena ada aturan-aturan tertentu, maka kita bisa melakukan validasi dari halaman AMP yang telah dibuat. Caranya : menambahkan parameter #development=1 pada akhir url dari halaman AMP.

Misalnya halaman AMP : http://www.yudana.id/daftar-distro-linux-paling-populer-digunakan-saat-ini/amp/#development=1

Kemudian klik kanan, inspect dan pilih tab console. Jika muncul pesan :
“AMP validation successful”
Berarti halaman AMP-nya valid. Jika tidak valid biasanya muncul pesan warna merah, dan Anda bisa perbaiki sesuai dengan error yang terjadi.

Halaman AMP hanya akan muncul dari hasil pencarian Google dengan menggunakan perangkat mobile, tampilannya akan seperti dibawah ini :

tampilan amp

Jika dalam hasil pencarian Google, muncul tanda petir dan AMP. Maka itu adalah halaman AMP yang telah terindex oleh Google.

Cukup mudah bukan? 🙂