Next.js SEO를 위한 MDX 메타데이터 내보내기 방법

Next.js는 MDX 파일에서 metadata 객체를 export하여 SEO 및 소셜 공유 기능을 강화할 수 있습니다. 이는 블로그 포스트나 문서 페이지에서 특히 유용합니다.

예시: 메타데이터 내보내기

MDX 파일 상단에 아래와 같이 metadata 객체를 export할 수 있습니다:

export const metadata = {
  title: 'Next.js SEO를 위한 MDX 메타데이터 내보내기 방법',
  description: 'Next.js SEO 기능을 활용하기 위해 MDX 파일에서 메타데이터를 내보내는 가이드.',
  authors: [{ name: 'Jane Doe', url: 'https://janedoe.com' }],
  openGraph: {
    images: [
      'https://cdn.cosmos.so/example-image.jpg',
    ],
  },
}

이 메타데이터는 Next.js에서 자동으로 인식되어 SEO, Open Graph, 기타 메타 태그에 활용됩니다.

왜 MDX에서 메타데이터를 사용해야 할까요?

SEO: 관련된 제목과 설명으로 검색 엔진 순위를 높일 수 있습니다.
소셜 공유: 소셜 미디어에서 콘텐츠가 더 잘 보이도록 할 수 있습니다.
일관성: 메타데이터를 콘텐츠와 함께 관리하여 유지보수가 쉽습니다.

더 읽어보기

이 글은 leerob의 사이트에서 영감을 받아 작성되었습니다.