RankpediaA plain-English encyclopedia of search

JavaScript SEO

Ensures that search engines can crawl, render, and index content built or modified with JavaScript, reducing the risk of missing key content.

If you have ever assumed Google sees exactly what you see in a browser, you already know the gap between rendered and indexed content that rendering SEO aims to close.

Key points

  • Put critical content, titles, and metadata in the initial HTML response, not just in client JavaScript.
  • Test your pages in Google Search Console's URL Inspection tool to see the rendered version Google actually indexes.
  • Use real anchor tags with href attributes for links; JavaScript-only event handlers are not crawlable.
  • Do not block JavaScript files in robots.txt; Google needs them to render your pages.
  • Consider server-side rendering or pre-rendering for JavaScript-heavy frameworks like Angular and React.
  • Follow Google's guidance on lazy loading to ensure important content remains discoverable.

A travel site loses rankings because JavaScript renders too slowly

A travel booking site uses Angular to load hotel descriptions via AJAX, a classic AJAX SEO challenge. The initial HTML contains only a placeholder div. Google's renderer waits up to 5 seconds for the JavaScript bundle to finish. On a slow connection, the bundle times out, and Google indexes the placeholder. The hotel page becomes thin content, dropping from the first page of search results for its target keywords. The fix: move the description into the server-rendered HTML.

Three situations where JavaScript SEO matters

  • Single-page applications Angular, React, and Vue sites load content dynamically. If search engines cannot render your JavaScript, they index a blank page. Ensure your server delivers meaningful HTML from the start, a core concern of rendering SEO.
  • Lazy-loaded content Images or sections that load only on scroll may not be visible to search engines. Use native lazy loading and keep critical content above the fold or in the initial HTML.
  • Structured data injected by JavaScript Structured data must appear in the rendered DOM. If JavaScript injects it, verify with Google's Rich Results Test that the final output includes it correctly.

Four common mistakes that break indexing

  • Blocking JavaScript in robots.txt Prevents Google from downloading the JavaScript needed to render your page. The result is an incomplete or empty page in the index, harming crawlability.
  • Using non-HTML links Links that rely on JavaScript event handlers instead of anchor tags with href attributes cannot be crawled. Search engines follow real links to maintain good crawlability.
  • Assuming browser equals Googlebot Google's rendering may differ from your browser. Use the URL Inspection tool in Search Console to see what Google actually sees.
  • Missing metadata in initial HTML Titles, descriptions, and canonical tags must be in the initial server response. If they appear only after JavaScript runs, Google may miss them.

Three ways to test your JavaScript SEO

  • URL Inspection tool Enter your page URL in Search Console's URL Inspection tool to see the rendered HTML Google sees. Compare it with the live page to verify rendering SEO.
  • Mobile-Friendly Test Run the page through Google's Mobile-Friendly Test, which also renders the page. Check that all content and links are present.
  • Live test in Search Console Use the 'Live test' option in the URL Inspection tool to trigger a fresh crawl and render. Compare the indexed content with your browser view.

Common questions

Does Google use JavaScript?

Yes, Google can process JavaScript, but it does not execute it exactly like a browser. Test your pages to confirm.

Is JavaScript bad for SEO?

No, but it adds complexity. You must ensure critical content, links, and metadata are crawlable without relying on client-side rendering.

Sources

  1. Google Search Central: Understand JavaScript SEO Basics Covers the fundamentals of making JavaScript sites crawlable and indexable.
  2. Google Search Central: JavaScript SEO Directory of Google's official guidance on JavaScript-specific SEO issues.
  3. Google Search Central: Rendered HTML and testing tools How to use Search Console and other tools to verify what Google sees.
↑