SEO JavaScript: Pastikan Situs Anda Dapat Diindeks

Apa itu SEO JavaScript?

JavaScript SEO adalah praktik mengoptimalkan JavaScript pada situs web untuk memaksimalkan kemampuan situs web untuk mendapatkan peringkat di mesin pencari seperti Google. Karena kami mengoptimalkan elemen pada halaman, dan karena ini secara langsung memengaruhi metrik SEO teknis, SEO JavaScript umumnya termasuk dalam kategori SEO teknis.

Apakah JavaScript Buruk untuk SEO?

Ada banyak situs JavaScript di luar sana. Meskipun JavaScript menawarkan banyak manfaat, JavaScript juga dapat berdampak negatif pada SEO. JavaScript pada dasarnya tidak buruk untuk SEO, namun jika diterapkan secara tidak benar, hal ini dapat mempersulit Googlebot untuk merayapi dan mengindeks laman. Selain itu, penggunaan JavaScript yang berlebihan dapat meningkatkan waktu pemuatan, yang secara langsung merugikan kemampuan peringkat dan pengalaman menjelajah pengguna.

Tidak semua situs menggunakan JavaScript dengan cara yang sama. Meskipun beberapa situs menggunakan JavaScript dalam kodenya di sana-sini, situs lain menggunakan JavaScript untuk mendukung kerangka kerja dan fitur inti.

Misalnya, kerangka kerja JavaScript seperti Angular dan React dapat membantu pengembang membangun aplikasi web dengan lebih efisien. Kerangka kerja ini juga memerlukan kode JavaScript yang jauh lebih luas dan kompleks daripada rata-rata situs web.

Situs yang dibuat menggunakan model shell aplikasi ini, yang memisahkan UI dan modul data, memerlukan eksekusi kode JavaScript untuk menampilkan konten yang penting bagi pengunjung dan crawler penelusuran. Oleh karena itu, beberapa situs lebih berisiko mengalami masalah SEO terkait JavaScript dibandingkan situs lainnya. Situs yang bergantung pada JavaScript untuk memuat konten pada halaman dapat mengalami masalah SEO jika konten tersebut dimuat dengan benar untuk pengunjung tetapi tidak untuk perayap penelusuran.

Bagaimana Google Menangani JavaScript?

Sebelum saya mendalami pengoptimalan, mari kita lihat lebih dekat bagaimana Google sebenarnya menangani JavaScript.

Google memproses JavaScript dalam tiga fase: perayapan, rendering, dan pengindeksan. Googlebot memulai proses dengan merayapi URL dalam antreannya. Ini mengirimkan permintaan ke server menggunakan agen pengguna seluler dan menarik HTML dari situs. Google hanya memiliki jumlah sumber daya komputasi yang terbatas, dan hanya dapat mengalokasikan sejumlah sumber daya tersebut untuk merayapi satu situs (anggaran perayapannya). Google memproses sumber daya HTML terlebih dahulu untuk menyimpan sumber daya perayapan dan menunda sumber daya JavaScript laman untuk dirayapi nanti dengan menempatkannya dalam antrean render.

Rendering memungkinkan Googlebot mengeksekusi kode JavaScript dan melihat apa yang akan dilihat pengguna jika mereka menjelajahi situs, sehingga memungkinkan Googlebot mengindeksnya dengan benar. Saat menangani situs yang banyak menggunakan JavaScript — dan terutama situs yang menggunakan model shell aplikasi untuk menampilkan informasi penting dalam JavaScript — Googlebot harus terlebih dahulu mengeksekusi dan merender kode JavaScript untuk mempelajari lebih lanjut konten halaman.

Proses rendering ini menimbulkan penundaan saat kode JavaScript dimasukkan ke antrean Layanan Rendering Web, yang menunggu pemrosesan. Meskipun proses ini biasanya memakan waktu lama, Google baru-baru ini menyatakan bahwa penundaan rendering sebenarnya rata-rata hanya 5 detik, dengan 90% situs diproses dalam hitungan menit. Sayangnya, pengalaman SEO tidak seperti itu. Sebuah penelitian menunjukkan bahwa Google membutuhkan waktu sembilan kali lebih lama untuk meng-crawl JavaScript dibandingkan HTML. Selain itu, kesalahan, batas waktu, atau setelan robots.txt masih dapat mencegah Googlebot merender dan mengindeks laman.

Kebutuhan untuk merender JavaScript membuat Googlebot mengindeks halaman dalam dua gelombang. Setelah menggunakan Chromium tanpa kepala untuk merender JavaScript, Googlebot merayapi HTML yang dirender lagi dan menambahkan URL apa pun yang baru ditemukan ke daftar untuk dirayapi lebih lanjut. Ia kemudian menggunakan HTML yang dirender untuk mengindeks situs.

Merender JavaScript

Bukan hanya Googlebot yang perlu merender laman Anda. Rendering mengambil kode di situs Anda dan menghasilkannya secara visual sehingga pengunjung dapat melihatnya di browser mereka. Banyak masalah pengindeksan terkait JavaScript terjadi karena jenis rendering yang digunakan situs untuk menampilkan kontennya. Ada beberapa opsi berbeda dalam hal merender halaman JavaScript Anda, dan beberapa di antaranya lebih baik untuk bot pencarian dibandingkan yang lain.

Render Sisi Server

Sesuai dengan namanya, server-side rendering (SSR) terjadi ketika proses rendering terjadi langsung di server. Setelah dirender, halaman web HTML akhir kemudian dikirimkan ke browser, tempat pengunjung dapat melihatnya dan bot dapat merayapinya.

Render sisi server dianggap sebagai pilihan yang baik untuk SEO karena dapat mengurangi waktu pemuatan konten dan mencegah pergeseran tata letak. Pendekatan sisi server juga membantu memastikan semua elemen Anda benar-benar dirender, dan teknologi sisi klien tidak mengabaikannya.

Namun, rendering sisi server juga dapat meningkatkan waktu yang dibutuhkan halaman untuk menerima masukan pengguna. Inilah sebabnya beberapa situs yang sangat bergantung pada JavaScript lebih memilih menggunakan SSR pada halaman web yang benar-benar penting untuk SEO, namun tidak pada halaman yang mengutamakan fungsionalitas solid.

Rendering Sisi Klien

Render sisi klien (CSR) mengalihkan beban kerja rendering dari server ke klien (browser). Alih-alih menerima HTML yang dirender sepenuhnya langsung dari server, pengguna malah menerima beberapa HTML barebone bersama dengan file JavaScript untuk dirender oleh browser mereka sendiri.

Karena browser itu sendiri perlu menangani beban rendering, rendering sisi klien umumnya lebih lambat dibandingkan rendering sisi server. Hal ini dapat menyebabkan masalah SEO yang jelas karena kecepatan halaman adalah salah satu dari banyak sinyal teknis SEO yang digunakan Google untuk menentukan peringkat halaman. Selain itu, kecepatan memuat yang lebih lambat juga dapat meningkatkan rasio pentalan, dan meskipun rasio pentalan mungkin bukan merupakan sinyal, kecepatan pemuatan yang tinggi dapat menunjukkan pengalaman penelusuran yang buruk dan pengunjung situs yang frustrasi. Jika Anda ingin meningkatkan kecepatan situs, beralih dari rendering sisi klien mungkin bukan ide yang buruk.

Render Dinamis

Render dinamis menggunakan rendering sisi klien dan sisi server pada waktu yang berbeda. Permintaan yang datang dari browser akan menerima halaman versi sisi klien, sedangkan permintaan yang datang dari bot yang mungkin bermasalah dengan JavaScript akan mendapatkan versi sisi server. Ini melindungi fungsionalitas pada halaman terpenting sekaligus memudahkan crawler pencarian mengakses halaman yang memerlukan pengindeksan.

Situs dengan banyak konten dinamis yang perlu sering diperbarui dan diindeks ulang dapat memanfaatkan gaya rendering yang lebih fleksibel ini. Namun, meskipun rendering dinamis mungkin terdengar seperti solusi yang solid untuk masalah rendering Anda, sebenarnya ini bukan solusi yang disarankan Google. Faktanya, laman Pusat penelusuran Google untuk JavaScript secara khusus memperingatkan bahwa rendering dinamis adalah “solusi” dan “bukan solusi jangka panjang” karena kerumitan ekstra dan kebutuhan sumber daya. Meskipun demikian, ini masih bisa menjadi perbaikan jangka pendek bila diperlukan.

Rendering Statis

Rendering statis, juga dikenal sebagai pra-rendering, melibatkan pembuatan konten HTML untuk suatu halaman selama proses pembuatan atau penerapan, bukan saat runtime. File HTML yang telah dirender sebelumnya kemudian disajikan langsung ke browser atau klien berdasarkan permintaan.

Dalam rendering statis, server menghasilkan file HTML dengan semua konten dan data yang diperlukan untuk halaman tersebut, termasuk elemen dinamis. Ini berarti browser atau klien menerima halaman HTML yang dirender sepenuhnya tanpa memerlukan pemrosesan tambahan atau eksekusi JavaScript.

File HTML yang telah dirender sebelumnya dapat dengan mudah dirayapi oleh bot mesin pencari, sehingga memungkinkan pengindeksan konten situs web yang lebih baik. Selain itu, rendering statis dapat meningkatkan waktu pemuatan halaman secara signifikan karena konten sudah ada dalam file HTML dan tidak memerlukan rendering tambahan di sisi klien.

Jenis Rendering Mana yang Terbaik untuk SEO?

Google merekomendasikan penggunaan rendering sisi server, rendering statis, atau menggabungkan rendering sisi klien dan sisi server melalui rehidrasi (mirip dengan rendering dinamis). Google tidak melarang rendering sisi klien, namun karena bisa lebih bermasalah, hal ini tidak disukai. Seiring bertambahnya jumlah JavaScript di aplikasi atau halaman, hal ini dapat berdampak negatif pada interaksi halaman ke cat berikutnya (INP, yang akan menjadi bagian dari Core Web Vitals pada Maret 2024) saat dirender di sisi klien. Terkait JavaScript sisi klien, Google menyarankan untuk mengambil pendekatan “hanya melayani apa yang Anda butuhkan, saat Anda membutuhkannya.”

Tips untuk Mengurangi Masalah SEO JavaScript

Membuat situs Anda ramah SEO JavaScript tidak harus terlalu rumit, namun ada beberapa praktik terbaik yang harus Anda ikuti untuk mendapatkan hasil yang luar biasa. Berikut adalah beberapa tip SEO JavaScript untuk membantu Anda dan tim pengembangan Anda menyusun strategi JavaScript yang tidak akan merusak peringkat Anda.

1. Pastikan Google Mengindeks Konten JavaScript

Jangan percaya bahwa Google akan merender dan mengindeks konten JavaScript Anda secara otomatis. Luangkan waktu untuk memeriksanya sendiri dengan melakukan penelusuran situs untuk string teks tertentu di halaman Anda yang diberi tanda kutip (situs: domainanda.com “teks spesifik). Jika halaman tersebut muncul, Anda dapat yakin bahwa halaman tersebut telah diindeks.

Anda juga dapat menggunakan beberapa alat Google yang berbeda (Alat Inspeksi URL, Pengujian Ramah Seluler) dan alat pihak ketiga (Screaming Frog, JetOctopus) untuk menggali lebih dalam dan menguji penerapan JavaScript Anda. Lihat bagian “Pengujian dan Pemecahan Masalah” di bagian bawah panduan ini untuk mempelajari lebih lanjut tentang penggunaan alat ini untuk memeriksa kesalahan pengindeksan terkait JavaScript.

Terakhir, jangan lupa robots.txt dapat mencegah crawler penelusuran mengakses halaman tertentu. Jika Google tidak mengindeks halaman, pastikan file robots.txt tidak melarangnya. Google tidak menyarankan penggunaan robots.txt untuk memblokir file JavaScript karena hal ini dapat memengaruhi kemampuan Googlebot untuk merender konten pada halaman dengan benar dan mengindeks halaman tersebut.

2. Ikuti Praktik Terbaik SEO On-Page

Hanya karena Anda bekerja dengan JavaScript dan bukan HTML tidak berarti proses SEO pada halaman akan berubah. Semua optimasi teknis dan optimasi pada halaman (tag, judul, atribut, dll.) masih penting. Google sebenarnya telah menyarankan pengembang untuk menghindari penggunaan JavaScript untuk membuat atau mengelola tag kanonik.

3. Gunakan Tautan Internal yang Efektif

Tanpa tautan internal, bot pencarian tidak dapat menemukan semua halaman dalam arsitektur situs Anda dan akan kesulitan merayapi atau memberi peringkat pada halaman tersebut. Untuk tujuan SEO JavaScript, yang terbaik adalah memiliki tautan dalam HTML daripada JavaScript sehingga tautan tersebut dapat segera dirayapi, bukan setelah dirender.

Jika Anda menggunakan JavaScript untuk memasukkan tautan secara dinamis ke dalam kode Anda, pastikan Anda tetap menyiapkannya menggunakan markup HTML yang tepat. Saya juga merekomendasikan penggunaan Alat Inspeksi URL Google untuk memeriksa apakah teks tautan ada dalam HTML akhir yang dirender. Selain itu, Google menyarankan untuk menghindari penautan dengan event handler JavaScript atau elemen HTML seperti <div> atau <span> karena hal ini dapat menimbulkan masalah bagi Googlebot dan dapat mencegahnya merayapi tautan tersebut.

4. Jauhi Hash di URL

SPA (aplikasi satu halaman) dapat menggunakan URL terfragmentasi untuk memuat tampilan berbeda. Namun, Google ingin admin web menghindari penggunaan hash pada URL yang terfragmentasi, sehingga Anda tidak boleh mengandalkan hash tersebut untuk bekerja dengan Googlebot. Sebaliknya, mereka merekomendasikan penggunaan History API untuk memuat konten berbeda berdasarkan URL.

5. Gunakan Gambar yang Memuat Lambat

Pemuatan lambat adalah praktik menunda pemuatan aset halaman yang kurang penting atau tidak terlihat. Ini umum untuk mengoptimalkan kinerja dan UX. Namun jika Anda tidak hati-hati dalam menunda dan cara melakukannya, Anda mungkin mengalami masalah pengindeksan.

Googlebot tidak menggulir saat melihat konten; itu hanya mengubah ukuran area pandangnya. Artinya, peristiwa gulir yang diberi skrip mungkin tidak terpicu, dan konten mungkin tidak dirender. Google menyarankan beberapa cara berbeda untuk memastikan semua konten di halaman Anda dimuat saat pemuatan lambat.

Mungkin yang terbaik adalah membiarkan gambar Anda memuat lambat. Konten yang lambat dimuat berisiko karena mungkin waktu habisnya dan akhirnya tidak diindeks.

6. Perbaiki Konten Duplikat

Google menyatakan bahwa duplikat konten bukan merupakan dasar untuk tindakan manual kecuali jika konten tersebut bersifat jahat atau menipu. Namun hal ini masih dapat menghabiskan anggaran perayapan Anda, menunda pengindeksan, dan menyebabkan halaman Anda bersaing satu sama lain untuk mendapatkan peringkat. JavaScript cenderung membuat beberapa URL untuk konten yang sama, jadi putuskan versi mana yang ingin Anda indeks dan terapkan tag kanonik dan noindex pada versi lainnya.

7. Jalankan Audit Situs Reguler

Seiring dengan meningkatnya volume dan kompleksitas kode JavaScript suatu laman, penting untuk memeriksa apakah laman tersebut dirender dan diindeks dengan benar. Audit situs yang dijadwalkan secara rutin dapat membantu Anda menemukan apa pun yang mungkin Anda lewatkan selama putaran awal pengujian penerapan, jadi jangan lupa untuk menjadikan SEO JavaScript sebagai bagian dari daftar periksa SEO reguler Anda.

Pengujian dan Pemecahan Masalah

Ada beberapa alat berbeda yang dapat Anda gunakan untuk menguji apakah Google kesulitan mengindeks JavaScript di situs web Anda atau apakah perbaikan SEO JavaScript Google terbaru Anda berhasil.

Perhentian pertama Anda adalah alat web Google — khususnya Alat Inspeksi URL dan alat Pengujian Situs Mobile-Friendly. Alat-alat ini tidak sempurna, karena alat ini menghasilkan versi laman Anda dari sumber daya yang tersedia secara real-time, bukan versi cache yang sama dengan yang digunakan perender. Namun mereka masih bisa memberi Anda gambaran yang cukup akurat tentang bagaimana Google menangani JavaScript Anda.

Alat Uji Ramah Seluler memungkinkan Anda melihat antara kode di laman Anda dan tangkapan layar dari apa yang dilihat Google, sehingga Anda dapat membandingkan keduanya untuk JavaScript yang mungkin tidak dijalankan dengan benar. Anda dapat mengakses fitur ini dengan mengklik “Lihat Halaman yang Diuji” setelah pengujian selesai. Mengklik tab “Info Lebih Lanjut” juga menunjukkan potensi pesan kesalahan yang berasal dari konsol JavaScript dan informasi lebih lanjut tentang sumber daya halaman mana yang gagal dimuat dan alasannya.

Demikian pula, Alat Inspeksi URL Google memberi Anda tangkapan layar tentang bagaimana Googlebot melihat laman Anda sehingga Anda dapat memeriksa elemen-elemennya secara visual. Ini juga menampilkan status indeks halaman Anda sehingga Anda dapat dengan cepat mengetahui apakah salah satu halaman Anda yang penuh skrip belum diindeks dan mungkin memerlukan perhatian.

Selain alat web ini, ada beberapa alat pihak ketiga yang dapat Anda gunakan untuk pengujian dan pemecahan masalah. Alat perayap seperti Screaming Frog dan JetOctopus dapat merender tangkapan layar JavaScript dari laman Anda. Namun, perlu diingat bahwa rendering ini belum tentu sama dengan rendering yang dihasilkan Googlebot karena crawler lain yang membuatnya.

Dapatkan Bantuan Dari Pakar SEO Teknis

JavaScript SEO memiliki banyak bagian yang bergerak. Dengan mitra yang berdedikasi, Anda tidak harus mengatasi masalah teknis SEO ini sendirian. Victorious dapat membantu Anda dan tim pengembang Anda memastikan situs Anda dioptimalkan dengan benar dan upaya SEO Anda berkontribusi pada tujuan bisnis Anda. Hubungi konsultasi gratis untuk mempelajari lebih lanjut.