Server-rendered HTML
Inspect the signal in the rendered page.
Use case · Free in Chrome
Next.js and React SEO Audit: Source, Render and Hydration
Search Toolbox helps you verify that server output, hydration and client navigation preserve the same SEO signals, directly on the live page. The goal is consistent crawlable output across first load, hydration and route changes, without hiding the evidence behind one overall score.
frontend developers, JavaScript SEOs and platform teams
What you can verify
Hydration mutations
Compare source code with the browser output.
Route-change metadata
Find contradictions that block indexation.
Canonical, schema and internal links
Export evidence your team can act on.
The observable problem
The first load can be correct while client navigation leaves stale titles, canonicals or structured data.
The useful outcome
consistent crawlable output across first load, hydration and route changes
CMS problems to diagnose
Three Next.js and React SEO failures hidden by a working interface
A page can look perfect after hydration while crawlers first receive incomplete HTML or client navigation leaves metadata from the previous route. Search Toolbox compares those states in the same browser session.
1
Metadata becomes stale after client navigation
What you observe
A hard reload shows the right title, but moving between routes leaves an old title, canonical or robots directive in the head.
Inside Search Toolbox
Open Overview after a hard reload, then navigate internally and open it again without refreshing.
The useful decision
Update metadata at route level and test both entry paths; the final head must describe the current route every time.
2
JSON-LD is duplicated during hydration
What you observe
The server outputs one entity and a client component appends another with a different @id or stale props.
Inside Search Toolbox
Use Schema, then Source versus Render to identify which layer creates each entity.
The useful decision
Generate one stable graph from the server or framework metadata layer and reuse stable @id values.
3
Essential content exists only after JavaScript
What you observe
Headings, internal links or copy can disappear from the initial HTML, or hydration errors can prevent them from reaching the final DOM.
Inside Search Toolbox
Start with Headings and Links. Use Render last to compare the initial source with the DOM and locate the missing block.
The useful decision
Server-render content required for discovery and meaning, then treat client rendering as enhancement.
From finding to strategy
Test every route in two states
JavaScript SEO bugs often depend on how a visitor reached the URL. Your sample must cover both a fresh document and client-side navigation.
- 01
Hard-load a dynamic route and record Overview, Schema, Headings and Links.
- 02
Reach the same route through an internal link and repeat the checks without refreshing.
- 03
Use Render only to explain a measured difference, then create a ticket naming the component and route transition.
Guides to open during this audit
Open the real page, run the named checks and keep before-and-after evidence. That is more useful than a score turning green without saying why.
Install for freeEvidence on the real page
Next.js React SEO audit
A verifiable workflow, not a decorative score
Open the real page
Check the Next.js React SEO audit in the real session, staging environment or localhost — preferably the troublesome page, not the perfectly groomed demo.
Inspect the evidence
Check server-rendered html, hydration mutations, route-change metadata, canonical, schema and internal links and connect signals that contradict each other.
Fix and retest
Aim for consistent crawlable output across first load, hydration and route changes. Change one rule at a time, then repeat the exact same check so you know what actually moved.
What this page does not pretend to do
For the Next.js React SEO audit, Search Toolbox inspects the active URL deeply. It is not a full-site crawler, backlink platform or rank tracker. Test several URLs when the issue comes from a template.
Frequently asked questions
What does the Next.js React SEO audit check?
It covers server-rendered html, hydration mutations, route-change metadata, canonical, schema and internal links to deliver consistent crawlable output across first load, hydration and route changes.
Is the Next.js React SEO audit free?
Manual checks for the Next.js React SEO audit are included in the 60+ free tools. Only the optional contextual SEO Expert uses credits.
Does it work on staging and localhost?
Yes. The Next.js React SEO audit check runs on the page you are viewing, including logged-in sessions and non-public environments.
Is it a full SEO crawler?
For the Next.js React SEO audit, Search Toolbox inspects the active URL deeply. It is not a full-site crawler, backlink platform or rank tracker. Test several URLs when the issue comes from a template.
Verify it on your own page.
Manual checks for the Next.js React SEO audit are included in the 60+ free tools. Only the optional contextual SEO Expert uses credits.