Mengenal Apa itu Rendering di SEO & Bagaimana Cara Optimasinya

Cara kerja search engine khususnya Google yang kita ketahui adalah crawling, indexing, dan ranking.

Nyatanya, ada satu proses lagi yang sering kali luput dari perhatian para praktisi SEO, yaitu rendering.

Apa itu SEO rendering? Bagaimana optimasinya? Mari kita cari tahu penjelasannya bersama-sama.

Apa itu Rendering di SEO?

Rendering adalah proses di mana Googlebot mengambil (mengunduh) halaman website teman-teman menjalankan kode, dan menilai konten untuk memahami layout (tata letak) atau struktur website teman-teman.

Semua informasi yang dikumpulkan Google selama proses rendering ini kemudian digunakan untuk menentukan tingkat kualitas dan nilai konten di website Anda dibandingkan website lain dan dengan apa yang dicari user (pengguna) di Google Search.

Jenis-jenis Rendering

Setidaknya ada tiga jenis rendering, yaitu:

• Server-Side Rendering (SSR): Melakukan rendering di server sebelum mengirimkannya ke browser klien
• Client-Side Rendering (CSR): Melakukan rendering di browser klien
• Static Site Generation (SSG): Menghasilkan situs web HTML statis dari sekumpulan template dan file konten

Setiap Halaman Web Memiliki Dua Status, Rendering Terjadi Di Antara Keduanya

Setiap halaman website memiliki dua status:

• Initial HTML (HTML awal)
• HTML yang di-render

Sebuah website bisa tampil sangat berbeda di antara kedua statusnya.

Initial HTML (HTML Awal)

File HTML yang muncul di awal dan ini merupakan respon dari server.

Di dalamnya terdapat HTML dan link (tautan) ke berbagai resource (sumber daya) seperti JavaScript, CSS, dan gambar yang diperlukan untuk menciptakan halaman tersebut.

Untuk dapat melihat HTML awal ini, Anda dapat melakukannya dengan cara view page source (melihat sumber halaman).

HTML yang di-render

HTML yang di-render lebih dikenal sebagai DOM (Document Object Model), setiap halaman web memiliki DOM.

DOM ini mewakili HTML awal ditambah setiap perubahan yang dibuat oleh JavaScript yang diminta oleh HTML.

Untuk melihat DOM, kita bisa melakukannya dengan membuka developer tool (alat pengembang) di browser dan klik tab konsol.

Cara mudah untuk menemukan perbedaan antara keduanya adalah dengan menggunakan ekstensi Google Chrome bernama View Rendered Source. tAlat tersebu akan meng-highlight baris yang berubah dari satu keadaan ke keadaan lainnya.

Google Tidak Dapat Mengindeks Apa yang Tidak Dapat Di-Render

Untuk mendapatkan ranking di SERP (Search Engine Results Page), website kita harus di-index. Untuk dapat di-index, website kita harus bisa di-render oleh search engine.

Jadi, jika konten tidak dapat di-render, konten tersebut tidak bernilai atau tidak berperan apa pun terhadap proses yang dilalui Google.

Coba lihat page source berikut ini:

Bisakah teman-teman mengidentifikasi pembahasan apa yang ada pada screenshot di atas? Apa search intent (jenis maksud pencarian) yang cocok berdasarkan Initial HTML-nya?

Jika jawabannya adalah tidak bisa, hal yang sama pun terjadi pada search engine.

Oleh karena itu, halaman tersebut harus dibuat untuk dapat di-render dengan baik agar search engine dapat memahaminya.

Cara Google Melakukan Rendering

Inilah proses dan langkah-langkah yang disederhanakan tentang bagaimana Google melakukan proses rendering:

1. URL ditarik dari crawl queue (antrian perayapan)
2. Googlebot meminta URL dan men-download Initial HTML
3. Initial HTML diteruskan ke tahap pemrosesan (Pemrosesan pertama oleh layanan pengindeksan Google)
4. Tahap pemrosesan mengekstraksi link dari Initial HTML
5. Link tersebut kembali ke crawl queue
6. Setelah semua resource di-crawl, halaman akan masuk antrian untuk di-render
7. Ketika tersedia, permintaan berpindah dari antrian render ke renderer (perender)
8. Sistem rendering membangun kembali halaman menggunakan link yang di-crawl
9. Renderer meneruskan HTML yang telah di-render kembali ke pemrosesan
10. Pemrosesan tahap kedua untuk masuk ke Google Index
11. Mengekstrak link dari HTML yang di-render dan memasukkannya ke dalam crawl queue
12. Kemudian, Google akan membuka URL berikutnya dan mengulangi prosesnya hingga semuanya selesai

Ini baru satu URL saja, bayangkan ada berapa banyak URL yang ada di internet? Sangat besar sekali bukan resource Google?

Oleh karena itu, pastikan kita membuat konten yang benar-benar bermanfaat bagi user, agar resource Google benar-benar digunakan secara efisien dan efektif.

Tips Agar Rendering Lebih Efektif

Cara yang bisa teman-teman lakukan agar rendering website menjadi lebih efisien dan efektif antara lain:

1. Gunakan Server-Side Rendering (SSR)

Semakin banyak resource dari client-side (sisi klien) yang teman-teman gunakan, semakin banyak kemungkinan terjadinya masalah.

Penerapan SSR memastikan bahwa konten HTML diproses di server terlebih dahulu sebelum dikirim ke browser user, sehingga memudahkan search engine dalam mengindeks konten.

Ingat user terbagi dua, orang dan search engine bot.

2. Mengirimkan bagian konten penting di SSR

Katakanlah Anda tidak sepenuhnya menggunakan SSR dan CSR (Client-Side Rendering), namun pastikan untuk mengirimkan konten yang penting dari sisi SSR.

Bagian konten penting ini lah yang nantinya benar-benar terlihat dan dikonsumsi oleh user.

3. Hanya menggunakan script yang dibutuhkan

Setiap script yang ada harus diunduh, diurai, dikompilasi, dan dijalankan, terlepas dari apakah script tersebut berkontribusi pada konten halaman atau kurang atau tidak sama sekali.

Proses ini cukup panjang dan perlu waktu, dan waktu tunggu ini lah yang akan menjadi nilai buruk terhadap UX (User Experience).

Cara mengetahuinya:

• Silakan buka Chrome Developer Tool
• Klik 3 titik di kanan atas tool
• Pilih “More tools”
• Pilih “Coverage”
• Kemudian muat ulang halaman tersebut

“Halaman yang sehat” setidaknya harus di bawah dari 1 MB.

Jika teman-teman tidak terlalu tahu tentang coding, silakan komunikasikan dengan tim developer Anda untuk mengatasinya.

4. Memprioritaskan UX manusia daripada fitur melimpah

Website Anda memasang script chat AI bot? Script Google Adsense? Tracking Google Analytics? Tracking Meta Pixel? Dan script lainnya yang padahal bisa hanya menggunakan satu atau dua saja jika memang fungsinya sama?

Besar kemungkinan hal tersebut akan berdampak negatif terhadap performa rendering website Anda.

Coba lah posisikan diri teman-teman sebagai user yang mengakses website, apakah Anda senang atau tidak meskipun terdapat banyak fitur “mewah” di dalam website teman-teman.

5. Gunakan lazy script & image tanpa memblokir rendering

Utamakan untuk menampilkan konten above the fold (tampil di layar).

Untuk konten seperti gambar dan script lainnya, cobalah untuk menggunakan lazy loading, namun pastikan lazy loading ini tidak memblokir rendering dengan metode script async atau script defer.

6. Pertahankan agar script bundle tetap kecil

Jika skrip Anda lebih besar dari 50–100 kB, bagilah skrip tersebut menjadi kumpulan-kumpulan kecil yang terpisah.

Beberapa bundel yang lebih kecil lebih efektif daripada satu file skrip yang besar.

Jika website teman-teman menggunakan HTTP/2 multiplexing, beberapa permintaan dan respons dapat dilakukan secara bersamaan.

7. Terapkan cache website

Mengeksekusi kode berkali-kali adalah buang-buang waktu. Cara agar hal tersebut tidak terjadi adalah teman-teman menerapkan cache di dalam website Anda.

Hal ini dapat meminimalisir permintaan berulang yang tak perlu bagi user.

Demikianlah tulisan mengenai pengertian dari rendering di SEO ini, jika Anda memiliki pertanyaan silakan tuliskan di kolom komentar di bawah atau bisa gabung ke grup Telegram DailySEO ID di sini.

Teman-teman juga bisa ajukan topik selanjutnya untuk kami bahas! Jika ingin belajar SEO dari ahlinya, yuk belajar di course-nya DailySEO ID!

References:

An Introduction to Rendering For SEO

SEO Rendering: Optimize Your Site for Better Search Results

Server-Side Rendering Vs Client-Side Rendering: All Webpage Rendering Methods Explained

✕

Dapatkan berita terbaru seputar SEO Gratis!
Subscribe Sekarang!

Leave this field empty if you're human: