DogKaeBi 독깨비 코딩 | [Next.js] Metadata

페이지의 title, description, open graph 등, 검색 최적화를 위한 메타데이터 수정하기

Metadata

정확한 정의와는 다르지만...
[Wikipedia 설명문]

메타데이터는 사이트와 각 페이지의 구조 정보 내용이다.

본 페이지의 정보가 들어있어서
SEO (Search Engine Optimization)를 위해 많이 사용한다.

그 외에 open graph도 설정할 수 있다.
채팅이나 소셜에 링크를 올리면
미리보기 같은 내용이 나오는 것을 본 적이 있을 것이다.

Metadata 사용법

[Next.js 공식문]

Next.js에서 사용법은
페이지( page.js )에서 사용한다.
페이지에 나오는 부분이니
layout.js에서 사용해도 된다.

정적 metadata

사용하는 페이지에서
컴포넌트 밖에
metadata 변수를 선언하고 export한다.

아래는
dogkaebi.com 의
(전체) layout.js에서 정의한
metadata의 내용이다.

// .\app\layout.js

export const metadata = {
  metadataBase: new URL('https://dogkaebi.com'),
  title: 'DogKaeBi',
  description: '독깨비의 광둥어 & 개발 블로그',
  icons: { icon: '/logo.png' },
  openGraph: {
    title: 'DogKaeBi | 독깨비',
    description: '독깨비의 광둥어 & 개발 블로그',
    url: 'dogkaebi.com',
    siteName: 'DogKaeBi 독깨비',
    type: 'website',
    images: [
      {
        url: '/logo.png',
        width: 600,
        height: 600,
        alt: 'dogkaebi',
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'DogKaeBi | 독깨비',
    description: '독깨비의 광둥어 & 개발 블로그',
    url: 'dogkaebi.com',
    site: 'DogKaeBi 독깨비',
    images: { url: '/logo.png', alt: 'dogkaebi' },
  },
};

export default function RootLayout({ children }) {
  return <html>...</html>;
}

동적 metadata

사용하는 곳은 같다.
함수 generateMetadata(props)를 선언한다.

아래는
dogkaebi.com/blog/[slug]의
page.js 에서 정의한
generateMetadata 내용이다.

[gray-matter 참고]

// .\app\blog\[slug]\page.js
import matter from 'gray-matter';

export async function generateMetadata(props) {
  const slug = props.params.slug;
  const mdText = await fetch(`http://localhost:3000/${slug}.md`)
    .then((res) => res.text())
    .catch(() => null);

  if (mdText == null) {
    return { title: '404' };
  } else {
    const frontMatter = matter(mdText).data;
    return {
      title: `DogKaeBi | ${frontMatter.title}`,
      description: frontMatter.description,
      openGraph: {
        title: `DogKaeBi | ${frontMatter.title}`,
        description: frontMatter.description,
        images: [
          {
            url: frontMatter.thumbnail,
            width: 600,
            height: 315,
          },
        ],
      },
      twitter: {
        card: 'summary_large_image',
        title: `DogKaeBi | ${frontMatter.title}`,
        description: frontMatter.description,
        url: 'dogkaebi.com',
        site: 'DogKaeBi',
        images: { url: frontMatter.thumbnail, alt: frontMatter.title },
      },
    };
  }
}

간단하게는

generateMetadata 함수 선언
metadata와 같은 형식의 객체 return

하면 metadata를 지정할 수 있다.

위의 예시의 경우는
url 오류에 대해서도 조금 처리를 했다.

fetch로 읽는 파일이 markdown 파일이고
markdown의 front matter를 사용하기 때문에
gray-matter를 사용했다.