DogKaeBi

[Next.js] Metadata

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

코딩
[Next.js] Metadata

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를 사용했다.