Panduan JavaScript SEO

TL;DR — JavaScript SEO adalah tentang satu pertanyaan: dapat mesin pencari see Anda konten? Modern situs bangun lot dari halaman di browser dengan JavaScript. jika Anda penting text dan tautan hanya tampilkan up setelah scripts jalankan, Anda perlu konfirmasi Google dapat masih reach them. Google biasanya dapat — trouble adalah di detail.

Apa JavaScript SEO adalah

Lots dari situs bangun bagian (atau semua) dari halaman di Anda browser dengan JavaScript. server mengirim beberapa HTML, dan lalu scripts jalankan untuk fill di konten, muat lebih items, atau tukar views tanpa sebuah penuh halaman reload. JavaScript SEO adalah practice dari membuat sure mesin pencari dapat masih crawl, render, dan indeks itu konten.

Di sini’s order hal happen di untuk Google:

1. crawl — Google downloads mentah HTML dari Anda URL.
2. Render — Google berjalan halaman’s JavaScript di sebuah browser untuk bangun finished halaman ( rendering langkah).
3. indeks — Google membaca itu finished halaman dan files ini away.

Google documents ini sebagai three main phases untuk processing JavaScript web apps.

jika Anda konten hanya muncul setelah JavaScript berjalan, Google memiliki untuk render halaman successfully sebelum ini dapat see ini. sebagian besar dari time ini melakukan. Ketika ini tidak, Anda konten dapat diam-diam go missing dari penelusuran.

baik news pertama

JavaScript adalah tidak buruk untuk SEO. Google berjalan sebuah up-untuk-date versi dari Chrome dan dapat execute yang sama JavaScript Anda pengunjung melakukan. old fear — “Google tidak dapat baca JavaScript” (terjemahan) “Google dapat’t baca JavaScript” — hanya tidak benar anymore.

Apa dapat go wrong adalah lebih spesifik:

• Anda konten perlu sebuah click atau sebuah scroll untuk muat, dan Google tidak click atau scroll. Bukti untuk klaim ini Google Search does not interact with a page, so lazy-loaded content should load when it becomes visible in the viewport rather than requiring user interaction. Cakupan: Google Search's documented rendering behavior for lazy-loaded content; other crawlers can behave differently. Tingkat keyakinan: tinggi · Diverifikasi: 2026-07-14 Google Search Central: Fix lazy-loaded content
• Anda tautan tidak nyata tautan (mereka’re buttons atau click handlers), so Google dapat’t ikuti them. Bukti untuk klaim ini Google can reliably discover links only when they are HTML anchor elements with an href attribute. Cakupan: Link discovery by Google Search; this does not claim that every discovered URL will be crawled or indexed. Tingkat keyakinan: tinggi · Diverifikasi: 2026-07-14 Google Search Central: Make your links crawlable
• Anda accidentally blocked Anda JavaScript atau CSS files di robots.txt, so Google dapat’t render halaman properly.
• halaman looks fine di Anda browser, tetapi konten tidak pernah menampilkan up di Google’s dirender view.

sederhana checklist

• Bandingkan Anda mentah HTML (right-click → View Sumber) dengan dirender HTML (Google Search Console’s pemeriksaan URL alat). jika penting konten adalah missing dari dirender view, itu’s Anda masalah.
• pastikan tautan adalah nyata <a href> tautan, tidak click handlers pada sebuah <div>.
• jangan block Anda JavaScript atau CSS files di robots.txt.
• jika sebuah fitur perlu sebuah click atau scroll untuk muat konten, pastikan itu konten adalah juga reachable beberapa lainnya cara.
• untuk konten itu absolutely harus peringkat, prefer rendering sisi server atau sebuah static/prerendered bangun, di mana konten adalah sudah di mentah HTML.

ingin deeper versi — nyata failure modes, infinite-scroll trap itu mendapatkan dua halaman terindeks sebagai satu, dan cara test dirender HTML? Switch untuk Advanced tab. untuk bagaimana Google’s renderer itself berfungsi dan yang rendering setup untuk choose, see rendering halaman.

TL;DR — Google dapat jalankan Anda JavaScript, so “dapat Google baca JS?” (terjemahan) “dapat Google baca JS?” adalah wrong pertanyaan. failure modes adalah parity (mentah vs. dirender DOM), interaction (Google tidak scroll atau click), state ( renderer adalah stateless), dan timing. pertahankan tautan sebagai nyata <a href> anchors, jangan block JS/CSS, lazy-muat pada viewport tidak interaction, kembalikan nyata statuses untuk client-side 404s, dan remember sebuah mentah noindex dapat mencegah rendering sebelum JavaScript dapat hapus ini. Combine directives itu adalah sebenarnya processed, tetapi melakukan tidak assume sebuah universal mentah/dirender winner. Watch infinite scroll terutama: sebuah tall render viewport dapat trigger loader dan gabungkan dua URLs ke satu terindeks halaman. untuk renderer internals dan yang rendering mode untuk pick, see rendering.

dapat Google baca JavaScript? Ya — itu’s tidak pertanyaan

«Google processes JavaScript apps in three phases: “Google processes JavaScript web apps in three main phases: 1. Crawling 2. Rendering 3. Indexing.” The middle phase runs your JS in an evergreen, headless Chrome to build the DOM that gets indexed. “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) (Ringkasan bahasa Indonesia untuk bagian dua puluh dua, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

So Google dapat jalankan Anda JavaScript. berguna pertanyaan adalah lebih spesifik:

«- Parity — does the rendered DOM actually contain what you think it does? » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh empat, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- Interaction — does anything require a scroll/click Google won’t perform? » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh empat, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- State — are you relying on cookies/localStorage the stateless renderer clears? » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh empat, bagian kecil tiga: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- Timing — is critical content deferred behind slow or late JavaScript? » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh empat, bagian kecil empat: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

pada timing secara khusus: Google queues sebuah di-crawl halaman (satu itu dikembalikan sebuah 200) untuk rendering, dan “the page may stay on this queue for a few seconds, but it can take longer than that.” (terjemahan) “ halaman dapat stay pada ini queue untuk sebuah sedikit seconds, tetapi ini dapat take lebih lama daripada itu.” ada Tidak published fixed delay atau timeout — dan sebuah halaman itu mengembalikan sebuah non-200 status, atau itu dimulai out dengan sebuah noindex directive, dapat skip render queue alih-alih tunggu untuk JavaScript untuk perubahan ini.

mechanics dari bagaimana Google renders — Web rendering Service, statelessness, caching, “dua waves” (terjemahan) “dua waves” myth — langsung pada rendering halaman. Di sini I’ll focus pada practical masalah dan memperbaiki.

tautan harus menjadi nyata <a href> anchors

ini adalah single sebagian besar umum JS-SEO bug. “Google dapat hanya discover Anda links jika they adalah <a> HTML elements dengan an href attribute.” (terjemahan) “Google dapat hanya menemukan Anda tautan jika mereka adalah <sebuah> HTML elements dengan sebuah href attribute.” sebuah clickable <div> dengan sebuah onclick handler adalah invisible untuk Google sebagai sebuah tautan — ini tidak akan menjadi diikuti, dan halaman itu bergantung pada ini untuk penemuan dapat go uncrawled. ini adalah perfectly fine untuk inject tautan dengan JavaScript, sebagai panjang sebagai mereka end up sebagai nyata <a href> anchors di dirender DOM. itu dirender anchors adalah parsed setelah JavaScript berjalan, though — landing di dirender DOM membuat sebuah tautan discoverable, ini adalah tidak sebuah promise itu URL mendapatkan di-crawl, terindeks, atau treated yang sama sebagai sebuah tautan present di mentah HTML.

Lazy-dimuat dan interaction-gated konten

renderer tidak behave like sebuah curious pengguna: “Google Search melakukan tidak interact dengan Anda halaman.” (terjemahan) “Google Search melakukan tidak interact dengan Anda halaman.” Tidak scrolling, Tidak clicking, Tidak hovering. So apa pun konten itu hanya memuat pada satu dari itu events tidak akan menjadi seen.

Google’s guidance: muat konten ketika ini enters viewport, tidak ketika pengguna acts — “membuat sure itu Anda lazy-loading implementation loads all relevant konten setiap kali it adalah visible di itu viewport,” (terjemahan) “pastikan itu Anda lazy-memuat implementation memuat semua relevant konten setiap kali ini adalah terlihat di viewport,” dan “don’t add lazy-loading to content that is likely to be immediately visible when a user opens a page.” (terjemahan) “jangan tambahkan lazy-memuat untuk konten itu adalah mungkin untuk menjadi immediately terlihat ketika sebuah pengguna opens sebuah halaman.” gunakan IntersectionObserver atau native loading="lazy" untuk images — tidak pernah sebuah scroll atau click handler — so konten memuat selama sebuah wajar render.

Infinite scroll: ketika dua halaman mendapatkan terindeks sebagai satu

ini adalah satu hampir tidak seorang pun menjelaskan, dan ini adalah worth seluruh bagian.

Googlebot dapat render di sebuah viewport considerably taller daripada sebuah typical browser window. Google tidak publish sebuah tepat render viewport size — dan ini dapat perubahan — so jangan design terhadap sebuah spesifik angka; test Anda own implementation alih-alih. Apa penting adalah mechanism: jika Anda infinite-scroll loader fires berdasarkan scroll position atau viewport height, sebuah taller-daripada-yang diharapkan rendering viewport dapat trigger loader selama rendering itself — dan berikutnya artikel atau product halaman’s konten mendapatkan appended ke yang sama DOM. Now dua distinct URLs’ konten memiliki telah dirender together, dan Google dapat indeks them sebagai satu halaman. di my own experience, “occasionally, two pages get indexed as one” (terjemahan) “occasionally, dua halaman mendapatkan terindeks sebagai satu” — I’ve memiliki halaman reported sebagai “tidak indexed” (terjemahan) “tidak terindeks” itu adalah sebenarnya terindeks sebagai bagian dari lainnya halaman (biasanya sebelumnya post di feed), karena “ketika Google resized itu viewport untuk menjadi lebih lama … it triggered itu infinite scroll dan loaded another artikel di ketika it adalah rendering.” (terjemahan) “ketika Google resized viewport untuk menjadi lebih lama … ini triggered infinite scroll dan dimuat lainnya artikel di ketika ini adalah rendering.” Konfirmasi apakah Anda own setup melakukan ini oleh memeriksa pemeriksaan URL’s dirender HTML untuk sebuah halaman Anda’d expect untuk berhenti pendek — jangan assume sebuah size dan jangan assume Anda’re safe.

ada dua layers untuk getting ini right.

«Make infinite scroll search-friendly in the first place. Support paginated loading underneath the infinite scroll. Each chunk should have “its own persistent, unique URL,” the content on each URL should stay the same each time it loads, you should avoid relative parameters like ?date=yesterday, you should “link sequentially to the individual URLs so that search engines can discover the URLs in a paginated set,” and when a new chunk loads on scroll you should “update the displayed URL using the History API.” Use real <a href> pagination links and unique URLs — “don’t use URL fragment identifiers” (the part after a #) for page numbers, because Google ignores them. As I say in my JavaScript SEO guide, “if you have an infinite scroll setup, I still recommend a paginated page version so that Google can still crawl properly.” » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh tujuh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

jika sebuah buggy loader adalah actively merging halaman, fastest perbaiki adalah blunt: “block itu JavaScript file itu menangani itu infinite scrolling so itu functionality tidak dapat trigger.” (terjemahan) “block JavaScript file itu menangani infinite scrolling so functionality dapat’t trigger.” jika loader dapat’t jalankan selama render, ini dapat’t append berikutnya halaman’s konten, dan setiap URL renders sebagai itself again.

Soft-404s setelah client-side routing

Single-halaman apps dapat tukar konten tanpa mengubah HTTP kode status, so sebuah “tidak ditemukan” (terjemahan) “tidak ditemukan” view dapat masih kembalikan 200. Google dapat classify itu respons sebagai sebuah soft 404 setelah evaluating dikembalikan konten, tetapi sebuah static fetch alone cannot prove itu Google memiliki dibuat itu classification. Dua memperbaiki: navigate dengan History API, dan untuk sebuah genuine tidak-ditemukan state either route untuk sebuah URL itu mengembalikan sebuah nyata 404 status atau tambahkan sebuah noindex tag. dan jangan lean pada URL fragments untuk routing — “itu AJAX-crawling scheme memiliki telah deprecated since 2015, so Anda tidak dapat rely pada URL fragments untuk berfungsi dengan Googlebot.” (terjemahan) “ AJAX-crawling scheme memiliki telah deprecated since 2015, so Anda dapat’t rely pada URL fragments untuk berfungsi dengan Googlebot.”

sebuah client-side redirect memiliki yang sama evidence masalah: awal respons dapat tetap 200 until JavaScript berjalan. Google mendukung JavaScript redirects hanya sebagai sebuah fallback ketika server-side atau meta-refresh redirects adalah tidak mungkin. Report static status dan observed dirender navigation secara terpisah; melakukan tidak rewrite HTTP status di audit atau panggil setiap dirender URL perubahan sebuah redirect.

jangan block JavaScript atau CSS di robots.txt

Google tidak akan render JavaScript dari blocked files atau pada blocked halaman. sebuah robots.txt aturan itu disallows Anda bundle (atau /_next/, /static/, /assets/ directory ini lives di) dapat break rendering entirely — Google fetches shell, dapat’t jalankan scripts, dan indeks sebuah empty halaman. periksa pemeriksaan URL’s halaman resources untuk apa pun blocked.

DOM parity dan stage-aware robots directives

Bandingkan Anda mentah HTML (View Sumber) terhadap dirender HTML (pemeriksaan URL). konten itu hanya ada di dirender HTML masih indeks — jika ini renders. konten di neither tidak exist untuk Google.

«There’s one stage-order risk Google documents directly: “When Google encounters the noindex tag, it may skip rendering and JavaScript execution, which means using JavaScript to change or remove the robots meta tag from noindex may not work as expected.” If your raw HTML ships an initial noindex you meant to swap out with JavaScript, Google can act on that raw noindex and never run the script that would have removed it. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian empat puluh enam, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

melakukan tidak turn ini ke sebuah universal “dirender wins” (terjemahan) “dirender wins” aturan. Reconciliation adalah field-spesifik:

«That matrix is why an auditor should keep source, rendered, response-header, and observed-search state distinct rather than collapsing them into one “effective” value. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian empat puluh sembilan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Pick sebuah rendering mode itu puts konten di DOM

sebagian besar JS-SEO risk muncul down untuk bagaimana HTML adalah produced. pendek versi: SSR, static/prerendering, dan hydration semua put konten di (atau quickly ke) DOM, yang reduces bagaimana banyak Anda visibilitas bergantung pada renderer succeeding; penuh client-side rendering leaves lebih riding pada rendering completing correctly, pada time, setiap time. Dynamic rendering adalah sebuah workaround, tidak sebuah peer option — sebagai dari Google’s guidance terakhir diperbarui December 2025, ini mendeskripsikan dynamic rendering sebagai sebuah workaround alih-alih sebuah panjang-istilah solusi dan recommends rendering sisi server, static rendering, atau hydration alih-alih. sebagai I put ini di my JavaScript SEO guide, “any kind dari SSR, static rendering, dan prerendering setup adalah going untuk menjadi fine untuk penelusuran engines.” (terjemahan) “apa pun jenis dari SSR, static rendering, dan prerendering setup adalah going untuk menjadi fine untuk mesin pencari.” penuh menu — CSR, SSR, SSG, hydration, ISR, edge, streaming, dan dynamic rendering — dengan sebuah trade-off table adalah pada rendering halaman. Google secara terpisah mendeskripsikan rendering sisi server atau pre-rendering sebagai sebuah baik idea untuk pengguna dan crawler. Bukti untuk klaim ini Google describes server-side rendering or pre-rendering as a good idea because it makes a website faster for users and crawlers. Cakupan: Google Search guidance for JavaScript sites; the source does not prescribe one framework or guarantee indexing. Tingkat keyakinan: tinggi · Diverifikasi: 2026-07-14 Google Search Central: Understand the JavaScript SEO basics

cara test

pemeriksaan URL di Search Console adalah sumber kebenaran: jalankan sebuah pengujian langsung, lalu lihat dirender HTML, screenshot, dan halaman resources / console messages untuk see apa dimuat dan apa failed. Rich hasil Test memberikan sebuah quick dirender-HTML periksa. di scale, gunakan crawler itu executes JavaScript (Ahrefs situs Audit, Screaming Frog di JS-rendering mode) untuk diff mentah vs. dirender di seluruh situs.

JavaScript adalah tidak buruk untuk SEO, dan ini adalah tidak evil. ini adalah hanya berbeda dari apa banyak SEOs adalah digunakan untuk. berfungsi dengan Anda developers, mendapatkan Anda penting konten ke DOM, dan let Google’s own alat — tidak Anda assumptions — menjadi arbiter dari apa dirender.

Di mana untuk go berikutnya: JavaScript SEO cluster

ini hub adalah map. setiap topic di bawah adalah -nya own deep dive:

rendering dan architecture

• SEO untuk sebuah CMS headless — bagaimana decoupled frontends memengaruhi crawling, rendering, metadata, sitemaps, dan tag canonical; yang rendering mode untuk pick; dan headless-spesifik failure modes Anda perlu know.

kerangka kerja-spesifik guides

• React SEO — mengapa CSR-pertama React membuat pengindeksan risk, bagaimana Google renders React apps, React Router dan History API, react-helmet-async untuk meta tags, dan ketika untuk reach untuk Berikutnya.js.
• Angular SEO — Angular’s SPA defaults, @angular/ssr (Angular Universal’s successor), dibangun-di judul dan Meta services, prerendering, dan incremental hydration di modern Angular.
• Berikutnya.js SEO — halaman Router vs App Router, Metadata API, next/image dan CWV, ISR timing dan Googlebot, sitemaps, dan paling umum Berikutnya.js SEO mistakes.
• Nuxt SEO — SSR oleh default, useSeoMeta(), Nuxt’s rendering modes, @nuxtjs/seo module ecosystem, dan bagaimana Nuxt compares untuk plain Vue untuk indexability.
• Vue SEO — Vue 3’s CSR default dan apa itu berarti untuk crawler, createWebHistory(), @unhead/vue, prerendering options tanpa sebuah meta-kerangka kerja, dan ketika Nuxt adalah right panggil.
• Svelte SEO — Svelte vs SvelteKit, SSR oleh default di SvelteKit, <svelte:head>, adapter-static + ssr: false trap, adapter choices, dan AI crawler implications.
• Astro SEO — zero-JS oleh default, islands architecture, @astrojs/sitemap, astro:assets, View Transitions dan History API, server Islands fallback perilaku, dan Astro’s Core Web Vitals advantages.

AI summary

sebuah condensed take pada Advanced versi:

• “Dapat Google baca JS?” (terjemahan) “dapat Google baca JS?” adalah wrong pertanyaan — ini dapat. failure modes adalah parity (mentah vs. dirender), interaction (Google tidak scroll/click), state (stateless renderer), dan timing.
• Timing memiliki Tidak fixed delay — Google queues sebuah 200 halaman untuk rendering dan dapat tunggu “beberapa seconds” (terjemahan) “sebuah sedikit seconds” atau lebih lama, dengan Tidak published timeout; sebuah non-200 status atau sebuah awal noindex dapat skip render queue entirely.
• tautan harus menjadi nyata <a href> anchors — onclick pada sebuah <div> adalah invisible sebagai sebuah tautan. Injecting tautan dengan JS adalah fine jika mereka end up sebagai anchors, tetapi dirender anchors adalah parsed setelah JS berjalan — discoverable, tidak sebuah crawl/indeks jaminan.
• Lazy-muat pada viewport, tidak interaction — Google “melakukan tidak interact dengan Anda halaman.” (terjemahan) “melakukan tidak interact dengan Anda halaman.” gunakan IntersectionObserver / native lazy-muat; jangan gate konten behind scroll atau click.
• Infinite scroll dapat gabungkan dua halaman ke satu — Googlebot dapat render di sebuah taller viewport daripada sebuah typical browser (Tidak tepat published size — test Anda own setup), dan itu kesenjangan dapat trigger loader dan append berikutnya halaman’s konten. Perbaiki: paginated URLs + nyata <a href> tautan + History API; jika sebuah loader adalah merging halaman, block -nya JS file.
• Soft-404s setelah client-side routing — mengembalikan nyata 404 atau noindex; jangan indeks empty shells; jangan rely pada URL fragments (AJAX-crawling deprecated 2015).
• jangan block JS/CSS di robots.txt — Google tidak akan render dari blocked files.
• noindex dapat block -nya own removal — Google dapat skip rendering ketika ini sees sebuah awal noindex, so JS dimaksudkan untuk hapus ini dapat tidak pernah jalankan.
• DOM parity + stage order (robots meta tags) — diff mentah vs. dirender, tetapi remember sebuah awal mentah noindex dapat berhenti rendering. Apply combination aturan hanya untuk directives sebenarnya processed; test canonical parity di bawah -nya own aturan.
• rendering mode perubahan dependency, tidak outcome — SSR/static/prerender/hydration put konten di DOM sooner, reducing reliance pada rendering; penuh CSR relies pada ini sebagian besar; dynamic rendering adalah sebuah dated Google workaround, tidak sebuah peer option. Penuh breakdown pada rendering halaman.
• Test dengan pemeriksaan URL (dirender HTML + screenshot + console), Rich hasil Test, dan sebuah JS-rendering crawler.

Dokumentasi resmi

Utama-sumber documentation dari mesin pencari.

Google

• memahami JavaScript SEO basics — three phases, dapat di-crawl tautan, dan testing dirender HTML.
• Perbaiki Penelusuran-related JavaScript masalah — soft-404 menangani, History API, dan renderer constraints.
• Perbaiki lazy-dimuat konten — muat pada viewport (tidak interaction), dan penelusuran-friendly infinite scroll.
• Ecommerce pagination dan incremental halaman memuat — unique URLs, <a href> tautan, dan mengapa Google ignores fragment identifiers.
• 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 dynamic rendering.

Quotes dari sumber

pada—record statements dari Google (plus sebuah sedikit dari my own writing). setiap penelusuran-mesin tautan adalah sebuah deep tautan itu jumps untuk quoted passage pada sumber halaman.

Google — rendering & tautan

«- “Google processes JavaScript web apps in three main phases: 1. Crawling 2. Rendering 3. Indexing.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh enam, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “Google can only discover your links if they are <a> HTML elements with an href attribute.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh enam, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “Rendering is important because websites often rely on JavaScript to bring content to the page, and without rendering Google might not see that content.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh enam, bagian kecil tiga: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “The page may stay on this queue for a few seconds, but it can take longer than that.” — on render-queue timing, no fixed delay published. Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh enam, bagian kecil empat: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “When Google encounters the noindex tag, it may skip rendering and JavaScript execution, which means using JavaScript to change or remove the robots meta tag from noindex may not work as expected.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh enam, bagian kecil lima: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Google — interaction, lazy-muat & infinite scroll

«- “Google Search does not interact with your page.” Jump to quote

• “…loads all relevant content whenever it is visible in the viewport.” Jump to quote
• “Give each chunk its own persistent, unique URL.” — search-friendly infinite scroll. Jump to quote
• “Don’t use URL fragment identifiers (the text after a # in a URL) for page numbers in a collection. Google ignores fragment identifiers.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh delapan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Google — soft-404 & routing

• “We recommend using the History API to load different views.” (terjemahan) “kami merekomendasikan menggunakan History API untuk muat berbeda views.” Jump untuk quote

Patrick Stox (my own berfungsi — JavaScript SEO: sebuah Definitive Guide)

• pada meta robots tags secara khusus: “With meta robots tags, Google is always going to take the most restrictive option it sees — no matter the location… Google will choose the most restrictive statements between HTML and the rendered version of a page.” (terjemahan) “dengan meta robots tags, Google adalah selalu going untuk take paling restrictive option ini sees — Tidak penting location… Google akan choose paling restrictive statements antara HTML dan dirender versi dari sebuah halaman.”
• “If you have an infinite scroll setup, I still recommend a paginated page version so that Google can still crawl properly.” (terjemahan) “jika Anda memiliki sebuah infinite scroll setup, I masih merekomendasikan sebuah paginated halaman versi so itu Google dapat masih crawl properly.”
• pada gabungkan: “occasionally, two pages get indexed as one” (terjemahan) “occasionally, dua halaman mendapatkan terindeks sebagai satu” — disebabkan ketika “Google resized the viewport to be longer … it triggered the infinite scroll and loaded another article in when it was rendering.” (terjemahan) “Google resized viewport untuk menjadi lebih lama … ini triggered infinite scroll dan dimuat lainnya artikel di ketika ini adalah rendering.” perbaiki: “block itu JavaScript file itu menangani itu infinite scrolling so itu functionality tidak dapat trigger.” (terjemahan) “block JavaScript file itu menangani infinite scrolling so functionality dapat’t trigger.”

JavaScript-SEO checklist

sebuah quick lulus untuk konfirmasi Google dapat render dan indeks Anda JS-dependent konten:

• penting konten muncul di dirender HTML (periksa pemeriksaan URL, tidak hanya View Sumber).
• tautan adalah nyata <a href> anchors — tidak onclick handlers pada <div>/<span>.
• JavaScript dan CSS files adalah tidak blocked di robots.txt.
• tanpa konten adalah gated behind sebuah click, scroll, atau hover (Google tidak interact); lazy-muat pada viewport melalui IntersectionObserver atau loading="lazy".
• Di atas—fold konten adalah tidak lazy-dimuat.
• Robots directives match antara mentah dan dirender HTML (Tidak JS injecting noindex) — Google takes sebagian besar restrictive.
• Client-side route perubahan itu hit sebuah missing resource mengembalikan nyata 404 atau noindex (Tidak soft-404 shells).
• Infinite scroll memiliki sebuah paginated versi dengan unique <a href> URLs dan History API memperbarui — dan tidak merging halaman di sebuah tall viewport.
• konten itu harus peringkat menggunakan SSR / static / prerendering, tidak penuh CSR (see rendering halaman).
• Anda’ve spot-diperiksa dirender screenshot dan console errors di URL Inspection’s pengujian langsung.

mental models

«1. “Can Google run my JS?” is the wrong question. It can. The real questions are about parity, interaction, state, and timing: » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian sembilan puluh dua, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- Parity — does the rendered DOM contain what you think it does? » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian sembilan puluh dua, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- Interaction — does anything require a scroll/click Google won’t perform? » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian sembilan puluh dua, bagian kecil tiga: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- State — are you relying on cookies/localStorage the stateless renderer clears? » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian sembilan puluh dua, bagian kecil empat: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- Timing — is critical content deferred behind slow/late JS? » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian sembilan puluh dua, bagian kecil lima: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

2. jika ini adalah tidak di dirender DOM, ini tidak exist. View Sumber menampilkan mentah HTML; pemeriksaan URL menampilkan dirender DOM. indeks decisions adalah dibuat pada dirender DOM — so itu’s artifact untuk periksa, setiap time.

3. nyata tautan atau Tidak tautan. penemuan rides pada <a href> anchors. Click handlers, buttons, dan JS navigation itu tidak pernah produces sebuah anchor adalah dead ends untuk crawling.

4. Design untuk sebuah bot itu tidak pernah touches halaman. Tidak scroll, Tidak click, Tidak hover. jika konten perlu sebuah tindakan untuk muncul, assume Google tidak akan see ini — muat ini pada viewport alih-alih.

5. Test untuk tall-viewport trap di infinite scroll. Googlebot dapat render di sebuah viewport taller daripada sebuah typical browser (Tidak fixed size adalah published, so jangan design terhadap sebuah spesifik angka), so sebuah scroll/height-triggered loader dapat fire selama render dan gabungkan berikutnya halaman di. Design untuk ini: paginated URLs + nyata tautan + History API; jika ini adalah actively merging, block loader’s JS.

6. Let alat arbitrate. Anda browser adalah tidak Googlebot. pemeriksaan URL’s dirender HTML, screenshot, dan console adalah sumber kebenaran — tidak “it looks fine pada my machine.” (terjemahan) “ini looks fine pada my machine.”

JavaScript-SEO gotchas — cheat sheet

Yang rendering mode? (dependency pada rendering succeeding)

ini tidak sebuah jaminan dari outcome — SSR/SSG/hydration masih perlu untuk render correctly dan lulus setiap lainnya periksa di ini artikel. Penuh breakdown (ISR, edge, streaming, dynamic rendering, dan trade-offs) pada rendering halaman.

See apa Googlebot sees

rendering bugs hide di kesenjangan antara mentah HTML (apa server mengirim) dan dirender HTML (apa ada setelah JS berjalan). sebuah sedikit quick command-line memeriksa sebelum Anda reach untuk sebuah penuh crawler.

Fetch mentah HTML (apa muncul back sebelum apa pun JS berjalan)

macOS / Linux:

# Raw HTML as the server sends it — this is the "first fetch"
curl -sL -A "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" \
  https://example.com/page/ -o raw.html

# Is your important text actually in the raw HTML? (empty result = JS-dependent)
grep -o "Your headline text" raw.html

Windows (PowerShell):

$ua = "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"
Invoke-WebRequest -Uri "https://example.com/page/" -UserAgent $ua -OutFile raw.html
Select-String -Path raw.html -Pattern "Your headline text"

jika text adalah missing dari raw.html tetapi terlihat di Anda browser, ini adalah menjadi ditambahkan oleh JavaScript — so ini bergantung pada rendering. (untuk dirender HTML, gunakan URL Inspection’s “View Crawled Page → rendered HTML,” (terjemahan) “View di-crawl halaman → dirender HTML,” atau sebuah headless-Chrome crawler — sebuah plain curl dapat’t jalankan JS.)

Konfirmasi Anda tidak blocking JS/CSS di robots.txt

macOS / Linux:

curl -sL https://example.com/robots.txt | grep -iE "disallow.*\.(js|css)|Disallow:\s*/(_next|static|assets|dist)"

Windows (PowerShell):

(Invoke-WebRequest "https://example.com/robots.txt").Content |
  Select-String -Pattern "Disallow.*\.(js|css)","Disallow:\s*/(_next|static|assets|dist)"

sebuah Disallow itu matches Anda JavaScript atau CSS berarti Google dapat’t render halaman properly — hampir selalu sebuah mistake. (pemeriksaan URL lists blocked halaman resources too; grep hanya catches obvious ones fast.)

alat untuk debugging JavaScript SEO

See perbedaan antara mentah HTML dan apa Google renders dengan Render Kesenjangan:

1. Paste penuh URL dari halaman Anda ingin test — sebuah JavaScript-berat template halaman menampilkan paling.
2. jelas anti-abuse periksa dan press Test halaman; ini fetches mentah HTML pertama dan hanya renders di headless Chrome ketika itu HTML looks like sebuah empty shell.
3. Baca colour-coded verdict, lalu scan Awal HTML vs Dirender DOM table untuk rows flagged changed.
4. Switch untuk Mentah vs dirender diff tab untuk see line-oleh-line apa JavaScript ditambahkan atau dihapus.

• pemeriksaan URL (Google Search Console) — sumber kebenaran. Jalankan sebuah langsung test, lalu view dirender HTML, screenshot, halaman resources (apa dimuat vs. apa adalah blocked), dan JavaScript console messages.
• Rich hasil Test — sebuah fast cara untuk periksa dirender HTML dan data terstruktur untuk sebuah URL tanpa verifying situs.
• Chrome DevTools — bandingkan View Sumber (mentah HTML) dengan Elements panel (dirender DOM); Console surfaces JS errors itu dapat blank out konten.
• JavaScript-rendering crawler — Ahrefs situs Audit dan Screaming Frog SEO Spider (JS-rendering mode) execute JS so Anda dapat diff mentah vs. dirender di scale.
• View-dirender-sumber alat — browser extensions itu tampilkan dirender DOM side-oleh-side dengan mentah HTML untuk quick spot memeriksa.
• server log analysis — konfirmasi Googlebot adalah sebenarnya fetching Anda JS/CSS resources (see log file analysis).

Prompts untuk JavaScript SEO diagnosis

Bandingkan mentah dan dirender HTML

Paste mentah respons dan dirender DOM untuk yang sama URL. hapus customer data dan tokens pertama.

Act as a technical SEO reviewer. Compare RAW_HTML and RENDERED_HTML below. Report only
meaningful differences in title, meta robots, canonical, headings, body copy,
structured data, and crawlable <a href> links. For each difference, label its likely
indexing impact, show the exact conflicting snippets, and give a verification step.
Do not infer content that is not present.

RAW_HTML:
[paste]

RENDERED_HTML:
[paste]

Triage sebuah route sample

Review this CSV of JavaScript routes with columns URL, HTTP_STATUS, RAW_TITLE,
RENDERED_TITLE, RAW_CANONICAL, RENDERED_CANONICAL, RAW_WORDS, RENDERED_WORDS. Group
failures into shared-shell duplicates, restrictive-directive conflicts, soft 404s,
and likely render timeouts. Rank groups by affected URL count. Return the exact rows
that support each conclusion and a test to confirm it; do not invent thresholds.

[paste CSV]

Validate sebuah JavaScript SEO perubahan

Prove route konten ada sebelum JavaScript

Test untuk jalankan: Fetch representative routes dengan curl dan inspect respons body. Yang diharapkan hasil: setiap respons berisi -nya unique judul, utama heading, copy, dan dapat di-crawl tautan. Failure interpretation: deployment masih menyajikan sebuah shared app shell. Monitoring window: Immediate. Rollback trigger: sebuah formerly server-terlihat route becomes dependent pada rendering.

Prove directives agree di seluruh processing stages

Test untuk jalankan: Bandingkan mentah HTML dengan pemeriksaan URL’s dirender HTML untuk robots dan tag canonical. Yang diharapkan hasil: Satu yang dimaksud directive set muncul di keduanya, dengan Tidak lebih-restrictive nilai di mentah shell. Failure interpretation: JavaScript adalah trying untuk overwrite sebuah pengindeksan sinyal too late. Monitoring window: Immediate di local rendering; setelah recrawl di Search Console. Rollback trigger: noindex atau sebuah incorrect canonical muncul di either stage.

Prove tautan tetap dapat di-crawl

Test untuk jalankan: Disable JavaScript dan inspect navigation untuk representative routes. Yang diharapkan hasil: Destinations tetap di nyata anchor href attributes. Failure interpretation: Client handlers, tidak tautan, own penemuan. Monitoring window: Immediate. Rollback trigger: penting routes disappear dari tautan graph ketika scripts fail.

Resources worth Anda time

My related writing

• JavaScript SEO: sebuah Definitive Guide — my penuh guide untuk rendering, DOM parity, paling-restrictive-directive aturan, infinite scroll, dan dua-halaman-sebagai-satu masalah. ini artikel adalah condensed, sumber-ditautkan versi.
• Beginner’s Guide untuk SEO teknis — di mana JavaScript SEO fits 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.”)

«From others

• r/TechSEO — the community for debugging render/index problems.
• web.dev — Rendering on the Web — the canonical explainer of rendering trade-offs from the Chrome team.
• Google Search Central — JavaScript SEO — official primary-source docs on the three-phase process, crawlable links, and testing rendered HTML.
• Onely — JavaScript SEO hub — deep technical posts on rendering, two-waves indexing, and JS SEO auditing from a specialist agency.
• Martin Splitt’s JavaScript SEO playlist — the official Google video series walking through each JS SEO concept, produced by Google’s web ecosystem team.
• Search Engine Journal — JavaScript SEO coverage — industry news and practitioner guides on JS rendering issues as they emerge. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus empat puluh lima, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Podcasts

• Penelusuran Off Record (Google Search Relations) — Martin Splitt, John Mueller, dan Gary Illyes regularly cover JavaScript SEO dan rendering dari di dalam. Listen

Videos

• Google Search Central (YouTube) — Martin Splitt’s JavaScript SEO series adalah best official video walkthrough dari bagaimana Google menangani Anda JS. Channel

Stats worth citing

«- Current official framing: no fixed delay. Google’s own documentation (updated 2026-03-04) says a crawled 200 page “may stay on this queue for a few seconds, but it can take longer than that” — there’s no published fixed delay or timeout, and pages that return a non-200 status or start out with noindex may skip rendering entirely. Jump to quote

• Historical data point (dated) — ~5 second median render delay. In earlier conference remarks, Google staff (Martin Splitt and Tom Greenaway) described pages reaching the renderer at a median of ~5 seconds, with the 90th percentile in minutes — not the “weeks” the old fear implied. I cite this in my JavaScript SEO guide. Treat it as a historical data point from that talk, not a current published metric — Google hasn’t republished it as an ongoing figure, and the queue-timing quote above is the current official framing.
• “Two waves of indexing” is fading, per Martin Splitt (2019 remarks). In an August 2019 conversation with John Mueller, Splitt said two-wave indexing “play[s] less and less of a role” as rendering gets cheaper and crawling, rendering, and indexing converge — with no timeline given for when it might stop entirely. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus lima puluh tujuh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) « Coverage This is Splitt’s characterization from that specific conversation, not a dated, citable Google spec — use it as directional context, not a current guarantee either way. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus lima puluh tujuh, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Google memproses JavaScript apps melalui crawling, rendering, dan pengindeksan. Bukti untuk klaim ini Google processes JavaScript web apps in three main phases: crawling, rendering, and indexing; without rendering, Google might not see JavaScript-provided content. Cakupan: Google Search's processing of JavaScript pages; successful rendering does not guarantee indexing or ranking. Tingkat keyakinan: tinggi · Diverifikasi: 2026-07-14 Google Search Central: Understand the JavaScript SEO basics ini umumnya melakukan crawl tautan ketika mereka adalah anchors dengan href attributes. Bukti untuk klaim ini Google can reliably discover links only when they are HTML anchor elements with an href attribute. Cakupan: Link discovery by Google Search; this does not claim that every discovered URL will be crawled or indexed. Tingkat keyakinan: tinggi · Diverifikasi: 2026-07-14 Google Search Central: Make your links crawlable Google mendeskripsikan rendering sisi server atau pre-rendering sebagai sebuah baik idea untuk pengguna dan crawler. Bukti untuk klaim ini Google describes server-side rendering or pre-rendering as a good idea because it makes a website faster for users and crawlers. Cakupan: Google Search guidance for JavaScript sites; the source does not prescribe one framework or guarantee indexing. Tingkat keyakinan: tinggi · Diverifikasi: 2026-07-14 Google Search Central: Understand the JavaScript SEO basics Google Search juga melakukan tidak interact dengan sebuah halaman untuk trigger konten. Bukti untuk klaim ini Google Search does not interact with a page, so lazy-loaded content should load when it becomes visible in the viewport rather than requiring user interaction. Cakupan: Google Search's documented rendering behavior for lazy-loaded content; other crawlers can behave differently. Tingkat keyakinan: tinggi · Diverifikasi: 2026-07-14 Google Search Central: Fix lazy-loaded content

Log perubahan