Cara penulisan HTML Tag untuk AMP pada blogspot

Unknown, 20 Oktober 2016

TIPS CODE SHARE - Jika menggunakan template amp html diblogspot, kita perlu mengubah beberapa struktur html tag untuk membuat post/artikel.

Untuk menambahkan seperti gambar, video, audio, iframe harus sedikit perubahan. Silahkan simak berikut ini tabel penggunaan HTML Tag AMP untuk blogspot.

Tag	Untuk AMP HTML
script	Tidak diperbolehkan kecuali dengan `application/ld+json`.
img	Dari tag `<img>` menjadi `<amp-img>` dan diakhiri dengan `</amp-img>`.
video	Menjadi `amp-video`.
audio	Menjadi `amp-audio`.
iframe	Menjadi `amp-iframe`.
frame	Untuk penggunaan ini dilarang untuk AMP HTML/Belum Valid.
embed	Untuk kode Embed munkin dilarang karena belum valid untuk AMP HTML.
form	Untuk tag form selengkapnya baca : https://www.ampproject.org/id/docs/reference/components/amp-form.
link	Untuk tag ini anda harus menambahkan `rel` disetiap penggunaannya. Untuk valuenya bisa anda kunjungi http://microformats.org/wiki/existing-rel-values.
meta	Untuk penggunaan Meta bahasa seperti `http-equiv` akan muncul notifikasi error pada valid amp html.
`a`	Diperbolehkan menambahkan attribute target dengan value `_blank` untuk tag `href`.

Sedikit penjelasan dari saya mengenai tentang HTML Tag untuk amp pada blogspot.

1. Img

Beberapa tag seperti <img> pada Template anda harus di ganti menjadi <amp-img. Contoh <img src='...'/> di ubah menjadi <amp-img width='600' height='300' src=''></amp-img>. Semua tag tersebut harus di ganti.

2. Script

Tidak diperbolehkan menggunakan script untuk template kecuali dengan aplication/id+json. Coba saja menggunakan javascript dengan menggunakan tag script, pasti ada notifikasi error valid amp htmlnya. Contoh yang diperbolehkan kunjungi link berikut : https://tipscodeshare.blogspot.co.id/2016/10/cara-cepat-mengatasi-error-struktur-data-blog.html. Jadi semua code script seperti <script type='text/javascript'> pada template anda harus di hapus.

3. Meta

Untuk penggunaan meta bahasa pada website anda, jangan menambahkan attribute seperti http-equiv. Karena dengan menambahkan meta tersebut akan muncul notifikasi error valid amp html. Jika ingin menambahkan jenis bahasa silahkan tambahkan code lang='en' pada code <HTML amp='amp'>. Jadi keseluruhan code menjadi <HTML amp='amp' lang='en'>.

4. Iframe

Seluruh code pada template seperti <iframe di ubah menjadi <amp-iframe.

5. Link

Untuk tag seperti <link.. harus di tambahkan rel seperti <link href='https://plus.google.com/101258468127787231485' rel='author'/>.

Hanya itu saja untuk perubahan penulisan strukturnya. untuk selengkapnya bisa kalian simak di https://www.ampproject.org/docs/reference/spec#html-tags.