Panduan untuk mendiagnosis masalah umum SEO JavaScript

Jujur saja, JavaScript dan SEO tidak selalu cocok bersama. Untuk beberapa SEO, topiknya bisa terasa seperti diselimuti selubung kerumitan.

Nah, kabar baiknya: saat Anda mengupas lapisannya, banyak masalah SEO berbasis JavaScript kembali ke dasar bagaimana perayap mesin telusur berinteraksi dengan JavaScript.

Jadi, jika Anda memahami dasar-dasar tersebut, Anda dapat menggali masalah, memahami dampaknya, dan bekerja sama dengan developer untuk memperbaiki masalah yang penting.

Dalam artikel ini, kami akan membantu mendiagnosis beberapa masalah umum saat situs dibuat di kerangka kerja JS. Selain itu, kami akan menguraikan pengetahuan dasar yang dibutuhkan setiap SEO teknis terkait rendering.

Singkatnya

Sebelum kita masuk ke hal-hal yang lebih terperinci, mari kita bicara gambaran besarnya.

Agar mesin telusur memahami konten yang diberdayakan oleh JavaScript, mesin telusur harus merayapi dan merender laman.

Masalahnya adalah, mesin pencari hanya memiliki begitu banyak sumber daya untuk digunakan, sehingga mereka harus selektif tentang kapan layak menggunakannya. Bukan hal yang pasti bahwa sebuah halaman akan dirender, bahkan jika perayap mengirimkannya ke antrean rendering.

Jika memilih untuk tidak merender halaman, atau tidak dapat merender konten dengan benar, ini bisa menjadi masalah.

Itu tergantung pada bagaimana ujung depan menyajikan HTML dalam respons server awal.

Saat URL dibuat di browser, ujung depan seperti React, Vue, atau Gatsby akan menghasilkan HTML untuk halaman tersebut. Perayap memeriksa apakah HTML tersebut sudah tersedia dari server (HTML "yang telah dirender sebelumnya"), sebelum mengirimkan URL untuk menunggu perenderan agar dapat melihat konten yang dihasilkan.

Ketersediaan HTML pra-render tergantung pada bagaimana ujung depan dikonfigurasi. Itu akan menghasilkan HTML melalui server atau di browser klien.

Render sisi server

Nama mengatakan itu semua. Dalam penyiapan SSR, crawler diberi makan halaman HTML yang dirender sepenuhnya tanpa memerlukan eksekusi dan rendering JS tambahan.

Jadi meskipun halaman tidak dirender, mesin telusur masih dapat meng-crawl HTML apa pun, mengontekstualisasikan halaman (metadata, salinan, gambar), dan memahami hubungannya dengan halaman lain (breadcrumb, URL kanonis, tautan internal).

Render sisi klien

Di CSR, HTML dibuat di browser bersama dengan semua komponen JavaScript. JavaScript perlu dirender sebelum HTML tersedia untuk dirayapi.

Jika layanan perenderan memilih untuk tidak merender halaman yang dikirim ke antrean, salinan, URL internal, tautan gambar, dan bahkan metadata tetap tidak tersedia untuk perayap.

Akibatnya, mesin telusur memiliki sedikit atau bahkan tidak ada konteks untuk memahami relevansi URL dengan kueri penelusuran.

Catatan : Mungkin ada campuran HTML yang disajikan di respons HTML awal, serta HTML yang membutuhkan JS untuk dieksekusi agar dapat dirender (muncul). Itu tergantung pada beberapa faktor, yang paling umum termasuk kerangka kerja, bagaimana masing-masing komponen situs dibuat, dan konfigurasi server.

Perangkat SEO JavaScript

Pasti ada alat di luar sana yang akan membantu mengidentifikasi masalah SEO terkait JavaScript.

Anda dapat melakukan banyak penyelidikan menggunakan alat browser dan Google Search Console. Inilah daftar singkat yang membentuk perangkat yang solid:

• Lihat sumber: Klik kanan pada halaman dan klik "lihat sumber" untuk melihat HTML halaman yang telah dirender sebelumnya (tanggapan server awal).
• Uji URL langsung (inspeksi URL): Lihat tangkapan layar, HTML, dan detail penting lainnya dari halaman yang dirender di tab inspeksi URL Google Search Console. (Banyak masalah rendering dapat ditemukan dengan membandingkan HTML yang telah dirender sebelumnya dari "sumber tampilan" dengan HTML yang dirender dari pengujian URL langsung di GSC.)
• Alat Pengembang Chrome: Klik kanan pada halaman dan pilih "Periksa" untuk membuka alat untuk melihat kesalahan JavaScript dan lainnya.
• Wappalyzer: Lihat tumpukan tempat situs mana pun dibangun dan cari wawasan khusus kerangka kerja dengan memasang ekstensi Chrome gratis ini.

Masalah umum SEO JavaScript

Masalah 1: HTML pra-render tidak tersedia secara universal

Selain implikasi negatif untuk perayapan dan kontekstualisasi yang disebutkan sebelumnya, ada juga masalah waktu dan sumber daya yang diperlukan mesin telusur untuk merender laman.

Jika perayap memilih untuk memasukkan URL melalui proses perenderan, itu akan berakhir di antrean perenderan. Ini terjadi karena perayap mungkin merasakan perbedaan antara struktur HTML yang dirender sebelumnya dan yang dirender. (Yang sangat masuk akal jika tidak ada HTML yang dirender sebelumnya!)

Tidak ada jaminan berapa lama URL menunggu layanan perenderan web. Cara terbaik untuk mengubah WRS menjadi rendering yang tepat waktu adalah dengan memastikan adanya sinyal otoritas utama di lokasi yang menggambarkan pentingnya sebuah URL (misalnya, ditautkan di nav atas, banyak tautan internal, direferensikan sebagai kanonis). Itu menjadi sedikit rumit karena sinyal otoritas juga perlu dirayapi.

Di Google Search Console, Anda dapat mengetahui apakah Anda mengirimkan sinyal otoritas yang tepat ke halaman utama atau menyebabkannya tidak tertampung.

Buka Halaman > Pengindeksan halaman > Dirayapi – saat ini tidak diindeks dan cari keberadaan halaman prioritas dalam daftar.

Jika mereka berada di ruang tunggu, itu karena Google tidak dapat memastikan apakah mereka cukup penting untuk menghabiskan sumber daya.

Penyebab umum

Pengaturan default

Ujung depan yang paling populer datang "keluar dari kotak" yang diatur ke rendering sisi klien, jadi ada kemungkinan besar pengaturan default adalah biang keladinya.

Jika Anda bertanya-tanya mengapa kebanyakan frontend default ke CSR, itu karena manfaat kinerjanya. Pengembang tidak selalu menyukai SSR, karena SSR dapat membatasi kemungkinan untuk mempercepat situs dan menerapkan elemen interaktif tertentu (misalnya, transisi unik antar halaman).

Aplikasi satu halaman

Jika sebuah situs adalah aplikasi satu halaman, itu dibungkus seluruhnya dalam JavaScript dan menghasilkan semua komponen halaman di browser (alias semuanya) dirender di sisi klien dan halaman baru disajikan tanpa memuat ulang).

Ini memiliki beberapa implikasi negatif, mungkin yang paling penting adalah halaman berpotensi tidak dapat ditemukan.

Ini bukan untuk mengatakan bahwa tidak mungkin mengatur SPA dengan cara yang lebih SEO-friendly. Tapi kemungkinan besar, akan ada beberapa pekerjaan dev signifikan yang diperlukan untuk mewujudkannya.

Masalah 2: Beberapa konten halaman tidak dapat diakses oleh perayap

Mendapatkan mesin pencari untuk merender URL itu bagus, asalkan semua elemen tersedia untuk dirayapi. Bagaimana jika itu merender halaman, tetapi ada bagian halaman yang tidak dapat diakses?

Misalnya, SEO melakukan analisis tautan internal dan menemukan sedikit atau tidak ada tautan internal yang dilaporkan untuk URL yang ditautkan di beberapa halaman.

Jika link tidak muncul di HTML yang dirender dari fitur Test Live URL, kemungkinan link tersebut ditayangkan di resource JavaScript yang tidak dapat diakses oleh Google.

Untuk mempersempit pelakunya, sebaiknya cari kesamaan dalam hal di mana konten halaman yang hilang atau tautan internal berada di halaman di seluruh URL.

Misalnya, jika itu adalah tautan FAQ yang muncul di bagian yang sama di setiap halaman produk, itu sangat membantu pengembang mempersempit perbaikan.

Penyebab umum

Kesalahan JavaScript

Mari kita mulai dengan penafian di sini. Sebagian besar kesalahan JavaScript yang Anda temui tidak penting untuk SEO.

Jadi jika Anda mencari kesalahan, membawa daftar panjang ke dev Anda, dan memulai percakapan dengan "Apa semua kesalahan ini?", mereka mungkin tidak menerimanya dengan baik.

Dekati dengan "mengapa" dengan membicarakan masalahnya, sehingga mereka bisa menjadi ahli JavaScript (karena memang begitu!).

Karena itu, ada kesalahan sintaksis yang dapat membuat halaman lainnya tidak dapat diurai (mis. "pemblokiran render"). Saat ini terjadi, perender tidak dapat memisahkan elemen HTML individual, menyusun konten dalam DOM, atau memahami hubungan.

Secara umum, jenis kesalahan ini dapat dikenali karena memiliki semacam efek pada tampilan browser juga.

Selain konfirmasi visual, kesalahan JavaScript juga dapat dilihat dengan mengeklik kanan laman, memilih "periksa", dan membuka tab "Konsol".

Konten memerlukan interaksi pengguna

Salah satu hal terpenting yang perlu diingat tentang perenderan adalah bahwa Google tidak dapat merender konten apa pun yang mengharuskan pengguna untuk berinteraksi dengan laman. Atau, sederhananya, itu tidak bisa "mengklik" sesuatu.

Mengapa itu penting? Pikirkan tentang teman lama kami yang tepercaya, dropdown akordeon, dan berapa banyak situs yang menggunakannya untuk mengatur konten seperti detail produk dan FAQ.

Bergantung pada bagaimana akordeon dikodekan, Google mungkin tidak dapat merender konten di dropdown jika tidak terisi hingga JS dieksekusi.

Untuk memeriksanya, Anda dapat "Memeriksa" halaman, dan melihat apakah konten "tersembunyi" (yang ditampilkan setelah Anda mengeklik akordeon) ada di HTML.

Jika tidak, berarti Googlebot dan crawler lainnya tidak melihat konten ini dalam versi halaman yang dirender.

Masalah 3: Bagian situs tidak dirayapi

Google mungkin merender atau tidak merender halaman Anda jika meng-crawl dan mengirimkannya ke antrean. Jika tidak merayapi halaman, peluang itu pun tidak ada.

Untuk memahami apakah Google merayapi laman, laporan Statistik Perayapan dapat berguna Setelan > Statistik perayapan .

Pilih Permintaan perayapan: OK (200) untuk melihat semua contoh perayapan dari 200 halaman status dalam tiga bulan terakhir. Kemudian, gunakan pemfilteran untuk mencari URL individual atau seluruh direktori.

Jika URL tidak muncul di log perayapan, kemungkinan besar Google tidak dapat menemukan halaman dan merayapinya (atau tidak ada 200 halaman, yang merupakan masalah yang sama sekali berbeda).

Penyebab umum

Tautan internal tidak dapat dirayapi

Tautan adalah rambu-rambu jalan yang diikuti crawler ke halaman baru. Itulah salah satu alasan mengapa halaman yatim piatu menjadi masalah besar.

Jika Anda memiliki situs yang ditautkan dengan baik dan melihat halaman yatim piatu muncul di audit situs Anda, ada kemungkinan besar itu karena tautan tersebut tidak tersedia di HTML yang telah dirender sebelumnya.

Cara mudah untuk memeriksanya adalah dengan membuka URL yang tertaut ke halaman yatim piatu yang dilaporkan. Klik kanan pada halaman dan klik "lihat sumber."

Kemudian, gunakan CMD + f untuk mencari URL halaman anak yatim. Jika tidak muncul di HTML yang telah dirender sebelumnya tetapi muncul di halaman saat dirender di browser, lanjutkan ke nomor empat.

Peta situs XML tidak diperbarui

Peta situs XML sangat penting untuk membantu Google menemukan halaman baru dan memahami URL mana yang harus diprioritaskan dalam perayapan.

Tanpa peta situs XML, penemuan halaman hanya dimungkinkan dengan mengikuti tautan.

Jadi untuk situs tanpa HTML yang dirender sebelumnya, peta situs yang kedaluwarsa atau hilang berarti menunggu Google merender halaman, mengikuti tautan internal ke halaman lain, mengantri, merender, mengikuti tautannya, dan seterusnya.

Bergantung pada ujung depan yang Anda gunakan, Anda mungkin memiliki akses ke plugin yang dapat membuat peta situs XML dinamis.

Mereka sering membutuhkan penyesuaian, jadi penting bagi SEO untuk rajin mendokumentasikan URL apa pun yang tidak boleh ada di peta situs dan logika mengapa demikian.

Ini seharusnya relatif mudah diverifikasi dengan menjalankan peta situs melalui alat SEO favorit Anda.

Masalah 4: Tautan internal hilang

Tidak tersedianya tautan internal ke perayap bukan hanya masalah penemuan potensial, tetapi juga masalah ekuitas. Karena tautan melewati ekuitas SEO dari URL referensi ke URL target, mereka merupakan faktor penting dalam menumbuhkan otoritas halaman dan domain.

Tautan dari beranda adalah contoh yang bagus. Ini biasanya halaman yang paling otoritatif di situs web, jadi tautan ke halaman lain dari beranda memiliki banyak bobot.

Jika tautan tersebut tidak dapat dirayapi, ini seperti memiliki lightsaber yang rusak. Salah satu alat Anda yang paling kuat dianggap tidak berguna (permainan kata-kata).

Penyebab umum

Interaksi pengguna diperlukan untuk mendapatkan tautan

Contoh akordeon yang kita gunakan sebelumnya hanyalah satu contoh di mana konten disembunyikan di balik interaksi pengguna. Hal lain yang dapat memiliki implikasi luas adalah penomoran gulir tak terbatas – terutama untuk situs eCommerce dengan katalog produk yang substansial.

Dalam penyiapan pengguliran tak terbatas, produk yang tak terhitung jumlahnya pada halaman daftar produk (kategori) tidak akan dimuat kecuali jika pengguna menggulir melewati titik tertentu (lazy loading) atau mengetuk tombol "tampilkan lebih banyak".

Jadi meskipun JavaScript dirender, perayap tidak dapat mengakses tautan internal untuk produk yang belum dimuat. Namun, memuat semua produk ini di satu halaman akan berdampak negatif pada pengalaman pengguna karena kinerja halaman yang buruk.

Inilah sebabnya mengapa SEO umumnya lebih memilih paginasi yang sebenarnya di mana setiap halaman hasil memiliki URL yang berbeda dan dapat dirayapi.

Meskipun ada cara bagi situs untuk mengoptimalkan pemuatan lambat dan menambahkan semua produk ke HTML yang telah dirender sebelumnya, hal ini akan menyebabkan perbedaan antara HTML yang telah dirender dan HTML yang telah dirender sebelumnya.

Secara efektif, ini menciptakan alasan untuk mengirim lebih banyak halaman ke antrean render dan membuat perayap bekerja lebih keras dari yang seharusnya – dan kami tahu itu tidak bagus untuk SEO.

Minimal, ikuti rekomendasi Google untuk mengoptimalkan pengguliran tak terbatas.

Tautan tidak dikodekan dengan benar

Saat Google meng-crawl situs atau merender URL dalam antrean, Google mendownload versi halaman yang tidak memiliki kewarganegaraan. Itu adalah bagian besar mengapa sangat penting untuk menggunakan tag dan jangkar href yang tepat (struktur penautan yang paling sering Anda lihat). Crawler tidak dapat mengikuti format link seperti router, span, atau onClick.

Dapat mengikuti:

• <a href="https://contoh.com">
• <a href="/relative/path/file">

Tidak dapat mengikuti:

• <a routerLink="beberapa/jalur">
• <span href="https://example.com">
• <a>

Untuk tujuan pengembang, ini semua adalah cara yang valid untuk membuat kode tautan. Implikasi SEO adalah lapisan konteks tambahan, dan bukan tugas mereka untuk mengetahuinya – ini adalah SEO.

Bagian besar dari pekerjaan SEO yang baik adalah menyediakan konteks itu kepada pengembang melalui dokumentasi.

Masalah 5: Metadata hilang

Di halaman HTML, metadata seperti judul, deskripsi, URL kanonis, dan tag robot meta semuanya bersarang di kepala.

Untuk alasan yang jelas, metadata yang hilang merugikan SEO, tetapi terlebih lagi untuk SPA. Elemen seperti URL kanonis referensi mandiri sangat penting untuk meningkatkan peluang halaman JS berhasil melewati antrean rendering.

Dari semua elemen yang harus ada dalam HTML yang telah dirender sebelumnya, kepala adalah yang paling penting untuk pengindeksan.

Untungnya, masalah ini cukup mudah ditangkap, karena akan memicu banyak sekali kesalahan karena metadata yang hilang di alat SEO mana pun yang digunakan situs untuk pelaporan kebersihan. Kemudian, Anda dapat mengonfirmasi dengan mencari kepala di kode sumber.

Penyebab umum

Kendaraan metadata kurang atau salah konfigurasi

Dalam framework JS, sebuah plugin membuat head dan memasukkan metadata ke dalam head. (Contoh yang paling populer adalah React Helmet.) Bahkan jika sebuah plugin sudah terinstal, biasanya plugin tersebut perlu dikonfigurasi dengan benar.

Sekali lagi, ini adalah area di mana semua SEO dapat lakukan adalah membawa masalah tersebut ke pengembang, menjelaskan alasannya, dan bekerja sama dengan kriteria penerimaan yang terdokumentasi dengan baik.

Masalah 6: Sumber daya tidak dirayapi

File skrip dan gambar adalah blok bangunan penting dalam proses rendering.

Karena mereka juga memiliki URL sendiri, hukum crawlability juga berlaku untuk mereka. Jika file diblokir dari crawling, Google tidak dapat mengurai halaman untuk merendernya.

Untuk melihat apakah URL dirayapi, Anda dapat melihat permintaan sebelumnya di Statistik Perayapan GSC.

• Gambar: Buka Pengaturan > Statistik Perayapan > Permintaan Perayapan: Gambar
• JavaScript: Buka Pengaturan > Statistik Perayapan > Permintaan Perayapan: Gambar

Penyebab umum

Direktori diblokir oleh robots.txt

Skrip dan URL gambar umumnya bersarang di subdomain atau subfolder khusus mereka sendiri, jadi ekspresi larang di robots.txt akan mencegah perayapan.

Beberapa alat SEO akan memberi tahu Anda jika ada file skrip atau gambar yang diblokir, tetapi masalahnya cukup mudah dikenali jika Anda tahu di mana file gambar dan skrip Anda disimpan. Anda dapat mencari struktur URL tersebut di robots.txt.

Anda juga dapat melihat skrip apa pun yang diblokir saat merender halaman dengan menggunakan alat inspeksi URL di Google Search Console. “Uji URL langsung” lalu buka Lihat halaman yang diuji > Info lebih lanjut > Sumber daya halaman .

Di sini Anda dapat melihat skrip yang gagal dimuat selama proses rendering. Jika file diblokir oleh robots.txt, itu akan ditandai seperti itu.

Berteman dengan JavaScript

Ya, JavaScript dapat disertai dengan beberapa masalah SEO. Namun seiring berkembangnya SEO, praktik terbaik menjadi identik dengan pengalaman pengguna yang luar biasa.

Pengalaman pengguna yang luar biasa seringkali bergantung pada JavaScript. Jadi, meskipun tugas SEO bukanlah membuat kode JavaScript, kita perlu mengetahui bagaimana mesin telusur berinteraksi, merender, dan menggunakannya.

Dengan pemahaman yang kuat tentang proses rendering dan beberapa masalah SEO umum dalam kerangka kerja JS, Anda berada di jalur yang tepat untuk mengidentifikasi masalah dan menjadi sekutu yang kuat bagi pengembang Anda.