Rendering dinamis sebagai solusi

Di beberapa situs, JavaScript membuat konten tambahan di halaman saat dijalankan di browser. Tindakan ini disebut rendering sisi klien. Saat Google Penelusuran menjalankan JavaScript, ada fitur JavaScript yang dibatasi di Google Penelusuran dan beberapa halaman mungkin mengalami masalah berupa konten yang tidak muncul di HTML yang dirender. Mesin telusur lain dapat memilih untuk mengabaikan JavaScript dan tidak akan melihat konten buatan JavaScript.

Rendering dinamis merupakan solusi untuk situs yang tidak menyediakan konten buatan JavaScript untuk mesin telusur. Server rendering dinamis mendeteksi bot yang mungkin mengalami masalah dengan konten buatan JavaScript, lalu menayangkan versi yang dirender server tanpa JavaScript ke bot tersebut dan menampilkan versi konten yang dirender di sisi klien kepada pengguna.

Rendering dinamis bukan merupakan solusi yang direkomendasikan, karena menimbulkan persyaratan resource dan kompleksitas tambahan.

Situs yang sebaiknya menggunakan rendering dinamis

Rendering dinamis merupakan solusi untuk konten publik buatan JavaScript yang dapat diindeks dan terus berubah-ubah, atau konten yang menggunakan fitur JavaScript yang tidak didukung oleh crawler yang penting bagi Anda. Tidak semua situs perlu menggunakan rendering dinamis, dan ada solusi yang lebih baik daripada rendering dinamis seperti yang dijelaskan dalam artikel ini tentang rendering di web.

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 ini menunjukkan server yang menayangkan konten JavaScript dan HTML awal langsung ke browser. Sebaliknya, diagram ini menunjukkan server yang menayangkan konten JavaScript dan HTML awal ke perender, yang selanjutnya mengonversi konten JavaScript dan HTML awal menjadi konten 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 konfigurasikan perender dinamis (misalnya Puppeteer, Rendertron, atau prerender.io) untuk mengubah konten Anda menjadi HTML statis yang lebih mudah diproses oleh crawler.
  2. Pilih agen pengguna yang Anda inginkan untuk 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',
  '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 desktop atau seluler: 
    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 dan desktop Anda dengan Alat Inspeksi URL untuk memastikan konten desktop dan seluler juga terlihat di halaman yang dirender (halaman yang dirender mencerminkan halaman Anda sebagaimana yang terlihat oleh Google).

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

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

  2. Jika Anda menggunakan data terstruktur, uji apakah data terstruktur Anda dirender dengan benar menggunakan Pengujian Hasil Multimedia.

    Berhasil: Data terstruktur terlihat seperti yang Anda harapkan.

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

Pemecahan masalah

Jika konten Anda menampilkan error di Alat Inspeksi URL atau jika konten tidak muncul di hasil Google Penelusuran, coba atasi masalah yang paling umum. Jika masih mengalami masalah, posting topik baru di Komunitas Bantuan Pusat Google Penelusuran.

Konten tidak lengkap atau terlihat berbeda

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

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

Waktu respons tinggi

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 frekuensi crawling-nya saat meng-crawl dan mengindeks konten Anda.

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.

Komponen web tidak dirender seperti yang diharapkan

Penyebab masalah: Shadow DOM terisolasi dari bagian lain pada halaman itu. Solusi rendering (seperti Rendertron) tidak dapat melihat isi di dalam shadow DOM yang terisolasi. Untuk informasi selengkapnya, lihat praktik terbaik untuk komponen web.

Memperbaiki masalah

  1. Muat polyfill webcomponents.js untuk elemen kustom dan shadow DOM.
  2. Gunakan Pengujian Hasil Multimedia atau Alat Inspeksi URL untuk memeriksa apakah konten ditampilkan di HTML yang telah dirender dari solusi rendering Anda.

Data terstruktur tidak ada

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

Memperbaiki masalah

  1. Gunakan Pengujian Hasil Multimedia untuk memastikan data terstruktur ada di halaman. Lalu, konfigurasikan agen pengguna untuk menguji konten yang sudah dipersiapkan sebelumnya dengan Googlebot seluler atau desktop.
  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.