[NextJS] 메타데이터의 개념과 중요성, NextJS에서의 기초 사용법

이번 시간에는 메타데이터에 대해 정리해본다.

 

메타데이터란?

메타데이터는 사용자가 방문하는 웹 사이트나 페이지를 세부적으로 설명해주는 정보라고 할 수 있다. 예를 들어, 사용자가 사진을 편집할 수 있는 사이트를 방문하기 위해 해당 웹 사이트를 구글 등을 통해 검색했다면, 사용자는 현재 방문하고자 하는 사이트의 대략적인 정보나 해당 페이지에서 제공하는 주요 콘텐츠의 제목이나 설명 등을 링크를 클릭하기 전에 확인할 수 있다.

 

사진 편집 사이트를 검색하면 나오는 웹 사이트의 메타데이터(큰 글씨는 title, 아래 내용은 description 을 의미한다.

 

개인이 생각하는 메타데이터의 중요성?

메타데이터를 잘 작성해둔다면, 각 브라우저의 검색엔진이나 크롤링 봇이 해당 웹사이트를 보다 더 잘 이해할 수 있기 때문에 사이트맵(sitemap) 못지 않게 SEO에 중요한 영향을 미친다(애초에 사이트맵 자체가 메타데이터와 유기적인 관계를 가진다). 즉, 해당 사이트에 대한 사용자(고객)의 유입을 높여야 하는 기업의 입장에서는 이 부분을 간과하는 것은 매출의 감소를 의미하기  때문에 매우 중요하다.

 

NextJS 에서 말하는 메타데이터의 중요성

메타데이터는 웹페이지의 SEO를 향상시키는 데 중요한 역할을 하여 검색 엔진과 소셜 미디어 플랫폼에서 웹페이지에 대한 접근성과 이해도를 높인다. 적절한 메타데이터는 검색 엔진이 웹 페이지를 효과적으로 색인화하여 검색 결과에서 순위를 높이는 데 도움이 된다. 또한 Open Graph와 같은 메타데이터는 소셜 미디어에서 공유 링크의 모양을 개선하여 사용자에게 콘텐츠를 더욱 매력적이고 유익하게 만든다.

 

메타데이터의 유형

메타데이터에는 당연하게도 다양한 유형이 존재한다. 각각의 유형은 서로 유기적으로 활용하며, 필요에 따라서는 일부만 사용할 수도 있다.

 

Title Metadata (타이틀 메타데이터)

브라우저 탭에 표시되는 웹페이지의 제목을 담당한다. 검색 엔진 최적화(SEO)에 중요하며, 웹페이지의 내용을 이해하는 데 도움이 된다. 이 포스트의 서두 부분에서 제공한 이미지의 제목 부분을 의미한다.

 

<title>페이지 제목</title>

 

Description Metadata (설명 메타데이터)

웹페이지 내용에 대한 간략한 개요를 제공한다. 주로 검색 엔진 결과에서 표시되어 사용자에게 웹페이지 내용을 미리 알려준다. 이 포스트의 서두 부분에서 제공한 이미지의 긴 문장을 의미한다.

 

<meta name="description" content="페이지 내용에 대한 간략한 설명." />

Keyword Metadata (키워드 메타데이터)

웹페이지 내용과 관련된 키워드를 포함하여 검색 엔진이 페이지를 색인화하는 데 도움을 준다.

 

<meta name="keywords" content="명언, 명언카드, 커스텀디자인" />

 

Open Graph Metadata (오픈 그래프 메타데이터)

웹페이지를 소셜 미디어에서 공유할 때 제목, 설명, 미리 보기 이미지 등을 지정하여 표현 방식을 향상시킨다.

 

<meta property="og:title" content="위대한 말">
<meta property="og:description" content="다양한 말에 대한 정보를 상세하게 제공합니다.">
<meta property="og:image" content="thumbnail.jpg">

 

Favicon Metadata (파비콘 메타데이터)

브라우저 주소 표시줄이나 탭에 표시되는 작은 아이콘인 파비콘을 웹페이지에 연결한다.

 

<link rel="icon" href="favicon.ico" type="image/x-icon">

 

NextJS 에서 메타데이터 적용하기 1 |  정적 메타데이터 

NextJS 에서는 메타데이터를 적용하는 방법을 두 가지 제공한다. 하나는 각 페이지나 레이아웃에 메타데이터를 직접 일일이 입력하는 방법이고, 다른 하나는 함수를 이용하여 경로 파라미터나 fetch 등의 호출로 불러온 데이터에 따라서 동적으로 메타데이터를 생성하는 방법이다.

 

두 방법 중 정적 메타데이터를 생성하는 방법은 아래와 같이 코드를 작성한다. 

// page.tsx
import type { Metadata } from 'next'
import CategoryList from '@/components/UI/list/CategoryList'

export const metadata: Metadata = {
  title: '저자별',
  description:
    '카테고리 목록이 나열된 페이지
}

export default async function CategoryPage() {
  return (
      <Category/>
  )
}

// layout.ts
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: '로그인',
  description: '로그인 페이지 입니다.',
}

export default function Layout({ children }: { children: React.ReactNode }) {
  return <section>{children}</section>
}

 

참고로 Next.JS 에서 메타데이터는 서버 컴포넌트에서만 가능하며, Loot Layout 에서 생성된 메타데이터가 그 아래의 자식 컴포넌트에 상속되어 적용되는 특징이 있다. 따라서 각 페이지 마다 메타데이터를 적용하기 전에는 루트에서 적용된 메타데이터가 보이게 된다.

 

NextJS 에서 메타데이터 적용방법 2 | 동적으로 생성하기

동적으로 생성하는 경우에는 해당 페이지가 /author/[id]/page.tsx 와 같이 동적으로 경로가 지정되는 경우 모든 동적 경로에 메타데이터를 적용하고자 할 때, 혹은 일부 동적 경로에 있어서만 메타데이터를 적용하고자 할 때 활용할 수 있다. 

 

동적으로 생성하는 방식은 정적 메타데이터(변수 활용)와 다르게 함수를 호출하고 export 하여 적용한다.

 

// /author/[name]/layout.ts
import type { Metadata } from 'next'

type Props = {
  params: { name: string }
}

export async function  generateMetadata ({params}:Props):Promise<Metadata> {
  const category = decodeURIComponent(params.name)

  return {
    title: category
  }
}

export default function Layout({ children }: { children: React.ReactNode }) {

  return <section>{children}</section>
}

 

정적 메타데이터와 마찬가지로 서버 컴포넌트에서만 사용이 가능하고, layout.ts 가 아닌 page.tsx 에서도 사용 가능하다.

 

메타데이터에 추가 가능한 옵션 유형들

앞서 설명한 내용들을 NextJS 에서 적용한다면 다음과 같이 옵션을 활용할 수 있다.

export const metadata: Metadata = {
  title: {
  // tamplate 에 %s 로 지정한 부분은 각 자식 컴포넌트에서 title : 저자 로 입력하면 저자 | Wise Sayings 으로 표시된다.
    template :'%s | Wise Sayings',
    default : 'Wise Sayings' // 지정한 메타데이터가 없으면 기본으로 적용되는 title 
  },
  keywords:"명언, 명언 커스텀, quotes, wise sayings, 명언 검색", // 검색 색인 형성 시 봇이 참고하는 키워드
  description:
    '나만을 위한 명언들을 모아서 볼 수 있는 애플리케이션입니다. 언제든지 자신이 원하는 명언을 수집할 수 있고, 직접 명언을 만들어 볼 수도 있습니다.', 
  
  // sns 등을 통해 공유될 때 표시되는 카드 이다. 바로 아래에서 NextJs 공식 문서를 링크 남기면 표시되는 것과 같다.
  openGraph : { 
    type: "website",
    url: "https://사이트주소",
    title: "Wise Sayings",
    description: "800개가 넘는 명언을 조회하고, 원하는 명언을 선택하여 공유 가능한 카드를 생성할 수 있는 사이트입니다.",
    siteName: "Wise Sayings",
    images: [{
      url: "https://이미지경로",
    }],
  }
}

 

그 외 자세한 활용 방법 → NextJS 공식 문서

역시 뭘 해도 제일 중요한 것은 공식 문서를 확인하는 것이다. 요즘 들어 영어 공부를 시작하고 영문으로 읽는 연습을 하고 있는데, 이해가 될 수록 공식문서 만큼 자세하고 명확한 지침은 없다는 걸 많이 느낀다. 영문을 봐도 모르는 부분은 요새 인공지능 번역기들이 아주 까지는 아니더라도 90 프로 이상은 번역을 해주므로 참고하면 될 듯하다.

 

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

Optimizing: Metadata | Next.js