강의 17~18번
라우팅 메타데이터
- 적절한 검색 엔진 최적화(SEO)를 확보하는 것은 가시성을 높이고 사용자를 끌어들이는 데 중요함
- Next.js에서는 각 페이지에 대한 메타데이터를 정의할 수 있는 메타데이터 API를 도입
- 메타 데이터는 페이지가 공유되거나 인덱싱 될 때 정확하고 관련성 있는 정보가 표시되도록 보장함
- 메타 데이터 api를 활용해 라우팅 메타데이터를 향상 시키는 방법을 알아보도록 함
메타데이터 구성 방법
- app 라우터에선 메타 데이터를 layout.js와 page.js에서 각각 구성할 수 있다.(두 가지 방법이 있음을 의미)
- 메타 데이터는 정적 메타데이터 객체를 내보내거나(export a static metadata object), 동적으로 메타데이터를 생성하는 generateMetadata 함수를 내보낼 수 있음
- 메타 데이터의 규칙으로는 다음과 같음
- layout.js와 page.js 모두 메타 데이터를 내보낼 수 있음, layout.js에서 메타데이터를 정의하면 그 레이아웃에 포함된 모든 페이지에 적용, page.js에서 메타데이터를 정의하면 해당 페이지에서만 적용
- 메타 데이터는 루트 레벨에서 최종 페이지 레벨까지 순서대로 읽힘
- 동일한 라우트에 여러 위치에서 메타데이터가 있을 경우 이들은 결합됨, 그러나 같은 속성을 가진 경우 페이지 메타데이터가 레이아웃 메타데이터를 대체함
- 즉 Next.js에선 메타데이터를 페이지나 레이아웃 수준에서 설정할 수 있으며, 페이지마다 구체적인 메타 데이터를 가질 수 있도록 하여 더 나은 SEO 성능을 달성할 수 있게 해줌
// app/layout.js
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({ children }) {
return (/* children과 레이아웃 코드*/)
}app/layout.js의 메타데이터는 전역으로 적용되어짐
// app/about/page.js
export const metadata = {
title: "About Page"
}
export default function About() {
return <h1>about page</h1>
}/about 페이지에서만 적용되어지는 메타데이터, 전역 metadata인 title이 있지만 page의 메타데이터가 우선이기 때문에 About page로 표현됨
// app/product/[productId]/page.js
export const generateMetadata = async ({ params }) => {
return {
title: `product ${params.productId}`
}
}
export default function ProductDetails({ params }) {
return (
<>
<h1>Details about product {params.productId}</h1>
</>
)
}이와 같이 동적 라우팅 되는 페이지의 경우에도 params로 매개변수를 불러와 간단하게 metadata의 설정이 가능함
또한 메타데이터 function은 async function으로도 정의될 수 있는데, 이는 metadata의 컨텐츠를 비동기적으로 불러올 수 있다는 것이다
// app/product/[productId]/page.js
export const generateMetadata = async ({ params }) => {
const title = await new Promise(resolve => {
setTimeout(() => {
resolve(`iPhone ${params.productId}`)
}, 3000)
})
return {
title: `Product ${title}`
}
}
export default function ProductDetails({ params }) {
return (
<>
<h1>Details about product {params.productId}</h1>
</>
)
}해당 예시에선 async, await을 활용한 가장 기본적인 setTimeout 함수를 활용하여 3초를 기다리게 만들었지만, fetch 등을 활용하여 metadata를 동적으로 생성하고 페이지 로드 시에 필요한 데이터를 기다린 후 metadata를 완성할 수 있다. 이러한 방식은 서버로부터 실시간 데이터를 가져와 페이지의 메타데이터에 반영할 때 특히 유용하다.
title 메타데이터
- title 메타데이터의 경우 웹 페이지의 제목으로, 웹 브라우저의 탭 제목, 검색 엔진 결과 페이지(SERP)의 제목 등에 사용되어짐
- 사용자의 검색 엔진에게 해당 페이지의 내용을 간략하게 설명하고 SEO, 사용자 경험, 소셜 미디어 공유 등에 대한 중요한 역할을 함
// app/layout.js
export const metadata = {
title: {
absolute: '',
default:'Next.js Tutorial - Codevolution',
template: '%s | Codevolution',
},
description: 'Generated by Next.js',
}
이와 같이 title을 세분화 시키면 absolute, default, template로 나눌 수 있음
-
default : 기본이 되는 title
-
template : 동적 title, "%s"가 하위 디렉토리의 metadata.title 값으로 바뀜
예를 들어
// app/blog/page.js
export const metadata = {
title: 'Blog',
}
export default function Blog() {
return <h1>My blog</h1>
}이와 같이 하위 디렉토리에서 title을 정의해주면
Blog | Codevolution 과 같이 %s가 하위 디렉토리의 metadata.title 값에 따라 동적으로 변하는 것을 확인할 수 있음
- absolute : template가 동적으로 변하는 title이라면 absolute는 title값을 고정시켜줘야 할 경우 사용함
// app/blog/page.js
export const metadata = {
title: {
absolute: "Blog"
}
}
export default function Blog() {
return <h1>My blog</h1>
}이와 같이 하위 디렉토리에서 title을 absolute로 정의해주면
이와 같이 absolute로 정의한 title이 출력되는 것을 확인할 수 있다.
