[Next JS] Next 13에서 동적으로 메타데이터 적용하여 SEO 최적화 시키기

참고 : https://nextjs.org/docs/app/building-your-application/optimizing/metadata

Optimizing: Metadata | Next.js

 

1. 메타데이터와 그 장점

메타데이터가 무엇인지, 기능과 그 장점이 무엇인가?

메타데이터와 SEO 최적화는 웹 사이트나 앱의 검색 엔진에서의 노출을 높이고 사용자 경험을 향상시키는 중요한 요소이다. 이를 효과적으로 설정하면 다음과 같은 좋은 점을 얻을 수 있다.

 

1. 검색 엔진 노출 향상: 메타데이터를 적절하게 설정하면 검색 엔진에서 웹 페이지의 내용을 더 잘 이해하고 인덱싱할 수 있다. 이는 검색 결과 페이지(SERP)에서 웹 페이지가 노출되는 빈도와 순위를 향상시켜준다.

2. 사용자 클릭률 증가: 메타데이터에 유혹적이고 의미 있는 정보를 포함하면 사용자가 검색 결과에서 해당 링크를 클릭할 확률이 높아질 수도 있다. 이는 메타데이터 안에 있는 타이틀과 설명이 검색 결과에서 어떻게 표시되는지에 따라 결정된다. 사용자들의 관심을 얼마나 끌어당길 수 있는지는 콘텐츠의 역량이겠지만..

3. 사용자 경험(UX) 향상: 사용자가 검색 결과를 통해 웹 페이지로 이동할 때, 메타데이터가 웹 페이지의 내용을 정확하게 대표하고 사용자의 기대에 부응한다면 사용자의 만족도와 웹 페이지에 대한 신뢰도가 증가한다.

4. 소셜 미디어 공유 증진: 메타데이터를 설정하면 소셜 미디어 플랫폼에서 공유될 때 웹 페이지가 더 잘 표시된다. 적절한 메타 이미지를 설정하면 사용자가 소셜 미디어에서 링크를 공유할 때 눈에 띄게 나타날 수 있다. 그냥 링크만 공유할 때보다 이미지와 함께 제목, 간단한 내용이 함께 표시되면 더 보기 좋기도 하다.

5. 웹 사이트의 전체적인 가시성 증가: 검색 엔진 최적화(SEO)와 관련된 메타데이터 설정은 웹 사이트의 전반적인 가시성을 높이는 데 도움이 된다. 이는 검색 결과 페이지뿐만 아니라 소셜 미디어 및 다른 온라인 채널에서도 해당 웹 사이트가 더 많이 노출되는 것을 의미한다.

 

이러한 이유로 메타데이터와 SEO 최적화는 모든 온라인 비즈니스에 있어서 중요한 전략적 요소로 간주되기 때문에, 메타데이터를 효과적으로 설정하고 관리함으로써 웹 사이트나 앱의 가시성과 효과적인 UX를 제공할 수 있다.

 

2. NextJS 웹에서 메타데이터 설정

1) 정적 메타데이터 설정

정적 메타데이터는 값이 변하지 않는 메타데이터라고 볼 수 있다. layout.js에 코드를 적용하여 웹사이트 전체에 적용할 수도 있고, 특정 경로 페이지에서 적용할 수 있다.

// /app/page.js

export const metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

2) 동적 메타데이터 설정

각 페이지 마다 데이터가 다르다면 동적으로 메타데이터를 적용할 수 있다. 공식 웹사이트에서는 generateMedata() 함수를 쓰라고 하고 있다.

// /app/product/[id]/page.js

export async function generateMetadata({ params, searchParams }, parent) {
  // read route params
  const id = params.id
 
  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  // optionally access and extend (rather than replace) parent metadata
  const previousImages = (await parent).openGraph?.images || []
 
  return {
    title: "제목이다 이거야",
    description : "설명란이다 이거야",
    openGraph: {
    	title: "og용 타이틀",
        description : "og용 설명란",
      	images: ['/some-specific-page-image-og.jpg', ...previousImages],
    },
    twitter: {
    	title: "twitter용 타이틀",
        description : "twitter용 설명란",
      	images: ['/some-specific-page-image-twitter.jpg', ...previousImages],
    },
  }
}
 
export default function Page({ params, searchParams }) {}

흔하게 metadata 안에 opengraph와 twitter용 메타데이터도 설정해 줄 수 있는데, 보는바와 같이 설정해줘도 된다. 굳이 설정하지 않았을 때에는 기존 title이나 description의 값이 자동으로 들어간다.

3. Metadata의 적용 우선 순위

루트 레이아웃 (app/layout.[jsx|tsx]): 루트 레이아웃에서 정의된 메타데이터는 애플리케이션 내의 모든 페이지에 적용되며, 더 구체적인 메타데이터 설정에 의해 재정의된다.

중첩된 레이아웃 (예: app/blog/layout.[jsx|tsx]): 애플리케이션 내에 중첩된 레이아웃이 있는 경우, 이러한 레이아웃에서 정의된 메타데이터가 루트 레이아웃에서 정의된 메타데이터를 재정의한다. 이를 통해 특정 섹션에 대해 메타데이터를 더 세밀하게 제어할 수 있다.

페이지별 메타데이터 (예: app/blog/[slug]/page.[jsx|tsx]): 페이지 구성 요소 내에서 직접 정의된 메타데이터는 레이아웃에서 정의된 메타데이터보다 우선하게 된다. 이를 통해 각 페이지에 고유한 제목, 설명 또는 기타 메타 태그를 설정할 수 있게 되는 것이다.

 

페이지별 메타데이터 > 중첩된 레이아웃 > 루트 레이아웃의 메타데이터 순으로 우선적으로 적용된다고 생각하면 된다.