All Topics Learning Paths
Getting Started SEO On-Page Advanced SEO Content Strategy Technical Deep Dives Industry Guides Visual Guides Using the Platform Issue Reference Troubleshooting & FAQ Glossary Off-Page SEO CMS Guides AI & SEO
In this section: Schema Markup & Structured Data Core Web Vitals Deep Dive Internal Linking Strategy Canonical URLs International SEO & Hreflang JavaScript SEO
Advanced SEO
JavaScript SEO

JavaScript SEO

JavaScript SEO focuses on ensuring that search engines can properly crawl, render, and index content on JavaScript-heavy websites. As more sites use JavaScript frameworks, understanding how search engines process JS content is essential.

How Google Processes JavaScript

1
Crawl

Googlebot fetches the HTML document

2
Render

WRS (Web Rendering Service) executes JavaScript

3
Index

Rendered content is processed and indexed

Rendering happens in a "second wave" which can delay indexing of JavaScript-dependent content.

Rendering Methods

Method Description SEO Impact
Client-Side (CSR) JavaScript runs in the browser to render content Problematic Relies on Google rendering
Server-Side (SSR) Content rendered on server, sent as HTML Best Fully crawlable HTML
Static Site Generation (SSG) Pages pre-built at build time Excellent Fast, fully indexed
Dynamic Rendering Serves pre-rendered HTML to bots, JS to users Workaround Added complexity
Hybrid/Incremental Combines SSR/SSG with client-side hydration Great Best of both worlds

Common JavaScript SEO Issues

Content Issues
  • Content not present in initial HTML
  • Lazy-loaded content never triggers
  • Content behind user interactions
  • Dynamically generated meta tags
Technical Issues
  • Blocked JavaScript resources
  • JavaScript errors preventing rendering
  • Timeouts from slow JavaScript
  • Hash-based routing (#)

JavaScript SEO Best Practices

  • Use server-side rendering - Ensure critical content is in the initial HTML
  • Don't block JavaScript files - Allow Googlebot to access JS and CSS resources
  • Use proper routing - Implement History API, avoid hash-based URLs
  • Include static links - Use <a href> tags for navigation, not just JS events
  • Handle errors gracefully - Ensure JS errors don't break the entire page
  • Optimize performance - Fast JavaScript execution improves rendering chances

Link Implementation

Crawlable Links
<a href="/page">Link</a>

<a href="/page" 
   @click="handleClick">Link</a>
Non-Crawlable Links
<span @click="navigate()">Link</span>

<a href="#" @click="go()">Link</a>

<button @click="route()">Link</button>

Framework-Specific Considerations

Framework SEO Solution
React Use Next.js for SSR/SSG, React Helmet for meta tags
Vue Use Nuxt.js for SSR/SSG, Vue Meta for meta tags
Angular Use Angular Universal for SSR
Svelte Use SvelteKit for SSR/SSG

Testing JavaScript Rendering

  1. Google Search Console URL Inspection - See how Google renders your page
  2. View source vs. Inspect - Compare initial HTML with rendered DOM
  3. Disable JavaScript - Check what content is visible without JS
  4. Rich Results Test - Shows rendered HTML and structured data

Robots.txt Considerations

# Allow access to all resources
User-agent: Googlebot
Allow: /*.js
Allow: /*.css

# Don't block any rendering resources
User-agent: *
Disallow:

External Resources

Previous
International SEO & Hreflang