Sitemap merupakan salah satu fasilitas yang harus dimiliki oleh setiap web site. Selain fungsinya sebagai tempat untuk merangkum semua judul artikel yang ada diblog tersebut, sitemap juga dapat membantu mesin perayap seperti googlebot dalam mengindeks setiap artikel yang ada diblog/website tersebut. Seperti yang telah saya kutip dari wikipedia bahwa:
"Sitemap adalah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam website. Dengan begitu, mesin google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya. Sama halnya dengan webiste pada umumnya, blog juga memerlukan sitemap agar mesin pencari dengan mudah mendeteksi konten di dalamnya"
Dalam membuat sitemap ini sebenarnya sudah banyak para master blogger yang memberikan script atau kodenya apalagi kalau hanya sekedar membuat sitemap untuk blog yang bukan AMP. Lalu bagaimana dengan rekan-rekan blogger yang blognya sudah menggunakan template AMP?
Sebagaimana yang kita ketahui, bahwa Blog AMP sebenarnya tidak diijinkan untuk menggunakan Javascript secara langsung. Kalaupun kita paksakan dapat dipastikan blog tersebut menjadi tidak valid AMP. Lalu bagaimana cara mengatasinya? Untuk menjawab pertanyaan itu, ada baiknya kamu lihat dulu deh demo halaman sitemap yang nanti akan kita buat. Kemudian silahkan cek juga halaman sitemap itu di AMP Validator, apakah valid AMP atau tidak.
Mari Kita Buat Sitemap yang Valid AMP
Jika kamu penasaran bagaimana cara membuatnya, berikut ini saya jelaskan.
Pertama-tama silahkan kamu buka dulu blog mu dan buat halaman statis baru, jika sudah silahkan copykan kode dibawah ini dan tempelkan pada halaman yang kamu buat dengan mode HTML ya. Namun sebelumnya pastikan dalam template kamu sudah terpasang scrip AMP Iframe.
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
Jika belum terpasang, silahkan pasang terlebih dahulu. Caranya, buka edit theme blog kamu, kemudian lihat sebelum atau di atasnya kode </head> atau </head><!--<head/>-->. Agar lebih mudah, gunakan saja </head> tadi. Sehingga nantinya akan jadi seperti ini:
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/> </head>Setelah itu, baru kamu bisa menyalin kode ini untuk ditaro di halaman statis yang akan dijadikan halaman sitemap tadi.
<amp-iframe title="Sitemap"
src="https://raw.githack.com/kelasmat/others/master/sitemap.html?url=https://idnclass.blogspot.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/AVvXsEijwpNkkQn3NiftbKdV26658gnq8q7Jd925p4E0rs0rYA4HlzBtFFy9vMa7XVIqTgmKuMZ1E53bSs7GEAekj__8R0TrDaXUvVZs8Ni-GtweHxOD31GZrzInYYCbeZambDzgj8Ps3ZPCtuM/s1600/placeholder.png"
layout="fixed-height"
height="360"
width="auto"
placeholder>
</amp-img>
</amp-iframe>
Silahkan Ganti https://idnclass.blogspot.com/ dengan alamat blog kamu sendiri. Lalu Save. Ingat harus dalam Mode HTML ya jangan mode compose.
Sekian tutorial cara membuat halaman sitemap di blog amp dengan menggunakan javascript namun tetap valid dan tidak eror. Semoga artikel ini dapat dipahami dengan mudah dan dapat membantu rekan-rekan blogger yang sedang mengembangkan blognya agar lebih ramah bagi mesin pencari google.