RankpediaA plain-English encyclopedia of search

Rendering SEO

Ensures search engines can see and index the fully rendered page content after JavaScript executes, not just the initial HTML source.

If you have ever assumed a page is SEO-safe because it looks correct in a browser, you already know rendered HTML can tell a different story.

Key points

  • Put critical text, links, and metadata in the initial HTML where possible.
  • Check rendered output for canonical tags, structured data, and meta robots.
  • Use Google Search Console URL Inspection to compare raw source with rendered DOM.
  • Avoid soft 404s by returning proper HTTP status codes in client-side routes.
  • Treat dynamic rendering as a temporary workaround, not a long-term solution.

A React site where 40% of pages lost organic traffic

An e-commerce site rebuilt in React used client-side rendering for product descriptions and internal links. The raw HTML contained only a shell div. Googlebot initially saw no text and no category links. After switching to server-side rendering for critical content, indexed pages rose from 1,200 to 2,000 and organic traffic recovered within six weeks. The team later applied similar fixes to their Angular SEO setup and AJAX SEO for async content.

Three common rendering mistakes

  • Hidden critical content Important text or links that only appear after JavaScript runs may be missed entirely by crawlers, especially if scripts are slow or blocked.
  • Late-injected metadata Canonical tags, structured data, and meta robots injected too late can be inconsistent or absent in the rendered output, confusing search engines.
  • Client-side routing errors Using JavaScript to handle URLs without proper HTTP status codes often creates soft 404s, wasting crawl budget and harming indexation.

Three ways to test rendering

  • Compare raw source and DOM Open the page's raw HTML and the rendered DOM in Chrome DevTools. If they differ significantly, your critical content may depend on client-side execution.
  • Use Search Console's URL Inspection This tool shows exactly what Googlebot saw after rendering. Check that titles, meta descriptions, and structured data match your expectations.
  • Check AJAX-loaded content separately For React SEO or Angular SEO sites using AJAX, ensure async content has proper titles and status codes. Missing title tags in AJAX responses can cause indexation issues.

Common questions

What is dynamic rendering?

It serves pre-rendered HTML to bots and client-rendered HTML to users. Modern guidance treats it as a workaround, not a preferred default.

Is JavaScript bad for SEO?

No, but it adds risk. If critical content depends on client-side execution, it can be delayed or missed. Server-side rendering or static generation reduces that risk.

Dynamic rendering vs server-side rendering?

Server-side rendering generates HTML on the server for every request. Dynamic rendering only does so for bots, which can cause inconsistencies.

Sources

  1. Google Search Central: Understand JavaScript SEO Basics Official guidance on making JavaScript content crawlable and indexable.
  2. Sitebulb: JavaScript SEO Fundamentals: Guide to Web Rendering Techniques Covers SSR, CSR, SSG, and dynamic rendering with testing methods.
  3. SEO Beni: JavaScript SEO: A 2026 Guide to Rendering & Crawling Up-to-date advice on rendering strategies and common pitfalls.
↑