Outcome
Consistent, correct titles, descriptions, canonicals, and social cards across the whole site with no per-page metadata copy-paste.
Medium Websites system
Centralized SEO Metadata Layer
A shared metadata factory that produces Next.js Metadata objects (title, description, canonical, Open Graph, Twitter card) for every route from typed helpers, so canonical URLs and social tags are correct and consistent site-wide instead of copy-pasted per page.
HMX Zone
generateMetadata
Verified HMX-owned system
System facts
Centralized SEO Metadata Layer uses a web app route, data, and conversion layer for Full-Stack Websites. A shared metadata factory that produces Next.js Metadata objects (title, description, canonical, Open Graph, Twitter card) for every route from typ... The architecture connects a basemetadata helper that, next, generatemetadata, and consistent with an explicit control path.
Main risk
Pages ship with missing or duplicate titles/canonicals, hurting indexing and link previews.
Prevention
A single factory is the only metadata path, and a coverage test fails the build on any empty required field.
Fallback
Routes missing a specific builder inherit safe site-wide defaults from the root layout metadata.
System architecture
Centralized SEO Metadata Layer Architecture
6 nodes
a baseMetadata helper that
Expose per-section builders
Next
generateMetadata
Fallback Path
Consistent
- 01a baseMetadata helper that
A shared metadata factory that produces Next.js Metadata objects (title, description, canonical, Open Graph, Twitter card) for every route from typ...
- 02Expose per-section builders
Expose per-section builders (hub, child, blog, static) that call the helper with route-specific data
- 03Next
Next.js Metadata API supports the route, form, or data boundary for Centralized SEO Metadata Layer so public UX and backend state stay connected.
- 04generateMetadata
Wire generateMetadata in each route segment to the matching builder, deriving canonical from the site URL
- 05Fallback Path
Routes missing a specific builder inherit safe site-wide defaults from the root layout metadata.
- 06Consistent
Consistent, correct titles, descriptions, canonicals, and social cards across the whole site with no per-page metadata copy-paste.
3-5 days
How it is built
A shared metadata factory that produces Next.js Metadata objects (title, description, canonical, Open Graph, Twitter card) for every route from typed helpers, so canonical URLs and social tags are correct and consistent site-wide instead of copy-pasted per page.
- 01Build a baseMetadata() helper that takes title/description/path and returns canonical + OG + Twitter fields
- 02Expose per-section builders (hub, child, blog, static) that call the helper with route-specific data
- 03Wire generateMetadata in each route segment to the matching builder, deriving canonical from the site URL
- 04Add a test that asserts every public route returns a non-empty title, description, and absolute canonical
Tools
Workflow surface
- Next.js Metadata API
- generateMetadata
- TypeScript
- Vitest
- Experience layer: Build a baseMetadata() helper that takes title/description/path and returns canonical + OG + Twitter fields
- Server layer: Expose per-section builders (hub, child, blog, static) that call the helper with route-specific data
- Database layer: Next.js Metadata API supports the route, form, or data boundary for Centralized SEO Metadata Layer so public UX and backend state stay connected.
- Automation layer: generateMetadata handles routine steps while a single factory is the only metadata path, and a coverage test fails the build on any empty required field.
- Measurement layer: Consistent, correct titles, descriptions, canonicals, and social cards across the whole site with no per-page metadata copy-paste.
Data flow
- 01Build a baseMetadata() helper that takes title/description/path and returns canonical + OG + Twitter fields
- 02Expose per-section builders (hub, child, blog, static) that call the helper with route-specific data
- 03Wire generateMetadata in each route segment to the matching builder, deriving canonical from the site URL
- 04Add a test that asserts every public route returns a non-empty title, description, and absolute canonical
Controls and fallbacks
- Pages ship with missing or duplicate titles/canonicals, hurting indexing and link previews.
- A single factory is the only metadata path, and a coverage test fails the build on any empty required field.
- Routes missing a specific builder inherit safe site-wide defaults from the root layout metadata.
System path inside the website build
Full-stack websites for service businesses and operators: route architecture, service pages, lead capture, metadata, proof boundaries, blog/database paths, analytics, and deployment checks.
Route map
Service architecture
Clear service routes
01active
Progress72%
Lead capture
Form and context flow
Lead capture that saves context
02active
Progress86%
Public metadata
SEO and schema layer
SEO and schema on public pages
03active
Progress64%
Launch QA
Analytics and deployment checks
Analytics events tied to CTAs
04active
Progress91%