Menambahkan Sitemap di Aplikasi Next.js Agar Lebih Mudah Dikenali Google

Hallo apa kabar, semoga kalian selalu sehat dalam lindungan-Nya. Kali ini saya ingin berbagi tips mengenai bagaimana cara menambahkan sitemap pada aplikasi Next.js secara otomatis atau auto generate. Mungkin ada sebagain dari kalian yang bertanya, apa sih fungsi dari sitemap ini? Baikalah akan saya jelaskan apa itu sitemap dan apa fungsinya.

Sitemap merupakan salah satu protokol yang digunakan sebuah webmaster untuk menginformasikan kepada para search engine tentang apa aja sih isi dari website tersebut. Sitemap berbentuk file XML yang berisi kumpulan daftar url yang ada di website tersebut. Tapi kamu juga bisa memilih bagian mana yang perlu untuk diberitahukan ke search engine dan yang tidak perlu. Yang tidak perlu ini umumnya yang bersifat credentials seperti bagian admin dan login.

Lalu, apa bedanya jika sebuah website memiliki sitemap dan tidak memiliki sitemap? Bedanya adalah jika menggunakan sitemap pada saat robot crawler miliki Google berkunjung ke website kamu maka robot crawler tersebut akan diberikan kumpulan url atau halaman yang ada di website kamu yang kemudian disimpan di database Google. Dengan begitu search engine seperti Google, Bing, Yahoo, dan Yandex dapat dengan mudah memetakan halaman yang ada di website kamu. Yang nantinya dicocokan dengan kebutuhan pengguna pada saat melakukan pencarian. Jika, tidak ada sitemap crawler bisa kebingungan untuk memetakan halaman website dan juga tidak maksimal dalam pengindeksan halaman website yang berpengaruh terhadap SEO (Search Engine Optimization).

Gimana kamu tertarik untuk menambahkan Sitemap di aplikasi Next.js kamu?

1. Yang pertama dilakukan adalah kita buka halaman dokumentasi npm library-nya  nextjs-sitemap-generator. 
2. Jika sudah membacanya selanjutnya buka root directory aplikasi Next.js kamu melalui terminal.
3. Kemudian install library nextjs-sitemap-generator dengan mengetikkan ini di terminal: npm i nextjs-sitemap-generator
4. Jika sudah buat file dengan nama "your_nextjs_sitemap_generator.js" atau terserah kamu yang penting tidak bentrok dengan file lain. Tapi usahakan penamaannya jelas dan sesuai. 
5. Ketikan teks berikut di dalam file. 
6. const sitemap = require("nextjs-sitemap-generator");

   sitemap({
     baseUrl: "https://urlwebsitekamu.com",
     pagesDirectory: __dirname + "/pages",
     targetDirectory: "public/"
   });

7.  Kamu juga bisa menggantinya sesuai dengan kemauan kamu, seperti menambahkan route url atau file mana saya yang perlu di-ignore atau hide. Untuk keterangan lebih lanjut bisa kamu baca di dokumentasinya.
8. Setelah selesai, lanjut build project kamu dengan mengetikkan : npm run build
9. Selanjutnya jalankan file "your_nextjs_sitemap_generator.js" dengan menteikkan ini di terminal : node your_nextjs_sitemap_generator.js
10. Setelah selesai, coba cek didalam directory public apakah ada file sitemap.xml atau tidak. Jika ada, selamat kamu telah berhasil menambahkan file sitemap di dalam aplikasi Next.js milikmu.