К основному контенту
Manuilau | Bureau

Паттерн · TypeScript

Канонический URL и метаданные страницы в Next.js App Router

Паттерн generateMetadata с canonical и Open Graph — основа SEO-гигиены.

·

Уровень: базовыйОценка времени: ~20 мин

“

Один источник базового URL сайта и явный canonical на каждой странице убирают дубли в индексе.

  • metadataBase задаётся один раз
  • canonical совпадает с тем, что отдаёт сервер
  • OG url не должен расходиться с canonical

Фрагмент показывает, как задать metadataBase, canonical и Open Graph для страницы услуги или лендинга.

Код

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: 'Заголовок страницы',
    description: 'Уникальное описание для сниппета.',
    alternates: { canonical: `${site}${path}` },
    openGraph: {
      title: 'Заголовок для соцсетей',
      description: 'Кратко о странице.',
      url: `${site}${path}`,
      type: 'website',
      locale: 'ru_RU',
    },
  }
}

Проверка

  • В HTML есть один link rel="canonical" на ожидаемый URL.
  • Копирование URL из адресной строки совпадает с canonical (без лишних UTM в индексной версии).

Первоисточники

Материалы блога

Нужно внедрить под ваш домен и стек?

Короткая форма: имя, телефон и сайт. После отправки — ответ с порядком работ и ориентиром по этапам; задачу уточняют при контакте.