Next.js metadata title 상속, template이 적용되지 않을 때 확인할 것

title이 비는 상황

Lighthouse가 <title> 누락을 보고하거나, 하위 page의 title에 사이트 이름이 붙지 않는 문제가 생깁니다. 화면에 보이는 heading과 문서 title은 별개이므로 <h1>이 있어도 이 검사를 통과하지 못합니다.

title.template은 선언한 layout의 child segment에만 적용되고 같은 segment의 page title에는 적용되지 않으며, template을 정의할 때는 title.default가 필요합니다.

metadata가 합쳐지는 규칙

App Router에서는 root layout에 기본 title을 두고 child page가 자신의 title을 제공하는 구성이 가장 분명합니다. title.template은 그것을 선언한 layout보다 아래 segment에 적용됩니다. 같은 route segment의 page까지 꾸민다고 생각하거나 page에서 template만 선언하면 기대한 결과가 나오지 않습니다.

// app/layout.tsx
export const metadata = {
  title: {
    default: "호현의 개발 노트",
    template: "%s | 호현의 개발 노트",
  },
};

// app/notes/page.tsx
export const metadata = { title: "개발 노트" };
// <title>개발 노트 | 호현의 개발 노트</title>

안전한 수정과 확인

부모 template을 무시해야 하는 page만 title.absolute를 사용합니다. 동적 title은 generateMetadata가 실제 record를 찾지 못한 경우에도 어떤 fallback을 반환할지 정합니다. 수정 뒤에는 browser Elements panel만 보지 말고 production build의 HTML과 각 canonical page를 직접 확인합니다. root, 목록, 정상 상세, not-found에서 title이 하나씩 존재하고 서로 구별되는지가 완료 기준입니다.

공식 문서

• Next.js: generateMetadata (새 창에서 열림)

현재 Next.js version에서 layout과 page의 실제 segment 관계를 기준으로 확인합니다.