블로그(6) - metadata, opengraph 설정 | Prolip의 개발 블로그

metadata와 opengraph 이해하고 next 13의 metadata 객체로 쉽게 설정하기

시작…

이번 포스팅에선 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를 통해 어떻게 메일 전송 기능을 구현했는지 기록해보려 합니다..

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

뿅

Prolip's Blog

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

시작…