Tampilkan postingan dengan label SEO. Tampilkan semua postingan
Tampilkan postingan dengan label SEO. Tampilkan semua postingan

Sabtu, 05 September 2020

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.
Baiklah, mungkin itu saja tips yang dapat saya bagikan semoga bermanfaat. Jika ada salah dan kurang saya mohon maaf. Jika ada masukan terkait artikel ini jangan boleh untuk kontak saya atau berikan komentar di bawah. Sekian dan terima kasih.




  

Sabtu, 08 Agustus 2020

Berbagi Tips dan Cara Optimalisasi Aplikasi Web NextJS

Hallo apa kabar? Semoga kalian baik-baik saja dimana pun kalian berada. Kali ini saya akan berbagi tips bagainana cara mengoptimasi aplikasi web yang menggunakan NextJS untuk tools benchmarking-nya saya menggunakan Lighthouse. 

Untuk kamu yang belum tahu, Lighthouse merupakan tools yang wajib digunakan untuk kamu developer aplikasi web. Dengan tools ini kamu akan mengetahui apakah aplikasi website kamu sudah memenuhi beberapa kaidah seperti dari segi performa, aksesbilitas (berkaitan dengan user experience), best pratices, SEO, dan juga PWA. Untuk tools lain yang sering saya gunakan kamu bisa membaca artikel ini. Kamu juga bisa menggunakan WebDev Measure untuk mengukur performa website. Kemarin saya sempat mengukur performa website saya, hasilnya seperti ini.




Performance

  • Serve images in next-gen formats
Apakah kamu tahu kalau Google mempunyai format image yang baru, yakni WebP. Format ini memiliki kemampuan lossy dan loseless. Apa itu lossy dan loseloss? Jadi gambar akan mengalami kompresi sehingga ukurannya akan lebih kecil dibandingkan ukuran aslinya (lossy). Meski begitu gambar tidak otomatis berubah atau berbeda (secara visual) dibandingkan gambar asli atau gambar sudah dikompres tidak kehilangan kualitasnya.

Beberapa web browser modern seperti Google Chrome, Firefox, Opera dan Edge, sudah support format WebP. Untuk coverage support-nya bisa kamu lihat di situs ini Can I Use, di situ dijelaskan bahwa hingga saat ini coverage support-nya sudah 94%. Sudah cukup baik bukan?

Memang belum semuanya ter-cover, kalau kamu tidak mau menggunakan WebP kamu masih bisa menggunakan format lain seperti PNG atau JPEG. Situs yang biasa saya gunakan adalah TinyPNG dan juga TinyJPG.

  • Gunakan attribute "lazy" saat memuat gambar
Salah satu aspek yang mesti diperhatikan dalam pembuatan website adalah FCP atau First Content Painful. Menurut survei, 53% pengguna akan pergi apabila suatu website membutuhkan waktu lebih dari 3 detik untuk merender halaman website. Salah satu yang memperlambat proses render website adalah pada saat memuat image atau gambar. Untuk mengatasi masalah ini kamu bisa menambahkan atribute "lazy" pada saat memuat gambar, dengan menambahkan atribute ini seperti memberitahu pada browser "bagian ini nanti saja dirender, render dulu bagian lain yang lebih penting". Untuk contoh kodenya seperti berikut : <img src="./gambarku.png" loading="lazy">. Untuk lebih lengkapnya kamu bisa membaca artikel berikut ini dan juga ini.

Accessbility 

  • <html> element does not have a [lang] attribute
Dengan menambahkan atribut "lang" pada tag html akan sangat berguna dan membantu untuk meningkatkan SEO website kamu. Jadi Google akan tahu apakah website kamu menggunakan bahasa Inggris atau bahasa Indonesia. Sehinngga Google akan lebih merekomendasikan artikel atau website kamu apabila cocok dengan background pengguna seperti lokasi dan faktor lainnya. Selain itu, hal ini akan sangat membantu bagi para teman tuna netra yang biasa menggunakan bantuan tools Narator untuk membacakan isi teksnya. Jadi mesin narrator akan menyesuaikan gaya bicara sesuai atribute lang yang ditambahkan, jadi akan lebih enak didengar. 
  • Background and foreground colors do not have a sufficient contrast ratio
Ketika membuat tampilan website ada baiknya kamu juga mempertimbangkan penggunaan warna. Hal ini terkait dengan aksesbilitas dalam hal kemudahaan membaca teks. Apabila warna teks dengan background tidak memiliki kontras yang cukup maka hal ini dapat menyusahkan user. User akan menatap lebih lama ke layar yang dituju sampai menemukan maksud teks tersebut. Solusinya kamu bisa menggunakan berbagai macam tools untuk mengecek kontras, salah satunya adalah website ContrastRatio. Pastikan nilainya di atas 4.5, semakin besar semakin bagus.
  • Nanti dilanjut lagi... :)