Przejdź do treści
Manuilau | Bureau

Wzorzec · TypeScript

Kanoniczny URL i metadane strony w Next.js App Router

Wzorzec generateMetadata z canonical i Open Graph — podstawa higieny SEO.

·

Poziom: podstawowySzacunek czasu: ~20 min

“

Jedno źródło bazowego URL witryny i jawny canonical na każdej stronie ograniczają duplikaty w indeksie.

  • metadataBase ustawiasz raz
  • canonical zgadza się z tym, co zwraca serwer
  • URL OG nie powinien rozjeżdżać się z canonical

Fragment pokazuje, jak ustawić metadataBase, canonical i Open Graph dla strony usługi lub landing page.

Kod

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: 'Tytuł strony',
    description: 'Unikalny opis pod snippet.',
    alternates: { canonical: `${site}${path}` },
    openGraph: {
      title: 'Tytuł dla social media',
      description: 'Krótko o stronie.',
      url: `${site}${path}`,
      type: 'website',
      locale: 'pl_PL',
    },
  }
}

Weryfikacja

  • W HTML jest jeden link rel="canonical" na oczekiwany URL.
  • Skopiowany URL z paska adresu zgadza się z canonical (bez zbędnych UTM w wersji indeksowanej).

Źródła

Wdrożyć pod Twoją domenę i stack?

Krótki formularz: imię, telefon, strona. Po wysłaniu — odpowiedź z kolejnością prac i orientacją etapów; szczegóły doprecyzujemy na kontakcie.