Panduan Client-Side JavaScript Kerangka kerja
React, Vue, Angular, Svelte, dan SolidJS share satu SEO masalah — rendering sisi klien ships sebuah empty shell — dan satu perbaiki pattern: head management plus sebuah rendering strategy.
Bahasa
React, Vue, Angular, Svelte, dan SolidJS adalah UI libraries itu, oleh default, ship sebuah near-empty HTML shell dan bangun halaman di browser (rendering sisi klien). itu berarti crawler mendapatkan sebuah blank halaman until JavaScript berjalan — Google dapat render ini, tetapi pada sebuah delayed queue, dan lainnya crawler (Bing, AI bot) adalah far lebih sedikit reliable. perbaiki adalah yang sama di seluruh semua five: (1) sebuah head-management package so meta tags exist untuk setiap route, dan (2) sebuah rendering strategy — prerendering, SSR, atau moving untuk matching meta-kerangka kerja. ini hub menjelaskan shared masalah dan shared perbaiki, lalu poin Anda untuk per-kerangka kerja deep dives.
TL;DR — React, Vue, Angular, Svelte, dan SolidJS adalah alat developers gunakan untuk bangun interactive situs. oleh default, mereka kirim browser sebuah nearly empty HTML halaman dan lalu bangun nyata konten dengan JavaScript. itu’s great untuk pengguna tetapi risky untuk SEO — sebuah penelusuran crawler dapat land pada sebuah blank halaman. perbaiki adalah yang sama untuk semua dari them: manage Anda
<title>dan meta tags per halaman, dan membuat sure Anda konten ada di HTML sebelum JavaScript berjalan.
Apa client-side kerangka kerja adalah
Client-side kerangka kerja dapat render route konten di browser setelah sebuah awal HTML respons. Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: MDN: Client-side frameworks Google dapat render JavaScript, tetapi resource availability dan rendering masih memengaruhi apa adalah processed. Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: Google: JavaScript SEO basics
sebuah client-side kerangka kerja adalah sebuah JavaScript library itu membangun halaman di Anda pengunjung’s browser. five Anda’ll jalankan ke sebagian besar adalah React, Vue, Angular, Svelte, dan SolidJS. mereka’re bagaimana sebagian besar modern web apps dan dashboards mendapatkan dibangun.
catch adalah di kata client-side. oleh default, ini kerangka kerja ship sebuah tiny HTML file itu looks roughly like ini:
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>ada tanpa konten di itu HTML — hanya sebuah empty container dan sebuah script. browser downloads script, berjalan ini, dan lalu headline, text, tautan, dan semuanya else muncul. ini default perilaku adalah called rendering sisi klien (CSR), dan sebuah situs dibangun ini cara adalah sering called sebuah single-halaman application (SPA).
Mengapa itu’s sebuah masalah untuk SEO
sebuah penelusuran crawler adalah tidak sebuah person clicking sekitar. Ketika Googlebot atau lainnya crawler fetches Anda halaman, pertama hal ini mendapatkan adalah itu empty shell. jika crawler tidak jalankan Anda JavaScript, ini sees sebuah blank halaman — tanpa konten untuk indeks.
Google dapat jalankan JavaScript, so ini biasanya melakukan eventually see Anda konten. tetapi:
- ini happens pada sebuah delay (rendering adalah sebuah terpisah, queued langkah).
- lainnya crawler — Bing dan AI crawler feeding alat like ChatGPT — adalah far lebih sedikit reliable di berjalan JavaScript.
So “it berfungsi di my browser” (terjemahan) “ini berfungsi di my browser” tidak berarti “penelusuran engines dapat see it.” (terjemahan) “mesin pencari dapat see ini.”
perbaiki adalah yang sama untuk semua five
Tidak penting yang kerangka kerja Anda picked, solusi muncul di dua bagian:
- Manage head. setiap halaman perlu -nya own
<title>dan deskripsi meta. sebuah plain CSR app memiliki satu HTML file, so tanpa help setiap halaman shares yang sama judul. setiap kerangka kerja memiliki sebuah kecil package itu memperbaiki ini (lebih di Advanced tab). - Pick sebuah rendering strategy. Mendapatkan Anda konten ke HTML sebelum JavaScript berjalan — oleh prerendering (membangun static HTML ahead dari time), rendering sisi server (SSR), atau moving untuk kerangka kerja’s matching meta-kerangka kerja (Berikutnya.js untuk React, Nuxt untuk Vue, dan so pada).
ingin per-kerangka kerja specifics — yang head package, yang rendering option, dan bagaimana Google sebenarnya menangani ini apps? Switch untuk Advanced tab, lalu jump untuk dedicated guide untuk Anda kerangka kerja.
TL;DR — React, Vue, Angular, Svelte, dan SolidJS adalah semua UI libraries itu default untuk rendering sisi klien: mereka ship sebuah near-empty HTML shell dan bangun DOM di browser. SEO masalah adalah identical di seluruh semua five — crawler mendapatkan sebuah empty shell, dan konten hanya ada setelah JS executes. Google renders ini apps tetapi pada sebuah delayed, queued basis; Bing dan AI crawler adalah banyak lebih sedikit dependable. perbaiki adalah juga identical: (1) head management (sebuah per-route package untuk
<title>/meta) dan (2) sebuah rendering strategy (prerendering, SSR, atau migrating untuk matching meta-kerangka kerja). differences antara kerangka kerja adalah mostly yang package dan yang strategy — covered di setiap deep dive di bawah.
mereka’re libraries, tidak penuh kerangka kerja — dan itu’s root dari ini
kerangka kerja architecture varies, so client rendering adalah tidak sebuah automatic pengindeksan failure. Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: MDN: Client-side frameworks server rendering atau prerendering reduces dependence pada crawler-side JavaScript execution tanpa guaranteeing pengindeksan. Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: Google: JavaScript SEO basics
React, Vue, Angular, Svelte, dan SolidJS adalah primarily UI rendering libraries. mereka job adalah untuk turn Anda data ke sebuah DOM dan pertahankan ini di sync sebagai state perubahan. Out dari box, itu DOM adalah dibangun di browser — yang adalah persis apa membuat them feel fast dan app-like, dan persis apa membuat SEO masalah.
sebuah default bangun ships sebuah HTML shell dengan sebuah empty mount node (<div id="root">,
<div id="app">, <app-root>) dan sebuah JavaScript bundle. Semuanya sebuah penelusuran
mesin cares tentang — heading, body copy, tautan internal, data terstruktur — adalah
injected oleh itu bundle setelah ini downloads dan executes. sebelum JS berjalan, ada
tidak ada apa pun di sana.
ini adalah rendering sisi klien — out-dari—box perilaku untuk bare libraries sebelum Anda tambahkan sebuah meta-kerangka kerja atau sebuah bangun-time prerender langkah. ini adalah tidak sebuah bug; ini adalah default Anda mulai dari. tetapi “default” (terjemahan) “default” tidak “permanent” (terjemahan) “permanent” atau “universal” (terjemahan) “universal”: default perubahan oleh versi dan oleh yang CLI atau starter Anda digunakan, dan dua routes di yang sama app dapat end up pada berbeda rendering modes depending pada bagaimana setiap satu adalah dibangun (sebuah marketing halaman prerendered, sebuah dashboard left sebagai pure CSR). jangan assume sebuah kerangka kerja’s perilaku dari -nya name — periksa apa sebuah diberikan route di sebuah diberikan bangun sebenarnya ships.
shared masalah: sebuah empty shell
Google adalah jelas itu ini memproses JS apps di phases — crawl, render, indeks — dan itu “without rendering Google might not see that content.” (terjemahan) “tanpa rendering Google mungkin tidak see itu konten.” untuk sebuah CSR app, semua konten lives behind itu render langkah. Three consequences fall out dari itu:
- ** render adalah delayed, dan tunggu tidak fixed.** rendering adalah sebuah terpisah, queued langkah setelah crawling — Google documents crawl, render, dan indeks sebagai three distinct phases, tetapi ini tidak commit untuk satu universal tunggu time untuk setiap halaman. delay varies oleh URL dan oleh Google’s own resourcing di time; Anda konten tidak exist untuk pengindeksan until render sebenarnya menyelesaikan, namun panjang itu takes untuk itu halaman.
- Non-Google crawler tidak sebuah diberikan. Bing renders JavaScript inconsistently, dan sebagian besar AI crawler ( bot fetching halaman untuk LLMs dan AI penelusuran) melakukan little atau Tidak JS execution. ini adalah terpisah companies dengan terpisah infrastructure, so none dari ini generalizes dari Google’s documentation — verify setiap provider’s saat ini perilaku alih-alih assuming ini matches Google’s atau terakhir tahun’s test. sebuah CSR-hanya situs risks menjadi near-invisible untuk whichever crawler jangan render, dan AI crawler adalah sebuah growing share dari traffic.
- Per-halaman metadata adalah missing. Satu HTML file berarti satu
<title>dan satu meta deskripsi untuk setiap route unless Anda actively manage head per route.
shared perbaiki, bagian 1: head management
Karena sebuah SPA memiliki sebuah single HTML document, Anda perlu code itu memperbarui document head sebagai pengguna (dan crawler’s renderer) moves antara routes. setiap kerangka kerja memiliki sebuah canonical package atau dibangun-di API untuk ini:
- React →
react-helmet-async(atau kerangka kerja’s metadata API jika Anda’ve moved untuk Berikutnya.js). - Vue →
@unhead/vue( mesin behind Nuxt’s SEO utilities). - Angular → dibangun-di
TitledanMetaservices dari@angular/platform-browser— Tidak extra dependency. - Svelte → dibangun-di
<svelte:head>element. - SolidJS →
@solidjs/meta(dan SolidStart untuk SSR path).
Head management mendapatkan Anda correct, unique meta tags — tetapi ini melakukan tidak solve empty-shell masalah pada -nya own. tags masih hanya muncul setelah JS berjalan. itu’s mengapa Anda juga perlu bagian 2.
shared perbaiki, bagian 2: sebuah rendering strategy
untuk put nyata konten (dan head tags) ke HTML sebelum JavaScript executes, Anda choose satu dari three approaches. peringkat, oleh bagaimana banyak SEO risk mereka hapus:
- Prerendering / static generation (SSG). bangun static HTML untuk setiap route di bangun time. Lowest risk untuk konten itu tidak perubahan per permintaan. setiap library memiliki sebuah prerender path (e.g. SolidJS’s dibangun-di prerender, Vue prerender plugins, Angular’s prerendering).
- rendering sisi server (SSR). Render HTML pada server per permintaan, lalu hydrate di browser. ini adalah di mana meta-kerangka kerja come di — Berikutnya.js (React), Nuxt (Vue), Angular SSR (formerly Angular Universal), SvelteKit (Svelte), dan SolidStart (SolidJS). untuk sebagian besar konten situs itu harus peringkat, adopting matching meta-kerangka kerja adalah paling bersih perbaiki.
- Stay penuh CSR, tetapi membuat ini dapat di-crawl. Sometimes acceptable untuk app-like surfaces behind sebuah login itu jangan perlu untuk peringkat — tetapi sebuah poor default untuk apa pun Anda ingin di penelusuran.
membuat ini panggil per route, tidak per app. sebuah marketing halaman dan sebuah logged-di dashboard di yang sama codebase dapat reasonably land pada berbeda rows dari itu list. untuk setiap route, tanyakan:
- Output — melakukan konten perlu untuk menjadi di awal respons, atau adalah ini fine untuk muncul setelah JS berjalan?
- Freshness — adalah ini stable cukup untuk bangun setelah (prerender), atau melakukan ini perubahan per permintaan (SSR)?
- Personalization — adalah ini berbeda per pengunjung? Prerendering dapat’t help di sana; Anda’re choosing antara SSR dan CSR.
- server cost — SSR menambahkan compute pada setiap permintaan; prerendering front-memuat itu cost di bangun time alih-alih.
- JS dependence — bagaimana banyak dari route’s usefulness bergantung pada client JavaScript berjalan di semua?
- Failure perilaku — jika JS fails atau adalah blocked, melakukan route degrade untuk sesuatu usable, atau untuk tidak ada apa pun?
decision adalah yang sama conversation regardless dari kerangka kerja: melakukan ini konten perlu untuk peringkat atau menjadi cited? jika Ya, mendapatkan ini ke server-dirender atau prerendered HTML. jika ini adalah purely interactive app UI, CSR adalah fine.
Bagaimana Google menangani ini apps (dan mengapa others jangan)
Google dapat render setiap satu dari ini kerangka kerja — ini berjalan sebuah evergreen,
headless Chrome dan executes Anda JS. tetapi ini melakukan so pada sebuah deferred queue, dan
renderer adalah stateless (Tidak persisted cookies/localStorage, Tidak service
workers, Tidak interaction — ini tidak akan scroll atau click). So yang sama JS-SEO aturan dari
JavaScript SEO hub apply pada top dari
kerangka kerja pilihan: nyata <a href> tautan, parity antara mentah dan dirender DOM, Tidak
konten gated behind interaction, Tidak JS-injected noindex.
Di luar Google, picture adalah worse. Bing’s JS rendering adalah patchier, dan AI crawler largely jangan render di semua. untuk sebuah CSR app, itu dapat berarti Anda konten ada untuk Google (eventually) tetapi tidak untuk Bing atau untuk AI alat itu sebuah increasing angka dari orang penelusuran dengan. SSR atau prerendering closes itu kesenjangan untuk everyone, tidak hanya Google — yang adalah strongest argument untuk tidak shipping CSR-hanya konten.
five kerangka kerja di sebuah glance
| kerangka kerja | Default | Head management | SSR / meta-kerangka kerja | SEO note |
|---|---|---|---|---|
| React | CSR | react-helmet-async | Berikutnya.js (Metadata API) | paling umum CSR-pertama SPA; Berikutnya.js adalah standard SEO perbaiki |
| Vue | CSR | @unhead/vue | Nuxt (useSeoMeta()) | Nuxt adalah SSR-oleh-default; plain Vue perlu prerender atau Nuxt |
| Angular | CSR (SPA) | dibangun-di Title/Meta services | Angular SSR (adalah Universal) | Big SPAs; modern Angular menambahkan SSR + incremental hydration |
| Svelte | CSR (Svelte) / SSR (SvelteKit) | <svelte:head> | SvelteKit (SSR default) | SvelteKit adalah SSR oleh default — watch ssr:false static trap |
| SolidJS | CSR | @solidjs/meta | SolidStart | Fine-grained reactivity; SolidStart menambahkan SSR + prerender |
pattern adalah consistent: sebuah CSR default, sebuah head package, dan sebuah rendering strategy (biasanya matching meta-kerangka kerja). Apa differs adalah names dan sebuah sedikit sharp edges.
Di mana untuk go berikutnya: kerangka kerja deep dives
ini hub adalah map. setiap kerangka kerja memiliki -nya own guide dengan spesifik packages, config, dan gotchas:
- React SEO — mengapa CSR-pertama React membuat pengindeksan risk, React Router dan
History API,
react-helmet-async, dan ketika untuk reach untuk Berikutnya.js. - Vue SEO — Vue 3’s CSR default,
createWebHistory(),@unhead/vue, prerendering tanpa sebuah meta-kerangka kerja, dan ketika Nuxt adalah right panggil. - Angular SEO — Angular’s SPA defaults,
@angular/ssr, dibangun-diTitledanMetaservices, prerendering, dan incremental hydration. - Svelte SEO — Svelte vs SvelteKit, SSR oleh default di SvelteKit,
<svelte:head>,adapter-static+ssr: falsetrap, dan AI-crawler implications. - SolidJS SEO — SolidJS’s CSR default,
@solidjs/meta, SolidStart untuk SSR dan prerendering, dan bagaimana -nya fine-grained model memengaruhi dirender output.
untuk rendering modes themselves (CSR, SSR, SSG, ISR, hydration, dynamic rendering) dan lebih luas render/parity aturan, see parent JavaScript SEO hub.
AI summary
sebuah condensed take pada Advanced versi:
- Satu shared starting poin. React, Vue, Angular, Svelte, dan SolidJS
default untuk rendering sisi klien out dari box — sebuah near-empty HTML shell
(
<div id="root">+ sebuah bundle) itu membangun DOM di browser. itu default perubahan oleh versi, starter, dan meta-kerangka kerja, dan dapat vary route oleh route di dalam yang sama app — periksa apa sebuah diberikan route sebenarnya ships alih-alih assuming dari kerangka kerja name. - Google renders ini, tetapi tunggu tidak fixed. rendering adalah sebuah terpisah, queued langkah setelah crawling, tetapi Google tidak commit untuk satu universal delay untuk setiap halaman — ini varies oleh URL. renderer adalah juga stateless dan tidak akan scroll/click.
- lainnya crawler tidak sebuah diberikan. Bing renders JS inconsistently; sebagian besar AI crawler jangan render di semua. ini adalah terpisah companies, so none dari ini generalizes dari Google’s docs — verify setiap provider’s saat ini perilaku.
- Satu shared perbaiki, dua bagian. (1) Head management — sebuah per-route package untuk
<title>/meta:react-helmet-async(React),@unhead/vue(Vue), dibangun-diTitle/Meta(Angular),<svelte:head>(Svelte),@solidjs/meta(SolidJS). (2) sebuah rendering strategy — prerender/SSG, SSR, atau move untuk matching meta-kerangka kerja (Berikutnya.js / Nuxt / Angular SSR / SvelteKit / SolidStart). - Head management alone tidak cukup — tags masih hanya muncul setelah JS berjalan; Anda masih perlu sebuah rendering strategy untuk fill shell.
- Decide per route, weighing output timing, freshness, personalization, server cost, JS dependence, dan failure perilaku — tidak per app. jika sebuah route perlu untuk peringkat atau menjadi cited, mendapatkan ini ke server-dirender atau prerendered HTML. jika ini adalah app-hanya UI behind sebuah login, CSR adalah fine.
Dokumentasi resmi
Utama-sumber documentation dari mesin pencari dan kerangka kerja.
- memahami JavaScript SEO basics — crawl → render → indeks phases, dapat di-crawl tautan, dan testing dirender HTML.
- Perbaiki Penelusuran-related JavaScript masalah — soft-404 menangani setelah client-side routing, History API, dan renderer constraints.
- di-Depth Guide untuk Bagaimana Google Search berfungsi — di mana rendering sits di crawl → indeks → sajikan.
Bing / Microsoft
- bingbot Series: JavaScript, Dynamic rendering, dan Cloaking. Oh My! — Bing’s take pada rendering JS dan mengapa dynamic rendering ada.
** kerangka kerja (head + rendering)**
- React docs — library itu popularized CSR-pertama SPA; see juga Berikutnya.js metadata.
- Vue.js — rendering / SSR dan Nuxt SEO utilities.
- Angular — rendering sisi server dan
Title/Metaservices. - SvelteKit — halaman options (SSR/prerender) dan
<svelte:head>. - SolidStart — SSR & prerendering dan
@solidjs/meta.
Quotes dari sumber
pada—record statements itu ground shared CSR masalah dan perbaiki. setiap penelusuran-mesin tautan adalah sebuah deep tautan itu jumps untuk quoted passage.
Google — rendering & mengapa shell penting
- “Google processes JavaScript web apps in three main phases: 1. Crawling 2. Rendering 3. Indexing.” (terjemahan) “Google memproses aplikasi web JavaScript dalam tiga fase utama: 1. crawling, 2. rendering, 3. pengindeksan.” Jump untuk quote
- “Rendering is important because websites often rely on JavaScript to bring content to the page, and without rendering Google might not see that content.” (terjemahan) “Rendering penting karena situs web sering mengandalkan JavaScript untuk menampilkan konten ke halaman; tanpa rendering, Google mungkin tidak melihat konten itu.” Jump untuk quote
- “Google can only discover your links if they are <a> HTML elements with an href attribute.” (terjemahan) “Google dapat hanya menemukan Anda tautan jika mereka adalah <sebuah> HTML elements dengan sebuah href attribute.” — applies untuk setiap kerangka kerja’s router. Jump untuk quote
- “Google Search does not interact with your page.” (terjemahan) “Google Search tidak berinteraksi dengan halaman Anda.” — renderer tidak akan scroll atau click untuk reveal konten. Jump untuk quote
Patrick Stox (my own berfungsi — JavaScript SEO: sebuah Definitive Guide)
- “Any kind of SSR, static rendering, and prerendering setup is going to be fine for search engines.” (terjemahan) “apa pun jenis dari SSR, static rendering, dan prerendering setup adalah going untuk menjadi fine untuk mesin pencari.” — melalui-line untuk setiap kerangka kerja pada ini hub.
- renderer takes sebagian besar restrictive robots directive di seluruh mentah dan dirender HTML — so sebuah kerangka kerja itu injects
noindexclient-side dapat deindex sebuah halaman bahkan ketika shell saysindex.
Client-side kerangka kerja SEO checklist
berfungsi untuk React, Vue, Angular, Svelte, dan SolidJS alike:
- Anda know apakah Anda app adalah CSR, SSR, atau prerendered hari ini (periksa View Sumber — adalah konten di mentah HTML, atau hanya sebuah empty mount node?).
- konten itu harus peringkat atau menjadi cited adalah di server-dirender atau prerendered HTML — tidak injected hanya setelah JS berjalan.
- Per-route
<title>dan deskripsi meta adalah managed (head package atau dibangun-di API), dan mereka’re unique per halaman di dirender HTML. - Router tautan adalah nyata
<a href>anchors (History API routing, tidak#-fragment routing atauonclickpada sebuah<div>). - JavaScript dan CSS adalah tidak blocked di
robots.txt(Google tidak akan render dari blocked files). - tanpa konten adalah gated behind sebuah scroll, click, atau hover.
- Client-side “tidak ditemukan” (terjemahan) “tidak ditemukan” views mengembalikan nyata
404atau carrynoindex(Tidak soft-404 shells). - Tidak JS injects sebuah
noindexitu contradicts mentah HTML (Google takes sebagian besar restrictive). - Anda’ve considered Bing dan AI crawler, tidak hanya Google — SSR/prerender adalah satu-satunya reliable jawaban untuk them.
- Anda’ve verified di pemeriksaan URL (dirender HTML + screenshot + console), tidak hanya Anda own browser.
itu memeriksa collapse several distinct outputs ke satu halaman. Verify setiap stage secara terpisah — sebuah route dapat lulus satu dan fail berikutnya:
| Stage | Apa untuk periksa |
|---|---|
| Direct respons (JS disabled/blocked) | Fetch URL dengan JS off. adalah Anda unique heading dan body copy present, atau hanya mount node? |
| Streamed chunks (jika streaming) | melakukan konten arrive progressively, atau melakukan sebuah slow chunk hold up semuanya setelah ini? |
| Dirender DOM (JS executed) | setelah bundle berjalan, adalah akhir DOM menyelesaikan — heading, tautan, data terstruktur semua present? |
| Hydration | melakukan client take di atas cleanly, atau melakukan console errors/hydration mismatches muncul? |
| Client navigation | melakukan sebuah di-app route perubahan perbarui URL, judul, dan canonical yang sama cara sebuah direct muat akan? |
| kode status | melakukan sebuah nyata 404/410/5xx route kembalikan itu status secara langsung, tidak hanya sebuah client-dirender message di dalam sebuah 200? |
| Metadata | adalah dirender <title>, deskripsi, canonical, dan robots directive correct per route — tidak hanya present? |
Kerangka kerja → perbaiki, di sebuah glance
| kerangka kerja | Default render | Head management | SSR / meta-kerangka kerja | Prerender path |
|---|---|---|---|---|
| React | CSR | react-helmet-async | Berikutnya.js | Berikutnya.js SSG / react-snap |
| Vue | CSR | @unhead/vue | Nuxt | Nuxt nuxi generate / prerender plugin |
| Angular | CSR (SPA) | dibangun-di Title / Meta | Angular SSR (adalah Universal) | ng build prerender |
| Svelte | CSR (Svelte) / SSR (SvelteKit) | <svelte:head> | SvelteKit | adapter-static (mind ssr:false) |
| SolidJS | CSR | @solidjs/meta | SolidStart | SolidStart prerender |
dua-bagian perbaiki (memorize ini)
- Head management → unique
<title>/ meta per route. - rendering strategy → prerender (SSG) atau SSR atau matching meta-kerangka kerja. Head management alone melakukan tidak fill empty shell.
Risk ladder (lowest → highest SEO risk)
| Approach | SEO risk | Ketika |
|---|---|---|
| Prerender / SSG | Lowest | konten stable per permintaan |
| SSR (meta-kerangka kerja) | rendah | Per-permintaan / dynamic konten itu harus peringkat |
| Hydration (isomorphic) | rendah | App + konten hybrid |
| Penuh CSR | Highest | App UI behind login itu needn’t peringkat |
crawler reality periksa
| crawler | Berjalan Anda JS? |
|---|---|
| Googlebot | Ya — tetapi delayed, queued, stateless |
| Bingbot | Inconsistently |
| AI crawler (LLM / AI penelusuran) | Mostly Tidak |
CSR-hanya konten adalah sebuah gamble di mana-mana except Google — dan bahkan di sana ini adalah delayed. SSR/prerender menghapus gamble untuk semua dari them.
umum client-side kerangka kerja SEO issues
Penelusuran alat tampilkan sebuah empty halaman atau hanya app shell
Symptom: Mentah HTML berisi hanya sebuah mount element such sebagai #root, #app, atau
app-root, sementara terlihat halaman berisi nyata copy. mungkin penyebab: route
adalah fully client-dirender. Perbaiki: Prerender stable routes atau move route untuk
kerangka kerja’s SSR-capable meta-kerangka kerja. Konfirmasi perbaiki oleh fetching URL dengan
JavaScript disabled dan finding -nya unique heading dan body copy di respons.
setiap route memiliki yang sama judul atau canonical
Symptom: Several URLs render berbeda views tetapi expose yang sama judul, deskripsi, atau canonical. mungkin penyebab: shared HTML shell owns head dan route perubahan melakukan tidak perbarui ini. Perbaiki: gunakan kerangka kerja-spesifik head API dan set metadata dari route data. Konfirmasi setiap route’s akhir DOM berisi satu self-referencing canonical dan -nya own judul.
tautan berfungsi untuk pengguna tetapi crawler melakukan tidak menemukan routes
Symptom: Navigation berfungsi di browser, namun ditautkan routes stay undiscovered.
mungkin penyebab: Click handlers pada buttons atau div elements replace dapat di-crawl
anchors. Perbaiki: Render nyata <a href="..."> tautan dan let router enhance them.
Konfirmasi destination muncul sebagai sebuah href di dirender DOM tanpa clicking.
Console menampilkan hydration errors atau mismatched konten
Symptom: server-dirender/prerendered HTML looks right, tetapi browser
console logs hydration warnings, atau konten briefly flashes dan perubahan right
setelah muat. mungkin penyebab: server output dan client’s pertama render
disagree — sering dari date/locale formatting, random IDs, atau window-dependent
code berjalan selama awal render. Perbaiki: membuat server dan client
render deterministically untuk yang sama input; move browser-hanya logic untuk jalankan
setelah hydration, tidak selama ini. Konfirmasi oleh memuat route dengan JS enabled dan
memeriksa untuk zero hydration errors di console.
sebuah route perubahan state di browser tetapi direct URL tidak match
Symptom: Clicking melalui app produces sebuah berfungsi halaman, tetapi requesting itu sama URL secara langsung (atau setelah sebuah refresh) mengembalikan sebuah berbeda hasil — sebuah generic shell, sebuah wrong kode status, atau stale metadata. mungkin penyebab: Client navigation memperbarui di-browser view tanpa sebuah matching server-side route handler, so state itu ada setelah sebuah client transition adalah tidak pernah sebuah nyata, independently-requestable halaman. Perbaiki: pastikan setiap route sebuah pengguna dapat reach oleh navigating adalah juga secara langsung requestable dan mengembalikan yang sama konten, status, dan metadata. Konfirmasi oleh memuat URL fresh (tidak oleh clicking ke ini) dengan JS disabled pertama, lalu enabled.
Uji pemahaman Anda: Client-side kerangka kerja
Five quick pertanyaan pada shared SEO masalah dan perbaiki di seluruh React, Vue, Angular, Svelte, dan SolidJS. Pick sebuah jawaban untuk setiap, lalu periksa.
Resources worth Anda time
My related writing
- JavaScript SEO: sebuah Definitive Guide — my penuh guide untuk rendering, DOM parity, paling-restrictive-directive aturan, dan choosing sebuah rendering setup. foundation di bawah setiap kerangka kerja pada ini hub.
- Beginner’s Guide untuk SEO teknis — di mana rendering sisi klien dan JavaScript SEO fit di bigger picture.
My speaking
- Bagaimana Penelusuran berfungsi (SlideShare) — my walkthrough dari crawling, rendering, pengindeksan, dan peringkat. (My standing disclaimer applies: “Ini adalah my understanding dari sistem… tidak going untuk menjadi 100% menyelesaikan atau accurate.” (terjemahan) “ini adalah my understanding dari sistem… tidak going untuk menjadi 100% menyelesaikan atau accurate.”)
Dari industri
- web.dev — Rendering di Web — penjelasan kanonis dari tim Chrome tentang CSR vs. SSR vs. SSG vs. hydration; model mental terbaik yang tidak bergantung pada framework untuk bagian strategi rendering dalam perbaikan ini.
- Pusat Penelusuran Google — dasar-dasar SEO JavaScript — dokumentasi sumber primer resmi tentang proses crawl → render → indeks dan tautan yang dapat dirayapi.
- Pusat Penelusuran Google — perbaikan masalah JavaScript terkait penelusuran — soft-404s setelah routing sisi klien dan History API, yang dihadapi setiap router SPA.
- Daftar putar SEO JavaScript Martin Splitt — seri video resmi tentang cara Google menangani aplikasi JS, dengan pendekatan yang tidak bergantung pada framework.
- Onely — hub SEO JavaScript — tulisan teknis mendalam tentang rendering dan audit JS-SEO dari agensi spesialis.
Log perubahan
Diperbarui 8 Agu 2026.
Ringkasan editorial dan detail perubahan yang tercatat.Detail perubahan
-
Catatan perubahan terperinci saat ini tersedia dalam bahasa Inggris.
Perbandingan lengkap tidak tersedia — tidak ada cuplikan sebelumnya yang diarsipkan untuk revisi ini.
Diperbarui 17 Jul 2026.
Ringkasan editorial dan detail perubahan yang tercatat.Detail perubahan
-
Catatan perubahan terperinci saat ini tersedia dalam bahasa Inggris.
-
Catatan perubahan terperinci saat ini tersedia dalam bahasa Inggris.
-
Catatan perubahan terperinci saat ini tersedia dalam bahasa Inggris.
Perbandingan lengkap tidak tersedia — tidak ada cuplikan sebelumnya yang diarsipkan untuk revisi ini.