Next.js SEO Technical Guide: Structured Data, Metadata, and Crawlability for Business Sites

The biggest SEO wins on business websites come from how your pages are built, not keyword density. This Next.js SEO technical guide covers structured data, metadata, and crawlability for business sites — giving you a concrete implementation checklist you can act on today. Whether you are launching a new Quebec business site or auditing an existing one, these techniques separate indexable, rankable pages from ones that simply disappear into the dark.

Why Next.js Gives You a Technical SEO Advantage

Next.js ships with server-side rendering (SSR) and static site generation (SSG) out of the box. This matters because Googlebot indexes fully-rendered HTML far more reliably than client-side JavaScript. In a 2023 analysis by Onely, pages requiring JavaScript rendering were crawled up to 10 times less frequently than pre-rendered equivalents. With Next.js, your content lives in the initial HTML response — no waiting for JS execution.

The App Router (Next.js 13+) improves this further via React Server Components, which generate zero client-side JavaScript for static content. For a business site in Montreal or Quebec City, that means a faster Time to First Byte (TTFB), better Core Web Vitals scores, and pages Googlebot can read on the very first crawl.

Metadata: The Foundation of Every Indexed Page

In Next.js 13+, metadata lives in a metadata export inside page.tsx or layout.tsx. The App Router metadata API supersedes the older next/head approach and scales cleanly across large sites with hundreds of routes.

A minimal but complete metadata setup:

export const metadata = {
  title: 'Custom Web Design Montreal | MedCode',
  description: 'Premium Next.js websites for Quebec businesses.',
  alternates: {
    canonical: 'https://medcode.ca/services/web-design-montreal',
  },
  openGraph: {
    title: 'Custom Web Design Montreal | MedCode',
    images: [{ url: '/og/web-design.jpg', width: 1200, height: 630 }],
    locale: 'en_CA',
    type: 'website',
  },
};

Three rules to never break:

• Every page needs a unique title and description. Duplicate metadata across service pages tanks click-through rates and confuses Google on which URL to rank.
• The canonical URL must be absolute and self-referencing unless the page is an intentional duplicate.
• Open Graph images should be 1200×630 px, under 1 MB. LinkedIn, Slack, and iMessage previews all depend on this.

Structured Data: Schema.org for Business Sites — The Next.js SEO Technical Guide in Action

Structured data tells search engines exactly what your content is — a local business, a service, a FAQ, a product. It does not directly boost rankings, but it unlocks rich results (star ratings, business hours, FAQ dropdowns) that can double organic click-through rates for competitive queries.

In Next.js, inject JSON-LD via a component placed in your root layout:

const schema = {
  '@context': 'https://schema.org',
  '@type': 'LocalBusiness',
  name: 'MedCode',
  url: 'https://medcode.ca',
  address: {
    '@type': 'PostalAddress',
    addressLocality: 'Montreal',
    addressRegion: 'QC',
    addressCountry: 'CA',
  },
};

// Inject in layout.tsx:
// <script type='application/ld+json'
//   dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
// />

For business sites, implement these Schema types in priority order:

1. LocalBusiness or Organization — root layout, present on every page
2. WebSite with a SearchAction — enables the sitelinks searchbox in Google
3. FAQPage — on any page with question-and-answer sections
4. BreadcrumbList — on interior pages to reinforce URL hierarchy
5. Service — on individual service pages; include areaServed and provider

Validate every implementation in Google's Rich Results Test before deploying. A syntax error in your JSON-LD silently kills the rich result — there is no build-time warning in your Next.js pipeline.

Crawlability: robots.txt, Sitemaps, and URL Structure

A perfectly written page is useless if Googlebot cannot find or access it. Next.js handles both robots.txt and XML sitemaps natively via app/robots.ts and app/sitemap.ts. Both files are generated at build time — no runtime overhead, no external plugin required.

Key rule for your sitemap: only include indexable pages. Exclude 404s, noindex pages, and redirects. For dynamic routes — blog posts, service pages, city landing pages — fetch slugs from your CMS or database at build time and generate entries programmatically. A sitemap containing broken or redirected URLs actively hurts your crawl budget.

URL structure rules that consistently matter for Quebec business sites:

• Lowercase with hyphens, never underscores — /services/web-design-montreal not /Services/Web_Design
• Descriptive and concise — /services/web-design-montreal beats /services/item?id=42
• Fewer than four directory levels for most pages — Google's own published recommendation

Internal linking is consistently neglected on business sites. Every service page with no incoming links is an island with zero transferred PageRank. Proactively link from blog posts to service pages and vice versa. In Next.js this is a <Link href='/services/...'> call — simple to implement, significant in impact.

Pre-Launch Technical SEO Checklist

Before any Next.js business site goes live, verify these items without exception:

• No X-Robots-Tag: noindex header present on production pages
• next.config.js does not block Googlebot via custom headers() rules
• All canonical tags point to the correct, final production URL — absolute, not relative
• XML sitemap submitted and verified in Google Search Console
• Core Web Vitals in the «Good» range — LCP under 2.5 s, INP under 200 ms, CLS under 0.1
• Every indexable page is reachable via at least one internal link
• All structured data passes Google's Rich Results Test with zero errors

For a complete 50-point walkthrough that covers redirects, hreflang, og:image resolution, and font loading, see the SEO checklist for new websites.

The Business Case for Getting This Right

Most Quebec businesses competing for local search traffic run on WordPress or template builders that produce bloated, render-blocking HTML. A properly configured Next.js site — server-rendered pages, correct metadata, Schema.org markup, and a clean programmatic sitemap — starts with a structural SEO advantage those platforms cannot replicate without significant custom engineering.

MedCode builds exactly this kind of foundation for Quebec businesses: sites where every technical SEO requirement is baked into the architecture from day one, not retrofitted months after launch when rankings stall.

For more on why this technology choice matters beyond SEO, see why Montreal startups are choosing Next.js in 2026 — including the performance and developer-experience factors that affect long-term site quality and maintenance cost.