Cara Mudah Membuat Halaman Sitemap Valid AMP

Cara Mudah Membuat Halaman Sitemap Valid AMP untuk pemula terutama yang masih awam dengan AMP. Tenang kamu tidak sendirian, karena Saya juga baru belajar mengenai blog AMP. Bagi Saya, menggunakan template AMP Blogger memang memberi pengalaman yang baru dan berbeda dalam membuat dan mengelola sebuah blog.

Banyak hal baru yang Saya temui ketika membuat blog AMP baru. Misalnya saja ketika membuat artikel untuk di posting, membuat halaman statis untuk kontak, menyisipkan gambar di dalam artikel, dan lain sebagainya.

Ada kepuasan tersendiri ketika blog yang di bangun bisa valid AMP 100%, khususnya bagi pemula. Kalau sudah master mungkin ini pekerjaan yang sangat mudah, berbeda dengan pemula atau awam. Silahkan baca juga cara sukses merintis bisnis afiliasi.

Namun sebelum menjadi master, bukankah di mulai dari pemula dulu?

Betul, namun juga tergantung dari ketekunan dan juga mengembangkan ilmu yang dimiliki. Banyak dari para master blog yang berbai hati mau berbagi ilmu, berbagi template, sehingga kita-kita yang masih pemula ini terasa sangat terbantu.

Hal baru yang Saya temui dalam membuat blog AMP salah satunya adalah ketika ingin membuat halaman daftar isi atau biasa juga di sebut dengan Sitemap. Silahkan baca juga cara menambahkan sidebar widget pada blog AMP.

Cara Mudah Membuat Halaman Sitemap Valid AMP

Ibarat sebuah buku, maka sitemap ini adalah halaman yang menunjukkan isi keseluruhan dari buku tersebut. Jika pada sebuah blog maka isi dari keseluruhan blog tersebut dapat secara ringkas di lihat pada halaman sitemap/daftar isi ini.

Dengan adanya sitemap ini maka akan dapat memudahkan pengunjung dalam menemukan artikel yang dicarinya. Untuk itu sangat dianjurkan pada sebuah blog agar menampilkan halaman daftar isi atau sitemap ini.

Lalu bagaimana cara membuat halaman sitemap pada blog AMP?

• Pada dasarnya adalah dengan cara seperti biasa saat akan membuat halaman statis yaitu masuk pada dashboard blogger dan pilihlah halaman/pages.
• Setelah itu buatlah halaman baru dan beri judul sitemap atau daftar isi atau sesuai dengan kemauan kamu.
• Masuk ke mode HTML
• Kemudian copy dan paste-kan kode dari kompiajaib berikut :

<amp-iframe title="Sitemap"

              src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/sitemaps-amp.html?url=https://carapemula.xyz/"

              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/AVvXsEhgHKrLmCLPqHtJfi8C-HX_6kQTanwkQpLncxaEj9zbiyf8weQ6oOM6-59IS4-dkaIkB1a3LbsGeS68kOQ0OBbwvkHduwbNyojiTdpOsxkJV6QHoBVf_QV7wLKX7hsZyJj224N88KcnQzU/s1600/placeholder.png"

             layout="fixed-height"

             height="360"

             width="auto"

             placeholder>

    </amp-img>

  </amp-iframe>

• Ganti URL yang berwarna kuning tersebut menjadi URL blog kamu
• Simpan dan cek hasilnya.
• Untuk hasilnya kurang lebih sama, silahkan klik di bawah ini :

Menggunakan CDN Staticaly

Selain menggunakan CDN Rawgit kamu juga bisa menggunakan CDN staticaly ini dari mas Hendra, dan untuk hasilnya kurang lebih sama saja, yaitu :

<amp-iframe title="Sitemap"

              src="https://cdn.staticaly.com/gh/HendraSurya/sitemap-amp/master/sitemap-amp.html?url=https://carapemula.xyz/"

              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/AVvXsEhgHKrLmCLPqHtJfi8C-HX_6kQTanwkQpLncxaEj9zbiyf8weQ6oOM6-59IS4-dkaIkB1a3LbsGeS68kOQ0OBbwvkHduwbNyojiTdpOsxkJV6QHoBVf_QV7wLKX7hsZyJj224N88KcnQzU/s1600/placeholder.png"

             layout="fixed-height"

             height="360"

             width="auto"

             placeholder>

</amp-img>

</amp-iframe>

Sedikit tambahan bagi kamu yang menggunakan template Infinite AMP dari master Arlina, perlu untuk melakukan langkah berikut ini :

• Buka Tema dan Edit HTML
• Cari kode yang berikut ini :



<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>



• Tepat di bagian atas kode tersebut ada kode tag conditional yang seperti ini: 



<b:if cond='data:blog.pageType == &quot;item&quot;'>



• Kemudian hapus tag conditional tersebut hingga tag penutupnya yaitu </b:if>
• Selanjutnya pilih simpan template

Dan silahkan cek hasilnya. Kini blog kamu sudah mempunyai halaman sitemap yang valid AMP. Semoga bermanfaat.

Berbagi :