Many Sri Lankan startups and software companies build their websites with React, Vue or Angular. These frameworks make great apps, but if they're set up as single-page applications, Google may struggle to see your content. Here's how JavaScript SEO works and how to get it right.
How Google handles JavaScript
Google processes JavaScript pages in stages:
- Crawl: Google fetches the HTML.
- Render: Google runs the JavaScript in a headless Chrome to build the page.
- Index: Google reads the rendered content.
Rendering usually happens quickly now, but it uses more resources, can fail if scripts error or time out, and other search engines and AI crawlers may not render JavaScript at all.
The core risk: empty HTML
With pure client-side rendering, the initial HTML often looks like this:
<div id="root"></div>
<script src="/bundle.js"></script>
All the content appears only after JavaScript runs. If rendering fails, Google sees an empty page. Many AI crawlers that don't run JavaScript see nothing at all.
Rendering options, from best to worst for SEO
| Approach | What it means | SEO |
|---|---|---|
| Static generation (SSG) | HTML built at deploy time | Excellent |
| Server-side rendering (SSR) | HTML built on each request | Excellent |
| Hybrid / incremental | Mix of the above | Excellent |
| Client-side rendering (CSR) | Browser builds the page | Risky |
Frameworks like Next.js, Nuxt, Astro and SvelteKit make SSR or SSG straightforward. For marketing pages, blogs and product pages, use them.
JavaScript SEO checklist
- Important content and links are in the initial HTML, or reliably server-rendered.
- Every page has its own URL that loads directly, not just via in-app navigation.
- Links are real
<a href>elements, not click handlers on divs. Google follows hrefs. - Titles, meta descriptions and canonicals are set per page on the server.
- Structured data is in the server HTML, especially for products and prices.
- No content hidden behind clicks that Google won't perform, such as "load more" with no paginated URLs.
- Status codes are correct: a missing page returns 404, not a 200 page that says "not found".
- JavaScript and CSS files aren't blocked in robots.txt.
How to test
- URL Inspection in Search Console: "View crawled page" shows the rendered HTML and screenshot Google sees.
- View the page source (not Inspect Element). If your content isn't in the raw source, you're relying on rendering.
- Disable JavaScript in your browser and load the page.
Common fixes we make
- Moving marketing pages of a React app to Next.js or a static site generator
- Adding server-rendered meta tags per route
- Replacing
onClicknavigation with real links - Fixing soft 404s in single-page apps
- Pre-rendering critical routes
A note on speed
Large JavaScript bundles also hurt Core Web Vitals, especially INP on mid-range phones. Server rendering plus less JavaScript helps both rankings and users.
JavaScript SEO is where engineering skills matter most. Our technical SEO service works directly in React, Next.js and Vue codebases. See the technical SEO checklist for everything else to check.