โ๏ธ
FREE
+55 XP
JavaScript SEO & Rendering
โ๏ธ
React developer
"Our site is a modern SPA built on React. Everything renders client-side. Fast, beautiful, modern!"
๐ค
Googlebot
"I arrived. Got an empty HTML with <div id='root'></div>. Content loads via JS. I'm adding your page to the rendering queue and will be back in a few days..."
โ ๏ธ The JavaScript SEO problem: Googlebot can render JavaScript, but does so with a delay โ through a rendering queue. Content inaccessible before JS executes gets indexed later or incompletely.
Types of Page Rendering
| Type | How it works | SEO |
|---|---|---|
| SSR (Server-Side) | HTML ready on the server | โ Best option |
| SSG (Static Gen) | HTML generated at build time | โ Excellent |
| CSR (Client-Side) | HTML built in the browser | โ ๏ธ Delay risks |
| ISR (Incremental) | SSG + on-demand update | โ Good compromise |
What to Check on a JS Site
JavaScript SEO diagnostics:
โ URL Inspection in GSC โ check rendered HTML
โ All nav links use <a href>, not JS handlers
โ Content visible in "View Source" (not just DevTools)
โ No infinite pagination without URL state
โ Meta tags present in the SSR response
โ Using Next.js/Nuxt/Gatsby instead of pure SPA
โ URL Inspection in GSC โ check rendered HTML
โ All nav links use <a href>, not JS handlers
โ Content visible in "View Source" (not just DevTools)
โ No infinite pagination without URL state
โ Meta tags present in the SSR response
โ Using Next.js/Nuxt/Gatsby instead of pure SPA
๐งโ๐ป
Alex diagnoses an SPA
"Opened URL Inspection in GSC. Rendered HTML was empty โ content not indexed. Migrated from CSR to SSR via Next.js. Within a month, 800 pages appeared in the index."
๐ฏ Recommendation: for new projects, choose SSR or SSG (Next.js, Nuxt, Gatsby, Astro). For existing SPAs โ add pre-rendering or a hybrid rendering mode.
๐ฎ Test yourself: why can JavaScript-heavy sites create SEO problems?
Lesson Task
Test your knowledge and earn +20 XP