본문 바로가기

클라이언트/Next.js
[Next.js] Metadata title 추가하기

// Metadata title 추가하기

- SEO 향상을 위해 heade elements를 추가하는 것은 매우 중요하다.

- meta data 중 title과 description은 특히 필수!


▪ layout.tsx 설정

가장 메인이 되는 meta data를 추가하기 위해 root layout에서 작업한다.

export const metadata: Metadata = {
  title: {
    template: '%s | 애플리케이션명',
    default: '애플리케이션명',
  },
  description: '애플리케이션 설명',
};


title에 template으로 %s 를 사용하면, 각 페이지에서 metadata를 설정하면 해당 부분에 채워진다.



▪ 특정 페이지 정적 설정

export const metadata = {
  title: '페이지명',
};


▪ 특정 페이지 동적 설정

export async function generateMetadata(매개변수) {
  return {
    title: `페이지명 ${매개변수}`,
  };
}