블로그(6) - metadata, opengraph 설정 | 고지민 개발 블로그

Next.js의 metadata 객체를 사용해 SEO, 소셜 공유를 위한 OG 정보를 어떻게 설정했는지, 동적인 페이지에서 메타데이터를 어떻게 생성하는지 정리한 글입니다.

시작…

이번 포스팅에선 metadata가 무엇인지, Next 13버전에서는 metadata를 어떻게 head 태그에 추가할 수 있는지 기록해보려 합니다.

Metadata

데이터에 관한 구조화된 데이터, 다른 데이터를 설명해주는 데이터라고 정의됩니다. 쉽게 설명해보자면 현재 제 게시물의 title, description, author 등 제 게시물의 정보를 담고 있는 데이터를 metadata라고 볼 수 있습니다.

그래서 Next 13버전에선 metadata를 어떻게 정의할 수 있나요??

1. 정적 메타데이터 - metadata 객체 export

title, description 등 변하지 않는 정적인 값들은 layout.js / page.js 에서 metadata 객체를 이용해 정의할 수 있습니다.

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

위는 Optimizing: Metadata | Next.js (nextjs.org) 공식 문서의 예제 입니다.

위 예제를 보고 원하는 metadata를 지정해주면 됩니다.

// app/layout.tsx

export const metadata: Metadata = {
  metadataBase: new URL("https://www.gojimin.com"),
  title: {
    default: "Prolip의 개발 블로그",
    template: "%s | Prolip의 개발 블로그",
  },
  description: "프론트엔드 개발자 Prolip의 개발 블로그",
  icons: {
    icon: "/favicon.ico",
  },
};

title을 default와 template으로 나눠놨는데 이게 무슨 뜻일까요?

metadata는 root 영역으로부터 시작하여 최종 영역에 가장 가까운 영역순으로 평가됩니다.

즉, 게시물에 대한 페이지에 접근한다면

app/layout.tsx (루트 레이아웃)
app/posts/layout.tsx (중첩된 포스트 레이아웃)
app/posts/[slug]/page.tsx (게시물 페이지)

위와 같은 순서로 평가되며 평가 순서에 따라 얕게 병합되며 최종 영역의 경로에 대한 metadata를 출력하게 됩니다.
이 과정에서 중복된 키는 순서에 따라 바뀌며, 중첩 필드가 존재할 경우 이전 segment에서 정의된 segment는 마지막 segment가 덮어써서 정의하게 됩니다.

만약 metadata를 아래와 같이 정의하게 되었다고 가정해보겠습니다.

// app/layout.tsx

export const metadata: Metadata = {
  title: "Prolip의 개발 블로그"
};

// app/posts/[slug]/page.tsx

export const metadata: Metadata = {
  title: "어쩌구 게시물에 대한 제목"
};

그렇다면 app/posts/[slug]/page.tsx에 해당하는 경로의 metadata에는 "어쩌구 게시물에 대한 제목”라는 title의 정의될 것입니다.

하지만 처음 보여드린 template을 지정한다면 "어쩌구 게시물에 대한 제목 | Prolip의 개발 블로그" 이렇게 덮어씌울 자리를 직접 지정해줄 수 있게 됩니다.

2. 동적 메타데이터 - generateMetadata()

블로그 게시물에 대한 경로는 동적인 값으로 변화하는 값입니다.
이 때 사용할 수 있는 generateMetadata() 함수가 있습니다.

// app/posts/[slug]/page.tsx

export async function generateMetadata({ params: { slug } }: Props) {
  const { title, description } = await gePostData(slug);
  return {
    title,
    description,
  };
}

공식 문서에 따른 제 구현 사항입니다.

동적인 경로에 해당하는 slug를 params로 받아 게시물에 해당하는 정보를 받아옵니다.
게시물의 title과 description을 return하기만 하면 해당 페이지의 metadata를 동적으로 설정할 수 있게 됩니다.

<title>기술 블로그 제작기 | Prolip의 개발 블로그</title>
<meta name="description" content="나는 어째서 수많은 블로그 플랫폼 속에서 블로그를 직접 만들었는가.">

이렇게 말이죠..

블로그 자랑하기..

사실 metadata까지 모두 설정했다면 우리 블로그는 검색 엔진에 의해 노출될 환경을 잘 구성했다고 볼 수 있습니다..

이제 신나서 블로그 만들었다고 자랑하는 겁니다.

blog-making-6-1

아니 이게 뭐야! favicon이랑 title만 나오고 뭔가 못생겼잖아요!!

Open Graph

페이스북에서 최초로 정의한 메타 태그 규약인 Open Graph 프로토콜은 HTML 문서내의 og: 로 시작하는 meta tag를 찾아내여 보여주는 프로토콜입니다..

쉽게 twitter, discord, facebook 등 SNS로 공유할 때 사이트의 특정 정보를 미리 간략하게 정리하여 전달할 수 있습니다.

사용 가능한 태그의 종류는 아래와 같습니다.

og:title : graph 내에 표시되는 제목
og:type : 객체의 유형(예: “video.movie”, “website”, “article”)
og:image : 이미지 URL
og:url : 객체의 표준 URL, 현재 사이트의 URL입니다.

선택적 메타데이터도 존재합니다. 해당 사항은 The Open Graph protocol (ogp.me) 공식 문서를 통해 확인 가능합니다.

<head>
	<title>OG test</title>
	<meta property="og:title" content="Set Title" />
	<meta property="og:title" content="Set Description" />
	<meta property="og:type" content="Set Type" />
	<meta property="og:url" content="Set URL" />
	<meta property="og:image" content="Set Image" />
...
</head>

위와 같이 설정이 가능합니다.

Next 13 버전에선 쉽게 설정 가능합니다..

metadata 객체엔 openGraph에 대한 설정도 가능합니다.

export const metadata: Metadata = {
  metadataBase: new URL("https://www.gojimin.com"),
  title: {
    default: "Prolip의 개발 블로그",
    template: "%s | Prolip의 개발 블로그",
  },
  description: "프론트엔드 개발자 Prolip의 개발 블로그",
  icons: {
    icon: "/favicon.ico",
  },
  openGraph: {
    type: "website",
    url: "https://www.gojimin.com",
    title: {
      default: "Prolip의 개발 블로그",
      template: "%s | Prolip의 개발 블로그",
    },
    siteName: "Prolip의 개발 블로그",
    locale: "ko_KR",
  },
};

이렇게 말입니다..

아니 그럼 게시물마다 og:title, og:description og:image는 어떻게 설정해요!!!!

export async function generateMetadata({ params: { slug } }: Props) {
  const { title, description, path } = await getPostData(slug);
  return {
    title,
    description,
    openGraph: {
      title,
      description,
      images: [
        {
          url: `/images/posts/${path}.png`,
        },
      ],
      url: `https://www.gojimin.com/posts/${path}`,
    },
  };
}

이렇게 설정하면 됩니다..

진짜 자랑하기

blog-making-6-2

너무 예뻐서 공중제비 3번을 돌 수 있습니다.

아 그리고 open graph이 제대로 설정 됐는지 확인해볼 수 있는 사이트가 있습니다..

OpenGraph - Preview Social Media Share and Generate Metatags - OpenGraph 해당 사이트에 URL을 입력하면 여러 SNS에서 어떻게 표시되는지 확인이 가능합니다.

마치며..

metadata와 open graph에 대한 기록을 마칩니다..

다음 포스팅은 API 라우트와 node-mailer를 통해 어떻게 메일 전송 기능을 구현했는지 기록해보려 합니다..

여기까지 읽어주셨다면 정말 감사합니다..

뿅

고지민 개발 블로그

블로그(6) - metadata, opengraph 설정

시작…