Namun sebelumnya, cek dahulu apakah iframenya menggunakan HTTPS atau hanya HTTP? Karena ketika iframe-HTTP untuk blog yang SSL/HTTPS (contoh blog ini), sudah saya terapkan dan tidak muncul. Namun ketika di blog non HTTPS, bisa. Jadi, dicek dahulu!
Sepertinya tak perlu basa-basa lagi ya? Haha. Langsung saja yuk!
Karena judulnya juga sangat jelas, ikuti step by stepnya:
1. Copy paste tag meta amp iframe ke bagian <head> ... </head> pada fitur edit HTML template:
<script async="async" custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Namun jika sudah ada, langsung ke langkah berikutnya.
2. Lalu, copy paste kode berikut ke bagian yang ingin kalian tampilkan:
<amp-iframe width="388" title="Kota Yogyakarta" height="280" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63245.97077191126!2d110.33982534474266!3d-7.803249010409012!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a5787bd5b6bc5%3A0x21723fd4d3684f71!2sYogyakarta%2C+Yogyakarta+City%2C+Special+Region+of+Yogyakarta!5e0!3m2!1sen!2sid!4v1513044846140"> </amp-iframe>
Note! Ganti kode yang saya bold dengan kode iframe kalian. Untuk ukuran width dan height dirubah sesuai dengan lebar template. Title juga diganti dengan identitas iframe kalian.
3. Jika sudah, Simpan dan lihat hasilnya.
Bagaimana, mudah sekali bukan? Ya iyalah, lha sudah saya kasih tahu.
Berikut contohnya yang saya buat dengan mengambil iframe kode peta Jasa SEO Jogja Mas Andisyam pada google maps:
Diingat kembali bahwa iframe HTTPS atau HTTP, ini sangat berpengaruh untuk muncul dalam template valid AMP!
Untuk embed video youtube bisa menggunakan cara ini atau cara yang khusus, jika mau yang khusus kalian baca artikelnya di sini.
Baca juga:
Jangan lupa, bagikan postingan ini ke teman kalian yang juga membutuhkan dan baca juga artikel menarik lainnya dalam blog ini :)
Semoga bermanfaat, Amin!
Open Disqus Close Disqus