App Router (16) - SEO 설정
2026.10.07 · 1분 읽기 · 조회 0
메타데이터
메타 데이터를 설정하면 페이지의 SEO를 높일 수 있다.
// page.tsx
export const metadata: Metadata = {
title: "페이지 제목",
description: "페이지 설명",
openGraph: {
title: "og 제목",
description: "og 설명",
images: ["/thumbnail.png"],
},
};다음과 같이 페이지컴포넌트 상단에 메타데이터를 정의하면 된다.
동적 경로
동적 경로를 가지는 페이지에서는 위의 방법으로 메타데이터를 설정하는 것이 쉽지 않다.
페이지 컴포넌트에서 프롭스로 받아와야 하는 값들을 읽을 수 없기 때문이다.
export function generateMetadata() {
return {};
}그런 경우에는 위와 같은 사전 정의된 함수를 이용해서 메타데이터를 동적으로 생성해줘야 한다.
해당 함수에서는 페이지 컴포넌트의 프롭스를 그대로 사용할 수 있다.
export async function generateMetadata({
searchParams,
}: {
searchParams: Promise<{ q?: string }>;
}): Promise<Metadata> {
const { q } = await searchParams;
return {
title: `${q}: 검색 결과`,
description: `${q}의 검색결과입니다.`,
openGraph: {
title: `${q}: 검색 결과`,
description: `${q}의 검색결과입니다.`,
images: ["/thumbnail.png"],
},
};
}값을 처리한 후 return 값으로 메타 데이터들을 작성해주면 된다.
generateMetadata 함수 내에서도 fetch 요청이 가능하다. book/[id] 페이지 접속 시 id값을 이용해 책의 정보를 메타 데이터에 넣어주고 싶다면 해당 함수 내에서 페칭을 진행한 후 리턴값에 넣어주면 된다.
favicon 설정
app 폴더에 favicon.ico 파일을 넣어주면 된다.
초록
앱과 웹을 만들고, 직접 운영하며 기록합니다.
댓글
giscus로 동작하며 GitHub Discussions에 저장됩니다.