Skip to main content
Manuilau | Bureau

Pattern · TypeScript

Canonical URL and page metadata in Next.js App Router

A generateMetadata pattern with canonical and Open Graph — baseline SEO hygiene.

·

Level: beginnerTime estimate: ~20 min

“

One site base URL plus an explicit canonical per page reduces duplicate URLs in the index.

  • Set metadataBase once
  • canonical must match what the server serves
  • Open Graph url should not drift from canonical

This snippet shows how to set metadataBase, canonical, and Open Graph for a service or landing route.

Code

import type { Metadata } from 'next'
import { getSiteUrl } from '@/lib/site'

const site = getSiteUrl()

export async function generateMetadata(): Promise<Metadata> {
  const path = '/uslugi/example/'
  return {
    title: 'Page title',
    description: 'Unique snippet description.',
    alternates: { canonical: `${site}${path}` },
    openGraph: {
      title: 'Social title',
      description: 'Short page summary.',
      url: `${site}${path}`,
      type: 'website',
      locale: 'en_US',
    },
  }
}

Verification

  • HTML contains a single link rel="canonical" pointing at the expected URL.
  • The address bar URL matches canonical for the indexable version (no stray UTM in the canonical).

Sources

Need this implemented for your domain and stack?

Short form: name, phone, and site. After you submit, we reply with next steps and a phase outline; details are refined on a call.