JavaScript SEO memastikan page berasaskan JavaScript boleh ditemukan, dicrawl, dirender dan diindex dengan reliable. Google boleh menjalankan JavaScript menggunakan evergreen Chromium, tetapi itu bukan jaminan setiap route, API response atau client state akan menjadi indexed page.
JavaScript site boleh rank. Implementation yang lebih selamat memberi setiap valuable page stable URL, crawlable <a href>, useful HTML, status dan index signals yang tepat, serta rendered result yang tidak bergantung pada click, login atau fragile API.
Cara Google memproses JavaScript
Google menerangkan tiga fasa utama: crawling, rendering dan indexing. Semasa processing, Google boleh extract links daripada initial response, queue page yang layak untuk rendering, jalankan JavaScript melalui Web Rendering Service, kemudian process rendered HTML.
Rendering berada dalam queue; Google tidak menerbitkan guaranteed delay atau fixed “rendering budget” bagi setiap URL. Diagnose stage sebenar dan jangan anggap semua masalah ialah delayed second wave. Gunakan panduan crawling dan indexing apabila evidence bukan khusus kepada JavaScript.
| Stage | Evidence diperlukan | Failure biasa | Cara verify |
|---|---|---|---|
| Discovery | Persistent URL dalam crawlable link atau Sitemap | Button, hash route atau orphan page | Internal crawl dan link graph |
| Crawl | Accessible HTML dan required resources | robots, auth, 4xx/5xx atau blocked API | HTTP response, logs dan URL Inspection |
| Render | Script selesai dengan meaningful DOM | Runtime error, stale bundle, API/CORS fail | Rendered HTML, screenshot, console dan resources |
| Index selection | Useful content dan consistent directives | Noindex, duplicate, wrong Canonical atau soft 404 | Page Indexing dan URL Inspection |
| Serving | Relevant indexed document | Intent, quality atau stronger alternative | Query/page performance, bukan render test sahaja |
Initial HTML, rendered HTML dan indexed content berbeza
HTTP response ialah output server. Rendered DOM ialah output selepas script berjalan. Indexed document ialah representation yang Google pilih; browser view sahaja tidak membuktikannya.
Test tanpa JavaScript berguna untuk melihat initial response, bukan untuk mendakwa itulah pandangan Google. Banding semua layer dan catat URL, user agent, masa serta release.
| Layer | Soalan | Tool | Limit |
|---|---|---|---|
| Response HTML | Apa tiba sebelum JavaScript? | curl, View Source, non-rendered crawler | Tidak menunjukkan final DOM |
| Rendered DOM | Apa browser/test ini render? | DevAlat, rendered crawler, Rich Results Test | Local success bukan bukti indexed |
| Google live render | Boleh Google fetch dan render sekarang? | URL Inspection live test | Tidak menjamin indexing |
| Indexed state | Apa Google pilih? | Indexed URL Inspection dan Search Console | Tidak menjamin ranking query |
Pilih rendering mengikut keperluan page
Tiada satu framework yang “SEO-approved”. Pilih cara paling reliable untuk menyampaikan main purpose, kemudian ukur freshness, cache, server reliability dan interaction cost.
Google menyatakan server-side atau pre-rendering masih idea yang baik untuk speed dan bot yang tidak menjalankan JavaScript. web.dev pula secara umum menggalakkan static atau server rendering berbanding full client rehydration apabila content membenarkannya.
| Pattern | First response | Sesuai untuk | Risiko utama |
|---|---|---|---|
| Static generation (SSG) | Complete build-time HTML | Artikel, service, docs, known routes | Stale build atau route tidak digenerate |
| Server-side rendering (SSR) | Request-time HTML | Public page yang kerap berubah | Origin lambat, cache atau server failure |
| Streaming SSR | HTML dihantar berperingkat | Dynamic page dengan staged data | Critical content mungkin lewat |
| Hybrid/islands | HTML + selected interactive components | Content dengan sedikit tools/widgets | Component rules tidak konsisten |
| Client-side rendering (CSR) | App shell kemudian browser render | Authenticated tools dan complex state | Content bergantung pada JS/API |
| Prerender snapshot | Generated HTML snapshot | Finite routes dan transitional system | Coverage dan freshness drift |
Dynamic rendering ialah workaround, bukan default
Dynamic rendering memberi rendered version kepada crawler tertentu dan client-rendered version kepada pengguna. Google tidak menganggap equivalent output sebagai cloaking, tetapi menyifatkannya sebagai temporary workaround dan mencadangkan server rendering, static rendering atau hydration untuk jangka panjang.
Gunakan hanya apabila current system belum boleh diubah, rekod crawler detection dan content parity, pantau cache freshness dan sediakan exit plan. Claims, links atau structured data yang berbeza mewujudkan quality dan policy risk.
Hantar core answer dalam dependable HTML
Untuk landing page, artikel, category atau produk awam, default yang robust ialah main title, core copy, primary links dan media berguna dalam initial atau reliably rendered HTML. JavaScript patut enhance interaction, bukan menjadikan jawapan bergantung pada click.
Hydration bukan automatik selamat: data mismatch boleh menggantikan server DOM, blank content, duplicate component atau menghasilkan page yang nampak siap sebelum control berfungsi. Test slow network, failed API dan direct deep URL.
- Primary topic dan claims sama sebelum/selepas render.
- H1, key copy dan primary action kekal.
- Navigation dan in-content link mempunyai destination sebenar.
- User-specific content dipisahkan daripada public indexable content.
- API failure memberi useful fallback, bukan empty shell.
- Hydration tidak membuang atau duplicate important DOM.
- Mobile render mempunyai indexable essentials yang sama.
Bina crawlable link dan durable route
Google secara umum crawl link apabila element <a> mempunyai href ke alamat web sebenar. JavaScript boleh inject anchor itu, tetapi div, span atau anchor dengan event handler sahaja bukan discovery path yang sama.
Untuk client routing, gunakan real path dan History API. Direct request, refresh, copy/paste dan browser Back perlu kembali ke intended view. Google secara umum tidak menyokong URL fragment sebagai identifier untuk page content yang berubah.
| Component | Disyorkan | Elakkan |
|---|---|---|
| Navigation/card | <a href="ms/services/seo-geo/"> | div onclick atau routerLink tanpa href |
| SPA route | Clean URL + History API | /#/products untuk indexable content |
| Deep URL | Server pulangkan route page | Generic home shell atau 404 |
| Penomboran halaman | Sequential crawlable URLs | Infinite scroll tanpa persistent pages |
| Filters | Index stable valuable combinations sahaja | Setiap transient state menghasilkan parameter |
| Modal/tab | Satu URL jika bukan distinct landing page | Hidden state berpura-pura sebagai full page |
Pastikan metadata dan index signals stabil
Google boleh process title, description dan Canonical yang ditulis JavaScript, tetapi critical directives lebih mudah dikawal apabila initial HTML sudah betul. Jangan hantar satu Canonical kemudian ganti dengan conflicting value. Panduan Canonical dan redirect menerangkan duplicate consolidation dan migration.
Berhati-hati dengan noindex: Google menyatakan rendering mungkin dilangkau selepas noindex ditemukan, jadi JavaScript yang cuba membuang directive itu mungkin tidak diproses.
- Descriptive title dan useful meta description.
- Satu consistent Canonical kepada preferred URL.
- Intentional robots meta atau X-Robots-Tag.
- Correct language, localized links dan hreflang jika digunakan.
- Preferred 200 URLs sahaja dalam XML Sitemap.
- Structured data yang menerangkan visible route.
- Tiada environment, tenant atau user state dalam metadata.
- Server response sepadan dengan rendered page state.
Jadikan API dan hydration failure-safe
Jika core page bergantung pada API, sahkan endpoint boleh diakses anonymous, menggunakan web protocol yang sesuai, CORS betul, response reliable dan page menangani partial atau failed data. Browser session dengan cached login bukan crawl test yang sah.
Jangan buat kesimpulan tentang Googlebot hanya daripada client analytics. Google menyatakan Web Rendering Service boleh mengabaikan request yang tidak penting untuk content; gunakan server, CDN dan API logs bersama rendered output.
| Failure | Output | Response lebih selamat |
|---|---|---|
| API timeout | Spinner berterusan | Server-render critical data atau stable fallback |
| Auth leak | Blank/401 panel | Public data pada anonymous endpoint |
| Hydration mismatch | Server content hilang/duplicate | Align server/client data dan monitor error |
| Stale cached bundle | Markup dan runtime tidak sepadan | Content-hashed assets dan compatible deploy |
| CORS/CSP issue | Request/script blocked | Test production headers dan origins |
| Third-party outage | Primary content hilang | Jadikan third-party noncritical |
Lazy-load tanpa menyembunyikan content
Google tidak scroll atau click untuk berinteraksi dengan page. Guidancenya ialah load relevant lazy content apabila content visible dalam viewport. Native lazy loading atau IntersectionObserver boleh melakukannya tanpa user action.
Jangan lazy-load main LCP image. Infinite scroll memerlukan persistent URL bagi setiap chunk, stable content pada URL itu, sequential links, direct access dan History API update apabila primary visible chunk berubah.
| Content | Reliable pattern | Test |
|---|---|---|
| Hero/LCP image | Discoverable src/srcset dan eager jika sesuai | Loaded dalam initial viewport/rendered HTML |
| Below-fold image | Native lazy + width/height | URL terdapat dalam rendered element |
| Artikel/produk batch | Paginated URLs + infinite scroll enhancement | Setiap page boleh dibuka dan linked |
| Accordion | Text dalam DOM; control ubah visibility | Tiada new fetch selepas click |
| Video/embed | Stable poster/fallback + reserved size | Main meaning kekal jika provider gagal |
Pulangkan status dan redirect yang bermakna
Client router tidak boleh membetulkan semua server response yang salah. Valid document patut 200; permanent move biasanya server-side 301 atau 308; missing page 404 atau 410; temporary failure tidak patut menjadi empty 200.
Untuk CSR SPA yang tidak boleh return missing-route status, Google mendokumenkan dua workaround soft 404: redirect ke server URL yang memberi 404, atau tambah noindex pada client error page. Baiki server routing apabila praktikal.
| State | Preferred response | Sebab |
|---|---|---|
| Valid public route | 200 + meaningful content | Normal processing |
| Permanent move | 301/308 ke closest relevant URL | Clear destination dan consolidation |
| Temporary move | 302/307 jika benar-benar temporary | Kekalkan temporary intent |
| Removed tanpa replacement | 404/410 + useful error page | Elak soft 404 |
| Application/server failure | Appropriate 5xx | Signal retry, bukan thin content |
| Private route | Authentication + suitable controls | Elak accidental public indexing |
Anggap image, structured data dan bahasa sebagai route data
JavaScript-generated JSON-LD boleh diproses apabila final rendered markup valid dan sepadan visible content. Test production URL dengan Rich Results Test dan URL Inspection, bukan development component sahaja. Map claims melalui panduan structured data.
Image perlukan crawlable source dan useful alt; locale route perlukan translated visible content, localized metadata, consistent Canonical dan hreflang. Jangan render satu bahasa lalu tukar mengikut browser location atau cookie pada URL yang sama.
- Visible title dan metadata daripada rekod yang sama.
- Canonical/hreflang menggunakan final public URLs.
- Structured data IDs dan Breadcrumb URLs sepadan route.
- Image URLs berfungsi tanpa session token.
- Currency, availability dan date konsisten.
- Locale boleh dicapai melalui crawlable links.
- Tiada placeholder dalam production.
Kawal resource, cache dan performance
Jangan block JS atau CSS yang diperlukan untuk memahami page. Google rendering cache resources, jadi gunakan content fingerprint seperti app.[hash].js dan deploy HTML/assets yang compatible. Monitor CDN, CSP, CORS dan API sebagai production dependencies.
JavaScript juga boleh mempengaruhi Core Web Vitals. Hydration berlebihan, long tasks dan third-party scripts boleh melambatkan interaction walaupun content boleh diindex. Trace real bottleneck; bundle size sahaja bukan outcome.
Diagnose symptom sebelum tukar framework
| Symptom | Evidence pertama | Investigation |
|---|---|---|
| URL tidak ditemukan | Internal crawl/link graph | href, orphan route, pagination |
| Crawled tetapi content hilang | Response vs rendered DOM | JS/API error, blocked resource, interaction |
| Wrong URL indexed | Google-selected Canonical | Canonical conflict, parameters, links |
| Soft 404 | Status dan rendered copy | Generic shell, missing API, client error |
| Wrong title/snippet | Initial/rendered head + H1 | Shared template, stale route state |
| Image hilang | Rendered img source + fetch | Lazy loading, placeholder, permission |
| Locale tidak index | Localized render + hreflang | Same-URL switching, missing links |
| Indexed tanpa traffic | Query relevance dan quality | Bukan semestinya JavaScript |
Audit JavaScript SEO yang repeatable
Simpan finding, evidence, owner dan validation result dalam workflow audit SEO supaya rendering symptom menjadi accountable release task.
- List public templates, route patterns dan rendering modes.
- Sample high-value, new, deep, paginated, localized, redirected dan missing URLs.
- Rekod status, headers, raw HTML dan resource access.
- Crawl tanpa rendering dan dengan rendering; compare URL, links, copy dan metadata.
- Buka dan refresh setiap deep URL pada desktop/mobile.
- Inspect console, network, CORS, CSP, hydration dan API failure.
- Validate Canonical, robots, hreflang, schema dan Sitemap.
- Jalankan Rich Results Test dan URL Inspection live pada sample.
- Banding live render dengan indexed state dan exclusions.
- Semak server/CDN/API logs bagi representative Googlebot fetch.
- Prioritize mengikut template, business value dan evidence.
- Retest staging, release secara terkawal dan monitor.
Release QA untuk JavaScript migration
| Gate | Pass condition | Evidence |
|---|---|---|
| Route parity | Semua valuable old URL mempunyai final URL | Inventory dan redirect map |
| HTML parity | Core answer/link survive rendering change | Raw/rendered comparison |
| Signal parity | Title, Canonical, robots, hreflang dan schema betul | Export + manual samples |
| Error behavior | Missing/moved/failed states betul | Status test set |
| Performance | Key journey usable pada mobile | Field baseline + lab traces |
| Analytics | Consent/events/conversions tanpa duplicate | Debug + production checks |
| Rollback | Previous release/data recoverable | Release note + owner |
Mitos JavaScript SEO
- “Google run JavaScript, jadi implementation tidak penting.”
- “Semua page index dalam guaranteed second wave.”
- “Google publish fixed render budget bagi setiap URL.”
- “CSR sentiasa buruk untuk SEO.”
- “SSR automatik selesaikan discovery, Canonical dan quality.”
- “Sitemap boleh ganti internal links.”
- “Infinite scroll indexable kerana user boleh scroll.”
- “Successful browser render membuktikan indexed.”
- “Dynamic rendering patut jadi permanent default.”
- “Framework migration sahaja akan naikkan ranking.”
Soalan lazim
Boleh Google index React, Vue atau Angular yang client-rendered?
Boleh jika URL ditemukan, resources boleh difetch, content boleh dirender dan page dipilih untuk indexing. Framework sahaja tidak menjamin atau menghalang index.
Adakah SSR wajib untuk SEO?
Tidak. SSR, SSG, hybrid dan CSR boleh berfungsi. Public landing page biasanya mendapat manfaat daripada dependable HTML; authenticated state lazimnya tidak perlu index.
Adakah Google render setiap 200 page serta-merta?
Eligible 200 page masuk rendering queue, tetapi Google tidak menjamin timing. Live render juga bukan jaminan index atau rank.
Patutkah test dengan JavaScript disabled?
Gunakan untuk inspect initial response dan resilience, bukan sebagai copy Googlebot. Test rendered output serta live/indexed information juga.
Adakah JavaScript redirect selamat?
Google boleh process ketika rendering, tetapi server-side 301/308 biasanya lebih jelas untuk permanent move.
Boleh JavaScript ubah Canonical?
Boleh diproses, tetapi elakkan conflict dengan original HTML. Gunakan satu value daripada route source of truth.
Boleh JavaScript buang noindex selepas load?
Jangan bergantung padanya. Google mungkin skip rendering selepas melihat noindex.
Adakah dynamic rendering cloaking?
Bukan apabila crawler dan user menerima equivalent content, tetapi Google memanggilnya temporary workaround.
Adakah SPA perlukan XML Sitemap?
Public indexable routes boleh dimasukkan, tetapi setiap route masih perlukan direct access, correct status, crawlable link dan useful content.
Bagaimana tahu JavaScript menyebabkan indexing loss?
Buktikan repeatable difference antara raw, rendered, live-tested dan indexed output, kemudian padankan dengan template dan tarikh. Traffic decline sahaja bukan bukti.
Rujukan rasmi
- Google Cari Central: JavaScript SEO basics
- Google Cari Central: fix JavaScript search problems
- Google Cari Central: crawlable links
- Google Cari Central: URL structure
- Google Cari Central: lazy-loaded content and infinite scroll
- Google Cari Central: dynamic rendering as a workaround
- Google Cari Central: HTTP status codes
- Google Cari Central: redirects
- Google Cari Central: JavaScript-generated structured data
- web.dev: rendering on the web
- web.dev: client-side rendering and interactivity
- MDN: History API pushState()
- Ahrefs: JavaScript SEO issues and best practices
- Semrush: JavaScript SEO guide
Kongsikan framework, route inventory dan affected URLs. Jack boleh compare response/rendered HTML, crawl paths, directives, logs dan indexed state untuk menentukan smallest reliable fix.
Evolusi Ranking Google: Daripada PageRank ke Modern Cari Systems2 September 2026
Kandungan AI dan SEO Google: Apa Dibenarkan, Apa Dianggap Spam dan Cara Publish2 September 2026
Google Florida Update 2003: Fakta, Teori dan Lesson SEO2 September 2026