Menerapkan rendering dinamis

Saat ini, sulit untuk memproses JavaScript dan tidak semua crawler mesin telusur dapat memprosesnya dengan baik atau dengan segera. Kami berharap masalah ini dapat diperbaiki di waktu mendatang, namun untuk saat ini, kami merekomendasikan rendering dinamis sebagai solusi masalah ini. Rendering dinamis adalah pengalihan antara konten yang dirender di sistem klien dan konten yang telah dipra-render untuk agen pengguna tertentu.

Situs yang sebaiknya menggunakan rendering dinamis

Rendering dinamis cocok untuk konten yang terus-menerus berubah, dapat diindeks, dan dibuat oleh JavaScript publik, atau konten yang menggunakan fitur JavaScript yang tidak didukung oleh crawler yang penting bagi Anda. Tidak semua situs perlu menggunakan rendering dinamis, dan perlu dicatat bahwa rendering dinamis merupakan solusi yang akan membantu crawler.

Memahami cara kerja rendering dinamis

Rendering dinamis mengharuskan server web Anda mendeteksi crawler (misalnya, dengan memeriksa agen pengguna). Permintaan dari crawler diteruskan ke perender, sedangkan permintaan dari pengguna ditayangkan secara normal. Saat diperlukan, perender dinamis menayangkan versi konten yang sesuai untuk crawler, misalnya, dengan menayangkan versi HTML statis. Anda dapat memilih untuk mengaktifkan perender dinamis untuk semua halaman atau berdasarkan per halaman.

Diagram yang menunjukkan cara kerja rendering dinamis. Diagram menunjukkan server yang menayangkan konten JavaScript dan HTML awal langsung ke browser. Sebaliknya, diagram menunjukkan server yang menayangkan konten JavaScript dan HTML awal ke perender, yang selanjutnya mengonversi JavaScript dan HTML awal menjadi HTML statis. Setelah konten dikonversi, perender menayangkan HTML statis ke crawler.

Rendering dinamis bukanlah penyelubungan

Umumnya, Googlebot tidak menganggap rendering dinamis sebagai praktik penyelubungan. Selama rendering dinamis Anda menghasilkan konten yang serupa, Googlebot tidak akan menganggap rendering dinamis sebagai penyelubungan.

Saat Anda menyiapkan rendering dinamis, situs Anda dapat menghasilkan halaman error. Googlebot tidak menganggap halaman error ini sebagai penyelubungan dan akan memperlakukan error tersebut seperti halnya halaman error lainnya.

Penggunaan rendering dinamis untuk menayangkan konten yang sama sekali berbeda kepada pengguna dan crawler dapat dianggap sebagai penyelubungan. Misalnya, situs yang menayangkan halaman tentang kucing kepada pengguna dan halaman tentang anjing kepada crawler dapat dianggap sebagai penyelubungan.

Menerapkan rendering dinamis

Untuk menyiapkan rendering dinamis konten Anda, ikuti panduan umum kami. Anda harus merujuk ke detail konfigurasi spesifik yang Anda gunakan, karena penerapan rendering dinamis sangat bervariasi.

  1. Instal dan konfigurasi perender dinamis untuk mengubah konten Anda menjadi HTML statis yang lebih mudah digunakan oleh crawler. Perender dinamis yang umum antara lain Puppeteer, Rendertron, dan prerender.io.
  2. Pilih agen pengguna yang menurut Anda perlu menerima HTML statis Anda. Lihat detail konfigurasi spesifik Anda untuk mengetahui cara memperbarui atau menambahkan agen pengguna. Berikut ini contoh daftar agen pengguna yang umum di middleware Rendertron:
    export const botUserAgents = [
      'googlebot',
      'google-structured-data-testing-tool',
      'bingbot',
      'linkedinbot',
      'mediapartners-google',
    ];
  3. Jika proses pra-render memperlambat server Anda, atau Anda menerima permintaan pra-render yang tinggi, pertimbangkan untuk menerapkan cache pada konten yang telah dipra-render, atau memverifikasi bahwa permintaan berasal dari crawler yang sah.
  4. Tentukan apakah agen pengguna memerlukan konten seluler atau desktop. Gunakan penayangan dinamis untuk menyediakan versi seluler atau desktop yang sesuai. Berikut ini contoh cara konfigurasi menentukan apakah agen pengguna memerlukan konten seluler atau desktop:
    isPrerenderedUA = userAgent.matches(botUserAgents)
    isMobileUA = userAgent.matches(['mobile', 'android'])
    
    if (!isPrerenderedUA) { } else { servePreRendered(isMobileUA) }
  5. Konfigurasi server Anda untuk menayangkan HTML statis ke crawler yang Anda pilih. Ada beberapa cara yang dapat Anda lakukan, bergantung pada teknologi yang Anda miliki; berikut beberapa contohnya:
    • Mem-proxy permintaan yang berasal dari crawler ke perender dinamis.
    • Menjalankan pra-render sebagai bagian dari proses penerapan dan membuat server Anda menayangkan HTML statis ke crawler.
    • Membuat rendering dinamis ke dalam kode server kustom Anda.
    • Menayangkan konten statis dari layanan pra-render ke crawler.
    • Menggunakan middleware untuk server Anda (misalnya, middleware rendertron).

Memverifikasi konfigurasi Anda

Setelah Anda selesai menerapkan rendering dinamis, verifikasi bahwa semuanya berjalan sesuai harapan dengan memeriksa URL menggunakan pengujian berikut:

  1. Uji konten seluler Anda dengan Pengujian Situs Mobile-Friendly untuk memastikan Google dapat melihat konten Anda.

    done Berhasil: Konten seluler Anda cocok dengan yang Anda harapkan untuk dilihat pengguna.

    error Coba lagi: Jika konten yang Anda lihat tidak cocok dengan yang Anda harapkan, lihat bagian pemecahan masalah.

  2. Uji konten desktop Anda dengan Fitur Inspeksi URL untuk memastikan konten desktop juga terlihat di halaman yang dirender (halaman yang dirender mencerminkan halaman Anda sebagaimana yang terlihat oleh Googlebot).

    done Berhasil: Konten desktop cocok dengan yang Anda harapkan untuk dilihat pengguna.

    error Coba lagi: Jika konten yang Anda lihat tidak cocok dengan yang Anda harapkan, lihat bagian pemecahan masalah.

  3. Jika Anda menggunakan data terstruktur, uji apakah data terstruktur Anda dirender dengan benar menggunakan Fitur Pengujian Data Terstruktur.

    done Berhasil: Data terstruktur terlihat seperti yang Anda harapkan.

    error Coba lagi: Jika data terstruktur tidak terlihat seperti yang Anda harapkan, lihat bagian pemecahan masalah.

Pemecahan masalah

Jika konten Anda menampilkan error pada Pengujian Situs Mobile-Friendly atau jika konten tidak muncul di hasil Penelusuran Google, coba atasi masalah paling umum yang tercantum di bawah ini. Jika Anda masih mengalami masalah, posting topik baru di Forum Webmaster.

Konten tidak lengkap atau terlihat berbeda

error Penyebab masalah: Perender Anda mungkin salah dikonfigurasi, atau aplikasi web mungkin tidak kompatibel dengan solusi rendering Anda. Terkadang waktu tunggu juga dapat menyebabkan konten tidak dirender dengan benar.

done Memperbaiki masalah: Lihat dokumentasi untuk mengetahui solusi rendering spesifik Anda yang berfungsi men-debug penyiapan rendering dinamis.

Waktu respons tinggi

error Penyebab masalah: Penggunaan browser headless (tanpa antarmuka grafis) untuk merender halaman sesuai permintaan sering menyebabkan tingginya waktu respons, yang dapat membuat crawler membatalkan permintaan dan tidak mengindeks konten Anda. Waktu respons yang tinggi juga dapat mengakibatkan crawler mengurangi kecepatan crawling-nya saat meng-crawl dan mengindeks konten Anda.

done Memperbaiki masalah

  1. Siapkan cache untuk HTML yang telah dipra-render atau buat versi HTML statis konten Anda sebagai bagian dari proses build.
  2. Pastikan untuk mengaktifkan cache pada konfigurasi Anda (misalnya, dengan mengarahkan crawler ke cache Anda).
  3. Pastikan crawler dapat mengakses konten Anda dengan cepat menggunakan fitur Pengujian Situs Mobile-Friendly atau webpagetest (dengan string agen pengguna kustom dari daftar agen pengguna Crawler Google). Permintaan Anda tidak akan mengalami waktu habis.

Data terstruktur tidak ada

error Penyebab masalah: Error data terstruktur dapat terjadi jika agen pengguna data terstruktur tidak ditemukan, atau tag skrip JSON-LD tidak disertakan dalam output.

done Memperbaiki masalah

  1. Gunakan Fitur Pengujian Data Terstruktur untuk memastikan data terstruktur ada di halaman. Kemudian konfigurasi agen pengguna untuk Fitur Pengujian Data Terstruktur guna menguji konten yang telah dipra-render.
  2. Pastikan tag skrip JSON-LD disertakan dalam HTML yang dirender secara dinamis untuk konten Anda. Pelajari dokumentasi solusi rendering Anda untuk mendapatkan informasi selengkapnya.