Memperbaiki Masalah JavaScript Terkait Penelusuran

Kini, kami hadir di LinkedIn: Untuk mendapatkan berita dan referensi dari Google Penelusuran tentang cara membuat situs Anda dapat ditemukan, ikuti kami di LinkedIn.

Panduan ini membantu Anda mengidentifikasi dan mengatasi masalah JavaScript yang mungkin memblokir halaman Anda, atau konten tertentu pada halaman yang didukung JavaScript, sehingga tidak ditampilkan di Google Penelusuran. Meskipun Google menjalankan JavaScript, ada beberapa perbedaan dan batasan yang perlu Anda perhitungkan saat mendesain halaman web dan aplikasi Anda untuk mengakomodasi cara crawler mengakses dan merender konten Anda. Panduan dasar-dasar SEO JavaScript kami menyediakan informasi selengkapnya tentang cara mengoptimalkan situs JavaScript untuk Google Penelusuran.

Googlebot didesain untuk menjadi fitur web yang baik. Crawling adalah prioritas utamanya, dengan tetap memastikan hal tersebut tidak menyulitkan pengguna yang mengunjungi situs. Googlebot dan komponen Web Rendering Service (WRS) terus menganalisis dan mengidentifikasi resource yang tidak berkontribusi terhadap konten halaman yang penting, dan mungkin tidak mengambil resource tersebut. Misalnya, permintaan pelaporan dan error yang tidak berkontribusi pada konten halaman yang penting, dan jenis permintaan serupa lainnya tidak digunakan atau tidak diperlukan untuk mengekstrak konten halaman yang penting. Analisis sisi klien mungkin tidak memberikan gambaran yang lengkap atau akurat terhadap aktivitas Googlebot dan WRS di situs Anda. Gunakan Search Console untuk memantau aktivitas serta masukan Googlebot dan WRS di situs Anda.

Jika Anda menduga bahwa masalah JavaScript dapat memblokir halaman Anda, atau konten tertentu pada halaman yang didukung JavaScript, agar tidak muncul di Google Penelusuran, ikuti langkah-langkah berikut. Jika Anda tidak yakin apakah JavaScript merupakan penyebab utamanya, ikuti panduan proses debug umum kami untuk menentukan masalah tertentu.

Untuk menguji cara Google meng-crawl dan merender URL, gunakan Pengujian Hasil Multimedia atau Alat Inspeksi URL di Search Console. Anda dapat melihat resource yang dimuat, output dan pengecualian konsol JavaScript, DOM yang dirender, dan informasi selengkapnya.

Selain itu, kami juga merekomendasikan pengumpulan dan pengauditan error JavaScript yang ditemukan oleh pengguna, termasuk Googlebot, di situs Anda untuk mengidentifikasi potensi masalah yang dapat memengaruhi rendering konten.

Berikut adalah contoh yang menunjukkan cara mencatat error JavaScript yang dicatat di pengendali onerror global. Perlu diingat bahwa sebagian jenis error JavaScript, seperti error penguraian, tidak dapat dicatat menggunakan metode ini.

window.addEventListener('error', function(e) {
    var errorText = [
        e.message,
        'URL: ' + e.filename,
        'Line: ' + e.lineno + ', Column: ' + e.colno,
        'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
    ].join('\n');

    // Example: log errors as visual output into the host page.
    // Note: you probably don't want to show such errors to users, or
    //       have the errors get indexed by Googlebot; however, it may
    //       be a useful feature while actively debugging the page.
    var DOM_ID = 'rendering-debug-pre';
    if (!document.getElementById(DOM_ID)) {
        var log = document.createElement('pre');
        log.id = DOM_ID;
        log.style.whiteSpace = 'pre-wrap';
        log.textContent = errorText;
        if (!document.body) document.body = document.createElement('body');
        document.body.insertBefore(log, document.body.firstChild);
    } else {
        document.getElementById(DOM_ID).textContent += '\n\n' + errorText;
    }

    // Example: log the error to remote service.
    // Note: you can log errors to a remote service, to understand
    //       and monitor the types of errors encountered by regular users,
    //       Googlebot, and other crawlers.
    var client = new XMLHttpRequest();
    client.open('POST', 'https://example.com/logError');
    client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
    client.send(errorText);

});

Pastikan untuk mencegah error soft 404. Di aplikasi web satu halaman (SPA), hal ini bisa jadi sangat sulit. Agar halaman error tidak diindeks, Anda dapat menggunakan salah satu atau kedua strategi berikut:
- Mengalihkan ke URL yang servernya merespons dengan kode status 404.
```
fetch(`https://api.kitten.club/cats/${id}`)
 .then(res => res.json())
 .then((cat) => {
   if (!cat.exists) {
     // redirect to page that gives a 404
     window.location.href = '/not-found';
   }
 });
```
- Tambahkan atau ubah tag meta robots menjadi noindex.
```
fetch(`https://api.kitten.club/cats/${id}`)
 .then(res => res.json())
 .then((cat) => {
   if (!cat.exists) {
     const metaRobots = document.createElement('meta');
     metaRobots.name = 'robots';
     metaRobots.content = 'noindex';
     document.head.appendChild(metaRobots);
   }
 });
```
Jika SPA menggunakan JavaScript sisi klien untuk menangani error, sering kali yang dilaporkan adalah Kode status HTTP 200, bukan kode status yang tepat. Hal ini dapat menyebabkan halaman error diindeks dan mungkin ditampilkan di hasil penelusuran.
Googlebot akan menolak permintaan izin pengguna.
Fitur yang memerlukan izin pengguna merupakan hal yang tidak masuk akal bagi Googlebot, atau bagi semua pengguna. Misalnya, jika Anda mewajibkan Camera API, Googlebot tidak dapat menyediakan kamera untuk Anda. Sebagai gantinya, sediakan cara bagi pengguna untuk mengakses konten Anda tanpa dipaksa untuk mengizinkan akses kamera.
Jangan gunakan URL fragmen untuk memuat konten yang berbeda.
SPA dapat menggunakan URL fragmen (misalnya https://example.com/#/products) untuk memuat tampilan yang berbeda. Skema crawling AJAX tidak digunakan lagi sejak 2015, sehingga Anda tidak dapat mengandalkan URL fragmen untuk berfungsi dengan Googlebot. Sebaiknya gunakan History API untuk memuat konten yang berbeda berdasarkan URL di SPA.
Jangan andalkan persistensi data untuk menayangkan konten.
WRS memuat setiap URL (lihat Cara Kerja Google Penelusuran untuk mengetahui secara ringkas cara Google menemukan konten), dengan mengikuti pengalihan server dan klien, sama seperti browser biasa. Namun, WRS tidak mempertahankan status di seluruh pemuatan halaman:
- Data Penyimpanan Lokal dan Penyimpanan Sesi dihapus di seluruh pemuatan halaman.
- Cookie HTTP dihapus di seluruh pemuatan halaman.
Gunakan pelacakan sidik jari konten untuk mencegah masalah penyimpanan ke cache dengan Googlebot.
Googlebot melakukan cache secara terus-menerus untuk mengurangi permintaan jaringan dan penggunaan resource. WRS dapat mengabaikan header cache. Hal ini dapat menyebabkan WRS menggunakan resource JavaScript atau CSS yang sudah tidak berlaku. Penyidikjarian konten mencegah masalah ini dengan membuat sidik jari dari bagian konten nama file, seperti main.2bb85551.js. Sidik jari bergantung pada konten file, sehingga pembaruan akan menghasilkan nama file yang berbeda setiap kalinya. Lihat panduan web.dev tentang strategi cache yang tahan lama untuk mempelajari lebih lanjut.
Pastikan aplikasi Anda menggunakan deteksi fitur untuk semua API penting yang diperlukan dan menyediakan perilaku penggantian atau polyfill jika berlaku.
Fitur web tertentu mungkin belum digunakan oleh semua agen pengguna dan sejumlah agen pengguna mungkin sengaja menonaktifkan fitur tertentu. Misalnya, jika Anda menggunakan WebGL untuk merender efek foto di browser, deteksi fitur menunjukkan bahwa Googlebot tidak mendukung WebGL. Untuk mengatasinya, Anda dapat melewati efek foto atau memutuskan untuk menggunakan rendering sisi server guna melakukan prarender efek foto, sehingga konten Anda dapat diakses oleh siapa pun, termasuk Googlebot.
Pastikan konten Anda berfungsi dengan koneksi HTTP.
Googlebot menggunakan permintaan HTTP untuk mengambil konten dari server Anda. Metode ini tidak mendukung jenis koneksi lainnya, seperti koneksi WebSockets atau WebRTC. Agar tidak terjadi masalah pada koneksi tersebut, pastikan Anda menyediakan penggantian HTTP untuk mengambil konten serta menggunakan penanganan error dan deteksi fitur yang andal.
Pastikan komponen web Anda dirender seperti yang diharapkan. Gunakan Pengujian Hasil Multimedia atau Alat Inspeksi URL untuk mengetahui apakah HTML yang dirender memiliki semua konten yang Anda harapkan.
WRS meratakan light DOM dan shadow DOM. Jika komponen web yang Anda gunakan tidak menggunakan mekanisme <slot> untuk konten light DOM, lihat dokumentasi komponen web tersebut untuk mendapatkan informasi lebih lanjut atau gunakan komponen web lain sebagai gantinya. Untuk informasi selengkapnya, lihat praktik terbaik untuk komponen web.
Setelah Anda memperbaiki item dalam checklist ini, uji kembali halaman Anda dengan Pengujian Hasil Multimedia atau Alat Inspeksi URL di Search Console.
Jika masalah ini telah diperbaiki, tanda centang hijau akan muncul dan tidak ada error yang ditampilkan. Jika Anda masih melihat error, posting di Grup Kerja Situs JavaScript di Penelusuran.