SEO React: Rendering, Metadata, dan Tautan untuk Aplikasi React yang Masuk Peringkat

Kuis singkat

Apakah SEO cocok untuk Anda, dan bagaimana memulainya?

Pertanyaan 1 dari 425%

Apakah orang mencari apa yang Anda jual di Google?

Ya, saya rasa begituTidak, ini hal baru atau sangat khususSaya tidak tahu

SEO React adalah upaya membuat aplikasi React dapat dirayapi, diindeks, dan dipahami oleh mesin pencari serta asisten AI. React sendiri netral: masalahnya muncul karena semuanya dirender di browser. Google menegaskan dalam dasar-dasar SEO JavaScript bahwa aplikasi JavaScript diproses dalam tiga fase (crawling, rendering, pengindeksan) dan bahwa rendering sisi server atau pre-rendering "tetap merupakan ide yang bagus karena membuat situs lebih cepat bagi pengguna dan crawler, dan tidak semua bot dapat menjalankan JavaScript".

Mengapa React sulit untuk SEO?

Aplikasi React yang dibuat sebagai aplikasi satu halaman mengirim file HTML yang isinya tidak lebih dari div root kosong dan tag script. Browser mengunduh JavaScript, menjalankannya, lalu membangun halaman. Crawler yang hanya membaca HTML tidak melihat apa pun untuk diindeks: tidak ada judul, teks, maupun tautan.

Googlebot memang menjalankan JavaScript, tetapi dalam langkah terpisah: halaman dirayapi, dimasukkan ke antrean rendering, dirender di Chromium tanpa antarmuka, dan baru setelah itu tautan serta konten hasil render digunakan. Setiap langkah tambahan membuka peluang gagal (error skrip, API diblokir, waktu habis) dan menambah jeda sebelum halaman baru muncul di hasil penelusuran. Panduan kami tentang SEO JavaScript menjelaskan alurnya, dan artikel kami tentang pengindeksan Google membahas cara mempercepat pengindeksan halaman.

Bot lain kurang sabar. Analisis Vercel pada Desember 2024, The rise of the AI crawler, menemukan bahwa "tidak satu pun crawler AI besar saat ini merender JavaScript", dengan menyebut GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot, dan PerplexityBot. Halaman React yang dirender di sisi klien tidak terlihat oleh ChatGPT, Claude, dan Perplexity, meskipun Google mengindeksnya.

Pendekatan rendering apa yang cocok untuk situs React?

Tim React kini menyarankan memulai aplikasi baru dengan framework. Saat menghentikan Create React App pada 14 Februari 2025, tim tersebut menulis dalam pengumumannya bahwa "rendering di server dapat meningkatkan SEO" dan juga meningkatkan performa dengan mengurangi JavaScript yang harus diunduh pengguna sebelum melihat konten. Pilihan dari yang terlemah hingga terkuat untuk penelusuran:

Soal rendering dinamis, dokumentasi Google tegas: cara ini "merupakan solusi sementara dan bukan solusi jangka panjang", dan Google menyarankan rendering sisi server, rendering statis, atau hidrasi sebagai gantinya. Jika Anda sedang memilih framework, panduan SEO Next.js kami membahas mode rendering, Metadata API, dan sitemap secara rinci.

Jika migrasi tidak memungkinkan, Google tetap bisa mengindeks aplikasi satu halaman asalkan Anda berhati-hati. Panduan kami tentang SEO aplikasi satu halaman mencantumkan syaratnya; sisa artikel ini berlaku untuk kedua kasus.

Bagaimana mengatur judul dan meta tag di React?

Sejak React 19 (stabil sejak 5 Desember 2024), komponen dapat langsung merender tag title, meta, dan link, lalu React memindahkannya ke head dokumen. Catatan rilis React 19 menyebutkan bahwa dukungan bawaan ini bekerja "dengan aplikasi khusus klien, SSR streaming, dan Server Components". Sebelum React 19, pustaka seperti react-helmet atau react-helmet-async mengerjakan tugas ini, dan keduanya tetap berguna untuk menimpa nilai default per rute.

function ProductPage({ product }) {
  return (
    <>
      <title>{`${product.name} | Shop`}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.slug}`} />
      <h1>{product.name}</h1>
    </>
  )
}

Tiga aturan berlaku apa pun metodenya:

• Satu judul per halaman, unik dan deskriptif. Dokumentasi React memperingatkan bahwa jika beberapa komponen merender judul secara bersamaan, "perilaku browser dan mesin pencari tidak terdefinisi". Berikan satu string (template literal), bukan campuran teks dan variabel.
• Satu deskripsi dan satu canonical per URL, dibuat dari data halaman. Generator meta tag membantu menyusunnya, dan pemeriksa canonical memastikan apa yang sudah tayang.
• Tag Open Graph di HTML awal untuk halaman yang dibagikan, karena bot pratinjau tautan umumnya membaca HTML mentah.

Kesalahan routing dan tautan apa yang menghambat pengindeksan?

Google menyatakan bahwa ia "hanya dapat menemukan tautan Anda jika tautan itu berupa elemen HTML a dengan atribut href" dan menyarankan agar tidak memakai fragmen URL untuk memuat konten yang berbeda. Sebagian besar kegagalan SEO React berasal dari detail routing:

Untuk melihat apa yang dirender Google, gunakan alat Inspeksi URL di Search Console dan lihat HTML halaman yang diuji, atau jalankan template halaman utama melalui pemeriksa kemampuan indeks.

Bagaimana menangani sitemap dan data terstruktur di React?

React tidak memiliki sitemap bawaan. Buat sitemap.xml saat build dari rute dan data Anda (atau dengan fitur sitemap framework), cantumkan hanya URL canonical yang mengembalikan 200, dan rujuk file itu di robots.txt. Untuk situs statis kecil, generator sitemap XML sudah cukup.

Data terstruktur mengikuti aturan yang sama dengan metadata: render skrip JSON-LD bersama halaman, dari data yang sama, sebaiknya di server. Google dapat membaca JSON-LD yang disisipkan JavaScript setelah rendering, tetapi markup yang tidak ada di HTML awal juga tidak ada bagi crawler yang tidak merender. Gunakan Article untuk artikel, Product untuk e-commerce, Organization di seluruh situs, dan BreadcrumbList untuk halaman yang dalam.

Bagaimana performa memengaruhi SEO React?

Bundel JavaScript yang besar merusak Core Web Vitals: browser harus mengunduh, mengurai, dan menghidrasi kode sebelum halaman responsif, yang membebani Largest Contentful Paint dan Interaction to Next Paint, terutama di perangkat seluler. Pengumuman tim React tentang Create React App mencatat bahwa rendering di server mengirim lebih sedikit JavaScript dan dokumen HTML lengkap, sehingga First Contentful Paint lebih cepat dan INP bisa turun. Langkah praktis: memecah kode per rute dengan React.lazy, menyajikan gambar dengan dimensi eksplisit, memuat lazy komponen di bawah layar pertama, dan mengaudit skrip pihak ketiga.

Apa saja isi checklist SEO React?

1. Setiap URL yang dapat diindeks mengembalikan HTML lengkap (rendering server atau pre-rendering), diperiksa dengan curl.
2. Judul, deskripsi, dan canonical yang merujuk ke diri sendiri, unik untuk setiap URL.
3. Rute berbasis riwayat, tanpa URL hash, dan setiap tautan internal dirender sebagai a dengan href.
4. Kode status yang benar: 404 untuk halaman yang tidak ada, 301 atau 308 untuk halaman yang dipindahkan.
5. sitemap.xml yang dibuat dari data yang sama dengan rute dan dideklarasikan di robots.txt.
6. JSON-LD dirender bersama halaman dan divalidasi dengan Uji Hasil Kaya.
7. Skrip, gaya, dan API yang dibutuhkan untuk rendering diizinkan di robots.txt.
8. Kode dipecah per rute dan Core Web Vitals dipantau pada pengguna nyata.

Bagaimana membuat situs React terlihat dalam jawaban AI?

GEO (generative engine optimization) dimulai dari akses. Karena crawler AI mengambil HTML mentah, halaman React harus menyajikan teks, judul, dan JSON-LD tanpa JavaScript agar dapat dibaca, diringkas, dan dikutip. Audit kemampuan perayapan AI menunjukkan apa yang diterima bot-bot ini dari halaman Anda. Syarat kedua adalah konten yang layak dikutip: halaman yang menjawab satu pertanyaan per bagian, dengan sumber, angka, dan definisi yang jelas.

Sisi konten inilah yang diotomatiskan oleh Sorank, produk kami. Sorank adalah software SEO dan GEO yang berjalan secara autopilot: Generator Artikel Blog menulis dan menerbitkan 20, 60, atau 120 artikel per bulan lengkap dengan sumber, tautan internal, dan gambar, serta terhubung melalui webhook ke situs kustom seperti situs React atau Next.js. SEO Chat menjawab pertanyaan tentang performa penelusuran situs Anda dalam bentuk percakapan.

Intinya: sajikan HTML dari server, beri setiap URL judul, deskripsi, dan canonical sendiri, dan gunakan tautan sungguhan. Dengan begitu React masuk peringkat seperti situs lain dan asisten AI dapat membacanya. Untuk terus mengisi situs tersebut dengan artikel yang dibuat untuk Google dan AI, lihat paket Sorank, mulai dari 49 dolar per bulan dengan uji coba gratis 3 hari.