Skip to main content

Menampilkan Sitemap Pada Halaman Static Blogger AMP HTML

Sitemap merupakan salah satu bagian blog yang cukup penting dan merupakan salah satu unsur SEO sebuah blog. Sitemap di sini merupakan sebuah halaman yang menampilkan peta situs atau daftar isi untuk para pengunjung blog sehingga akan lebih memudahkan pengunjung untuk melihat atau mencari konten blog.

Salah satu cara untuk menampilkan sitemap blog adalah dengan menggunakan script, untuk itu sitemap tidak bisa disimpan langsung di laman Blogger AMP HTML karena akan menimbulkan error AMP pada halaman tersebut.

Untuk itu, salah satu cara untuk menampilkan sitemap pada halaman static Blogger AMP HTML adalah dengan menggunakan amp-iframe dengan terlebih dulu meng-hosting sitemap di pihak ketiga agar bisa dimuat dengan amp-iframe.

Namun seperti kita ketahui bahwa untuk menampilkan amp-iframe harus disimpan 70% dari tepi atas layar, jika tidak maka amp-iframe tidak akan tampil di blog.

Untuk itu saya sudah lama mencari cara aman untuk dapat menampilkan amp-iframe tanpa harus ada batas tinggi untuk menyimpan amp-iframe. Sehingga dengan begitu kita bisa menampilkan sitemap di halaman static Blogger AMP HTML dengan menggunakan amp-iframe yang disimpan di atas postingan halaman static Blogger AMP.

Dan akhirnya saya menemukan cara aman untuk menampilkan amp-iframe tanpa harus disimpan 70% dari tepi atas layar. Yaitu kita bisa menggunakan image sebagai placeholder yang menekan iframe menjadi lebih ke bawah.

Sebagai demonya untuk menampilkan sitemap pada halaman static Blogger AMP HTML dengan menggunakan amp-iframe seperti berikut:


Nah jika Anda juga ingin mencoba membuat Sitemap blog pada halaman static Blogger AMP HTML, silahkan gunakan kode berikut ini dan paste pada mode HTML halaman static untuk Sitemap.


<amp-iframe title="Sitemap"
              src="https://cdn.statically.io/gh/KompiAjaib/kompi-html/master/sitemaps-amp.html?url=https://www.kompiajaib.com/"
              height="750"
              layout="fixed-height"
              frameborder="0"
              sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups">
    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6z4YyO1yU6cG07brIFK0pU0Vv8cHUxIdfbF8zq92WEakUCXKJJFbFax6rJRoKJlapKqLOjdcYzdUuvldsDIELcf2Fia0BgPcoZTRila-GojNLfemVfFehAYN4qvkPK_6UgcmSn1P_aFM/s1600/placeholder.png"
             layout="fixed-height"
             height="360"
             width="auto"
             placeholder>
    </amp-img>
  </amp-iframe>

Silahkan ganti URL https://www.kompiajaib.com/ dengan URL blog Anda dan blognya harus sudah menggunakan HTTPS.

Trik ini juga bisa menampilkan apa pun di Laman dengan amp-iframe. Selamat mencoba dan semoga bermanfaat.

UPDATE:

Untuk selain blog Indonesia, bisa menggunakan sitemap AMP with Language Support ini.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB