JavaScript SEO essentials

Why JavaScript matters for SEO

Many modern websites use JavaScript to build pages in the browser. Frameworks such as React, Vue and Angular, and many website builders, rely on it heavily. That's fine for visitors with fast devices. For search engines, it adds steps.

Google processes JavaScript pages in three phases, as described in its JavaScript SEO basics:

1. Crawling: Googlebot fetches the page's HTML. 2. Rendering: Google runs the JavaScript to see the final page, using a recent version of Chrome. 3. Indexing: Google indexes the rendered content.

Google can render JavaScript, but rendering may happen later than crawling, and things can go wrong. Other search engines and AI crawlers may handle JavaScript less well, or not at all.

The key principle

Important content and links should be available in a way search engines can reliably see. The safest approach is to have them in the HTML the server sends, rather than only after scripts run.

Common problems

Content that only appears after interaction

Text that loads only when someone clicks a tab, scrolls or presses "load more" may not be seen. Google doesn't click buttons or scroll like a person.

Links that aren't real links

Google follows `<a>` elements with an `href` attribute. Navigation built with JavaScript click handlers on `<div>` or `<span>` elements, or `href="#"` with JavaScript doing the work, may not be followed. Google's guidance on crawlable links explains what works.

Blocked resources

If robots.txt blocks the JavaScript or CSS files Google needs to render the page, it may see a broken or empty page.

Client-side errors

If a script fails, content may never appear. Errors that only happen in certain conditions are hard to spot.

Metadata set by JavaScript

Titles, meta descriptions, canonical tags and robots tags changed by JavaScript can conflict with what's in the original HTML. Keep them consistent, and preferably set them on the server.

Hash-based URLs

URLs using fragments, such as example.com/#/services, aren't treated as separate pages. Use proper URLs with the History API.

Soft 404s

Single-page apps sometimes return a normal 200 status for pages that don't exist, showing "not found" only through JavaScript. Return proper 404 status codes where possible.

Rendering options

• Server-side rendering (SSR): the server sends complete HTML, then JavaScript adds interactivity. Good for SEO.
• Static site generation: pages are built as HTML in advance. Fast and reliable for content that doesn't change per visitor.
• Client-side rendering: the browser builds the page from JavaScript. Riskiest for SEO.
• Hybrid approaches: many frameworks let you mix these, using SSR or static generation for marketing pages and client-side rendering for logged-in app areas.

Google describes dynamic rendering, serving different versions to bots and users, as a workaround rather than a long-term solution.

How to test your pages

URL Inspection in Search Console

Inspect a URL and use "Test live URL", then "View tested page". You'll see the rendered HTML, a screenshot and any resources that couldn't load. Check that your main content and links are there.

Rich Results Test

The Rich Results Test also shows rendered HTML and is available without Search Console access.

View source vs inspect

In your browser, "View page source" shows the original HTML. "Inspect" shows the rendered page. If important content is in the second but not the first, it depends on JavaScript.

Disable JavaScript

Turn off JavaScript in your browser and load the page. What's left is roughly what a crawler that doesn't render would see.

Performance

Heavy JavaScript also slows pages down and can hurt Interaction to Next Paint. Our Core Web Vitals guide explains why. Less JavaScript usually means faster pages and fewer SEO risks.

Working with your developer

You don't need to understand the code to ask the right questions. Ask your developer:

• Is the main content in the HTML the server sends, or added later by JavaScript?
• Do navigation links use proper `<a href>` elements?
• Does each page have its own title, description and canonical tag set on the server?
• Do missing pages return a real 404 status?

Clear answers to these four questions cover most JavaScript SEO risks.

A worked example

A small software company's marketing site was built as a single-page app. Search Console showed only the home page indexed, despite thirty other pages.

URL Inspection revealed that the navigation used click handlers on buttons rather than real links, so Google couldn't discover other pages. Each page also had the same title, set in the HTML template, with the real title added later by JavaScript.

The developer switched the marketing pages to static generation using the same framework, used proper `<a href>` links in the navigation and set unique titles and descriptions on the server. Within weeks, Search Console showed the other pages being indexed.

Questions