INTRO
Business sites get squeezed from two sides: marketing wants rankings and rich content; users want fast, calm pages. Next.js gives you the tools to satisfy both if you decide structure early - routing, metadata, images, and what actually ships to the client.
Start with clear page intent
Every route should answer one primary question. The homepage explains who you are and where to go next; a service page proves fit for one offer; contact lowers friction to a conversation. When intent is muddled, you get duplicate headings, repeated keywords, and layouts that fight the reader.
Once intent is fixed, your `<title>`, `description`, H1, and first screen of content naturally reinforce each other. Search engines pick up a coherent topic; humans scan faster.
Metadata that matches the page
In the App Router I keep metadata close to the route. Static pages use `export const metadata`; dynamic segments use `generateMetadata` so each URL gets unique titles and descriptions derived from real data - not a single global template.
Avoid repeating the same description across many URLs. It signals low-quality templates and wastes the snippet users see in results.
code-snippet.typescript
import type { Metadata } from 'next'
export async function generateMetadata(
{ params }: { params: Promise<{ slug: string }> }
): Promise<Metadata> {
const { slug } = await params
const page = await getPageBySlug(slug)
if (!page) return { title: 'Not found' }
return {
title: page.title,
description: page.summary,
alternates: { canonical: `/services/${slug}` },
}
}Optimize what users actually feel
LCP is not abstract: it is usually a hero image, a large font block, or a client-only paint. I default to `next/image` with explicit `sizes`, priority only above the fold, and formats the browser can decode cheaply.
CLS comes from ads, lazy fonts, or reserving space for images and embeds. A fixed aspect ratio or min-height for media slots removes most “jumps” users blame on “slow sites” even when TTFB is fine.
SEO structure without robotic copy
Use a single H1, logical H2/H3 order, and internal links that help navigation - not keyword stuffing. If a sentence only exists for a keyword, delete it.
Structured data (JSON-LD) is a supplement, not a replacement for readable text. I add `WebSite`, `Person`, or `Article` where it reflects what is already visible on the page.
Ship less JavaScript to the browser
Marketing pages rarely need heavy client trees. Server Components and static segments keep interactive islands small: a form, a carousel, analytics. That directly improves hydration cost and Time to Interactive on mid-tier phones.
When you do need client state, colocate it. A giant client layout wrapping the whole marketing site is a common reason “Next feels slow.”
KEY TAKEAWAYS
“Define one primary job per route before writing metadata or headings.”
- 02
Use `generateMetadata` for dynamic URLs so snippets stay unique and honest.
- 03
Treat LCP/CLS as layout and media problems, not only “compress harder.”
- 04
Keep H1/H2 structure human-first; add JSON-LD that mirrors visible content.
- 05
Prefer server rendering for marketing shells; isolate client components.
CONCLUSION
Closing thought
Performance and SEO for Next.js business sites are mostly product decisions expressed in code: what loads first, what is promised in the snippet, and what the user sees in the first second. Nail those, and scores tend to follow. For a launch checklist and LCP fixes, see the newer commercial guides — then discuss your site on Contact.
CONTINUE
Related pages
UP NEXT
JWT Access Tokens, Refresh Rotation, and Session Hybrids
A grounded comparison: stateless JWT access tokens, refresh rotation, opaque server sessions, and when to combine patterns for SPAs and mobile.
Read next article