JavaScript SEO basics

Many sites build pages with JavaScript. Search engines can render JavaScript, but it takes more work and things can go wrong.

Common problems

• Content and links added only after scripts run, so a crawler that reads the HTML sees an empty page.
• Links implemented as click handlers instead of real <a href> links.
• Important text loaded only after a user action.
• Huge scripts that slow rendering.

Good practice

• Server-side rendering or pre-rendering for important pages.
• Real links with href attributes.
• Titles, meta tags and structured data in the initial HTML.
• Defer non-essential scripts. The JavaScript defer checker lists render-blocking scripts.

Rendering approaches

• Server-side rendering (SSR): the server sends complete HTML; scripts add interactivity afterwards. Best for SEO.
• Static generation: pages are built ahead of time as HTML files. Fast and crawlable.
• Client-side rendering: the browser builds the page from JavaScript. Works for apps behind sign-in, riskier for public content.

Common traps

• Using # fragments for different pages: search engines generally ignore what comes after #.
• Lazy-loading text that only appears on scroll.
• Blocking JavaScript files in robots.txt.
• Errors in scripts that stop content from rendering at all.

Test regularly

After each release, check a few key pages: view the source HTML, check titles and canonical tags, and run the website SEO audit to confirm content and links are visible.

Test it

Use the website text extractor to see the text in your raw HTML. If your main content is missing, search engines may miss it too.