Javascript : Bagaimana cara menguji implementasi SSR dan/atau Pra-rendering dengan Oncrawl?
Diterbitkan: 2021-09-13Mendiagnosis masalah SEO dengan implementasi JavaScript situs tidak selalu mudah. Saat Anda memilih Server Side Rendering atau Pra-rendering untuk bot, tugas bisa menjadi lebih rumit.
Anda harus memastikan bahwa versi yang disajikan ke bot Google sudah lengkap, bahwa semua elemen javascript telah dieksekusi di sisi server dan ada dalam html yang dirayapi oleh bot.
Pada artikel ini, kita akan melihat cara cepat dan mudah menguji rendering JS Anda dari semua halaman Anda menggunakan Oncrawl.
SEO dan JS
Sebelum memulai dengan latihan, mari kita cepat membahas minat SEO Server Side Rendering (SSR) dan Pra-render elemen javascript dari sebuah situs.
JS dan Google: praktik yang baik
Secara default, rendering HTML javascript dilakukan oleh klien, yaitu browser web Anda. Saat Anda meminta halaman yang berisi elemen JS, browser Andalah yang mengeksekusi kode javascript ini untuk menampilkan halaman yang lengkap. Ini disebut Rendering Sisi Klien (CSR).
Bagi Google ini menjadi masalah karena membutuhkan banyak waktu dan terutama sumber daya. Ini memaksanya untuk membuka halaman Anda dua kali, sekali untuk mengambil kode, lalu kedua kalinya setelah merender HTML JS.
Sebagai konsekuensi langsung dari CSR untuk SEO Anda, konten lengkap halaman Anda tidak akan langsung terlihat oleh Google dan oleh karena itu dapat menunda pengindeksan halaman Anda. Selain itu, anggaran perayapan yang diberikan ke situs Anda juga terpengaruh karena halaman Anda perlu dirayapi dua kali.
SSR (perenderan sisi server)
Dalam kasus SSR, rendering HTML dari javascript dilakukan di sisi server untuk semua pengunjung situs, manusia, dan bot. Akibatnya, Google tidak perlu mengelola konten di JS karena langsung mendapatkan html lengkap pada saat crawling. Ini mengoreksi cacat javascript di SEO.
Di sisi lain, biaya sumber daya untuk mencapai rendering ini di sisi server bisa menjadi penting. Di sinilah opsi ketiga masuk, pra-rendering.
Pra-rendering
Dalam konfigurasi hybrid ini, eksekusi JS dilakukan di sisi klien untuk semua pengunjung (CSR) kecuali bot mesin pencari. Konten HTML pra-render disajikan ke bot Google untuk menjaga keuntungan SEO dari SSR tetapi juga keuntungan ekonomis dari CSR.
Praktek yang pada pandangan pertama dapat dianggap sebagai penyelubungan (menawarkan versi yang berbeda untuk bot dan pengunjung halaman web) sebenarnya adalah ide dari Google yang sangat dianjurkan. Kita bisa dengan mudah menebak alasannya.
Bagaimana cara menguji rendering Javascript dengan Oncrawl?
Ada banyak cara untuk mendiagnosis kesalahan SEO dalam implementasi JS. Dengan menggunakan Oncrawl Anda akan dapat menguji semua halaman Anda secara otomatis tanpa harus melakukan perbandingan manual.
Oncrawl mampu merayapi situs dengan menjalankan javascript di sisi klien. Idenya adalah meluncurkan dua perayapan dan menghasilkan perbandingan antara:
- Perayapan dengan rendering JS diaktifkan
- Perayapan dengan rendering JS dinonaktifkan
Kemudian untuk mengukur melalui beberapa metrik perbedaan antara dua perayapan ini, menandakan bahwa bagian dari javascript tidak dijalankan di sisi server.
Perhatikan bahwa dalam hal pra-perenderan, perayapan kedua harus dilakukan dengan agen pengguna Google untuk merayapi versi situs yang telah dirender sebelumnya.
Tes ini dapat dilakukan dalam tiga langkah:
- Buat profil perayapan
- Perayapan situs dengan setiap profil dan hasilkan perayapan di atas perayapan
- Analisis hasilnya
Buat profil perayapan
Profil dengan JS
Dari halaman proyek Anda, klik “+ Siapkan perayapan baru” .
Ini akan membawa Anda ke halaman pengaturan perayapan. Pengaturan perayapan default Anda ditampilkan. Anda dapat mengubahnya atau membuat konfigurasi perayapan baru.
Profil perayapan adalah kumpulan pengaturan yang telah disimpan di bawah nama untuk digunakan di masa mendatang.
Untuk membuat profil perayapan baru, klik tombol biru “+ Buat Profil Perayapan” di sudut kanan atas.
Beri nama "Crawl with JS" dan salin profil crawl Anda yang biasa (Default misalnya).
Untuk mengaktifkan JS pada profil baru ini, Anda harus menampilkan parameter tambahan yang disembunyikan secara default. Untuk mengaksesnya, klik tombol "Tampilkan pengaturan ekstra" di bagian atas halaman.
Lalu pergi ke pengaturan Ekstra dan klik "Aktifkan" di opsi Perayapan JS.
Catatan: Ingatlah untuk menyesuaikan kecepatan perayapan Anda dengan kapasitas server situs Anda, karena Oncrawl akan membuat lebih banyak panggilan per URL untuk mengeksekusi elemen dalam Javascript. Kecepatan ideal adalah kecepatan yang paling dapat didukung oleh server dan arsitektur situs Anda. Jika kecepatan perayapan OnCrawl terlalu cepat, server Anda mungkin tidak dapat mengikutinya.
Profil tanpa JS
Untuk profil perayapan kedua ini, ikuti langkah yang sama dan hapus centang pada kotak pengaktifan JS .
Catatan: penting untuk memiliki dua profil dengan cakupan yang sama agar perbandingan menjadi bermakna.
Jika situs Anda berada di Server Side Rendering, lanjutkan ke langkah berikutnya.
Jika situs Anda dalam pra-perenderan berbasis bot Google, Anda harus mengirimkan permintaan kepada kami untuk memodifikasi Agen Pengguna untuk perayapan. Setelah profil dibuat, kirimkan pesan kepada kami melalui Intercom langsung di aplikasi sehingga kami dapat mengganti Agen Pengguna Oncrawl dengan Agen Pengguna Google bot.
Mulai uji coba gratis selama 14 hari
Mulai uji coba AndaLuncurkan perayapan Anda dan hasilkan Perayapan atas Perayapan
Setelah dua profil dibuat, Anda hanya perlu merayapi situs Anda dengan dua profil ini secara bergantian. Untuk mempermudahnya, Anda bisa menggunakan fungsi crawl programming.
Jadwalkan perayapan
- Di halaman proyek, klik tab "Perayapan terjadwal" di bagian atas kotak pelacakan perayapan.
- Klik "+ Jadwalkan perayapan" untuk menjadwalkan perayapan baru.
- Anda kemudian harus memilih:
- Profil perayapan yang ingin Anda gunakan untuk perayapan mendatang
- Frekuensi untuk mengulang perayapan, pilih “Hanya sekali”.
- Tanggal, waktu (dalam format 24 jam) dan zona waktu (berdasarkan kota) saat Anda ingin perayapan dimulai.
- Klik "jadwalkan perayapan" .
Setelah kedua analisis perayapan Anda tersedia, Anda perlu membuat perayapan di atas perayapan. 
Hasilkan Perayapan atas Perayapan
- Dari halaman beranda proyek, luncurkan crawl over crawl:
- Di bawah "Tugas", klik tab "Menjalankan Perayapan di atas Perayapan" .
- Klik "+ Mulai perayapan di atas perayapan" .
- Pilih dua perayapan yang ingin Anda bandingkan.
Saat Anda mengklik “+ Run Crawl Over Crawl” , Oncrawl menganalisis perbedaan antara dua perayapan yang ada dan menambahkan laporan Perayapan Lebih Perayapan ke hasil analisis kedua perayapan tersebut.
Anda dapat mengikuti kemajuan perayapan perayapan ini di tab "Mulai perayapan perayapan" di beranda proyek. Karena perayapan sudah selesai, perayapan berlebih akan melewati status "Perayapan" dan mulai langsung dengan "Analisis".
Analisis hasilnya
Buka laporan perayapan perayapan pada tiga tampilan berikut:
- Struktur
- Isi
- Tautan internal
Anda juga dapat mengunduh dasbor khusus kami.
Metrik mana yang harus dilihat?
Halaman dirayapi, Jumlah kata rata-rata per halaman dan Rata-rata rasio teks ke kode
Halaman indikator pertama yang dirayapi menunjukkan kepada Anda segera jika kedua profil telah merayapi jumlah halaman yang sama.
Jika perbedaannya tidak signifikan, Anda dapat memeriksa dua indikator di halaman:
- Jumlah kata rata-rata per halaman
- Rasio teks ke kode rata-rata
Kedua metrik ini akan menyoroti perbedaan dalam konten html dengan atau tanpa eksekusi javascript di sisi klien.
Jika rata-rata kata per halaman lebih sedikit, itu berarti sebagian konten halaman tidak tersedia tanpa rendering JS.
Demikian pula, jika rasio teks ke rasio lebih rendah, itu berarti beberapa konten halaman tidak tersedia tanpa rendering JS.
Rasio teks terhadap kode mengukur seberapa banyak konten halaman yang terlihat (teks) dan seberapa banyak konten yang disandikan (kode). Semakin tinggi persentase yang dilaporkan, semakin banyak teks yang dikandung halaman dibandingkan dengan jumlah kode.
Kedalaman, Kedalaman, dan Tautan
Anda kemudian dapat melihat metrik yang terkait dengan mesh internal Anda yang lebih sensitif. Bahwa sebagian kecil dari konten halaman tidak tersedia tanpa perenderan JS tidak selalu menjadi masalah bagi SEO Anda, tetapi jika itu berdampak pada mesh internal Anda, konsekuensi pada kemampuan perayapan situs Anda dan anggaran perayapan lebih penting.
Bandingkan rata-rata kedalaman, rata-rata Inrank, rata-rata jumlah Inlink dan internal outlink.
Rata-rata kedalaman yang meningkat, rata-rata inrank yang menurun dan rata-rata penurunan jumlah inlink dan outlink merupakan indikator adanya mesh block yang dikelola di JS yang tidak di-pre-render di sisi server. Akibatnya, beberapa tautan tidak langsung tersedia untuk bot google.
Ini dapat memiliki konsekuensi pada semua atau sebagian situs Anda. Kemudian perlu mempelajari modifikasi ini berdasarkan kelompok halaman untuk mengidentifikasi apakah beberapa jenis halaman dirugikan oleh mesh javascript ini.
Penjelajah data akan memungkinkan Anda bermain dengan filter untuk menyorot elemen-elemen ini.
Pergi lebih jauh dengan penjelajah data dan detail URL
Dalam penjelajah data
Saat Anda melihat data Perayapan atas Perayapan di penjelajah data, Anda akan melihat dua kolom URL: satu untuk URL Perayapan 1 dan satu untuk URL Perayapan 2.
Anda kemudian dapat menambahkan setiap metrik yang disebutkan di atas (halaman yang dirayapi, jumlah kata, rasio teks ke kode, kedalaman, peringkat, tautan masuk) masing-masing dua kali untuk menampilkan nilai Perayapan 1 dan Perayapan 2 secara berdampingan.
Dengan menggunakan filter, Anda akan dapat mengidentifikasi URL dengan perbedaan terbesar.
Detail URL
Jika Anda telah mengidentifikasi perbedaan antara SSR dan/atau versi yang Dirender sebelumnya dan versi yang dirender sisi klien, maka Anda harus mempelajari lebih detail untuk memahami elemen JS mana yang tidak dioptimalkan untuk SEO.
Dengan mengklik halaman di data-explorer, Anda beralih ke detail URL dan Anda kemudian dapat melihat kode sumber seperti yang terlihat oleh Oncraw dengan mengklik tab “lihat sumber”.
Anda kemudian dapat mengambil kode HTML dengan mengklik Salin sumber HTML.
Di kiri atas, Anda dapat beralih dari satu perayapan ke perayapan lainnya untuk mengambil versi kode lainnya.
Dengan menggunakan alat perbandingan kode html, Anda dapat membandingkan dua versi halaman, dengan JS dan tanpa JS yang dieksekusi di sisi klien. Selebihnya, terserah Anda!