How to Optimize Next.js for SEO: Check the HTML First

Give each public route its own metadata

In an App Router project, export metadata from a server page or layout. Keep a shared brand and origin, but use a route-specific title, description, and canonical for distinct content. Do not put every canonical on the home page. The exact file location depends on the repository; the following is an example rather than an audit’s claim about another project.

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Technical SEO Audit | SiteFix.app',
  description: 'Inspect public-page metadata, crawl rules, and repair evidence.',
  alternates: { canonical: 'https://sitefix.app/seo-audit' },
};

export default function Page() {
  return <main><h1>Technical SEO audit</h1><p>Explain the real tool here.</p></main>;
}

Keep useful content in the initial output

A URL input is useful to visitors, but it is not a complete product explanation. Render the tool’s actual purpose, method, limits, and next steps in the initial HTML. Keep interactive scan results private and separate from public content. In this project, public guides and product pages are generated at build time, while the scan interface remains interactive. Static export support has limits; do not assume cookies, account state, or request-specific server features can be represented by a shared exported file.

Add only structured data you can support

Describe the real product and brand, using the same names and capabilities visible on the page. Do not invent a reviewer, price, or company registration. JSON serialization also needs safe HTML embedding: a value containing a closing script tag must not end the script element. This project replaces less-than characters before embedding JSON-LD.

const data = {
  '@context': 'https://schema.org',
  '@type': 'SoftwareApplication',
  name: 'SiteFix.app',
  applicationCategory: 'DeveloperApplication',
  operatingSystem: 'Web browser',
};
const safeJson = JSON.stringify(data).replace(/</g, '\\u003c');
// Render safeJson in a script with type=application/ld+json.

Treat sitemaps, redirects, and privacy separately

List only published, public, canonical pages in a sitemap. Do not derive it from scan records or temporary download objects. A robots file is a crawler instruction, not a permission system. Keep reports protected even if a crawler ignores that file.

Permanent redirects should normalize host, HTTPS, and supported page aliases without sending private API requests through an unrelated host. In this static-export project, the Cloudflare Worker handles routing and redirects. A Next.js configuration entry alone is not proof that the deployed Worker applies it. Confirm DNS, certificates, and the actual returned status before reporting success.

Measure and verify after a production build

Inspect a representative page from the build output and then from the deployed URL. Check for one relevant title and description, a suitable H1, the intended canonical, valid JSON-LD, and internal links that work. Confirm the unknown route returns a real 404. At phone width, check the form, long URLs, tables, and report actions for overflow.

Use a browser run to investigate loading and layout. Keep a one-run result separate from real-user experience; it cannot provide a population-wide INP result. If a test fails, fix the relevant source and rebuild before publishing. Do not turn a metadata change into a performance or indexing guarantee.