Next.js로 기술 블로그 만들기: 블로그는 사드세요... 제발 3편 내 블로그 간지나게 자랑하기 (Open Graph 적용하기)

2022/09/18

블로그는 사드세요 시리즈

3 min read

Next.js로 기술 블로그 만들기: 블로그는 사드세요... 제발 3편 내 블로그 간지나게 자랑하기 (Open Graph 적용��하기)

이 포스팅은 Next 12 버전을 기준으로 작성되었습니다.

블로그는 사드세요... 제발 시리즈는 제가 블로그를 직접 만들었던 과정과 신경썼던 것들을 기록한 것 입니다. 해당 시리즈는 승우 아빠님의 사드세요 시리즈를 패러디 한 것입니다.

얘들아 나 블로그 만들었어!

우리는 인터넷 링크를 복사해서 카카오톡, 슬랙, 디스코드 등등 여기저기 공유를 할 수 있어요 공유를 했을 때 주소만 띡 간다면 별로 클릭하고 싶지도 않고, 무슨 주소인지도 모를수도 있죠.

위 사진처럼 해당 링크에 대한 정보가 이미지로든, 텍스트로든 뜨게 된다면 링크를 받는 입장에서는 조금 더 클릭해보고 싶고, 더 알아보고 싶고,,, 그래서 나온게 바로 Open Graph 입니다.

Open Graph

Open Graph logo

open graph는 페이스북에서 만든 프로토콜(통신 규약)입니다.

Open Graph 프로토콜을 사용하면 모든 웹 페이지가 소셜 그래프에서 풍부한 개체가 될 수 있습니다. 예를 들어, 이것은 Facebook에서 모든 웹 페이지가 Facebook의 다른 개체와 동일한 기능을 가질 수 있도록 하는 데 사용됩니다.

라고 설명해놨는데, 간단히 요약하면 웹 페이지 링크를 공유했을 때 풍부한 정보를 제공하기 위한 것으로 볼 수 있습니다.

그래서 어떻게 할 수 있는데?

Open Graph는 head 태그안의 meta 태그를 통해서 노출할 수 있고, 이는 next.js에서 아주 쉽게 할 수 있습니다.

1<head>
2  <meta property="og:title" content="The Rock" />
3  <meta property="og:type" content="video.movie" />
4  <meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
5  <meta
6    property="og:image"
7    content="https://ia.media-imdb.com/images/rock.jpg"
8  />
9  <!-- ... -->
10</head>

위는 open graph 공식홈페이지에 나오는 예시이고, head 태그안에 meta 태그에 여러 정보를 넣어서 표현할 수 있습니다. 어떤 종류의 property가 있는지에 대한 설명은 공식문서에 자세하게 나와있기 떄문에 요기서 하나하나 하지 않겠습니다. (독자를 강하게 키우는 저자)

만약 블로그를 만들게 된다면 포스트에 대한 open graph를 따로 띄우고 싶을수도 있습니다. 그래서 저는 main page에서의 head와 post page에서의 head를 분리시켜놨습니다.

실제 코드는 아래와 같습니다.

1import Head from "next/head";
2
3import { DOMAIN } from "../../constants";
4import type PostType from "../../types/post";
5
6interface CustomHeadInterface {
7  post?: PostType;
8  type: "posting" | "main";
9}
10
11const CustomHead = ({ post, type }: CustomHeadInterface) => {
12  return type === "posting" ? (
13    <Head>
14      {/* HTML Meta Tags */}
15      <title>{post?.title} | 정현수 기술 블로그</title>
16      <meta name="viewport" content="width=device-width, initial-scale=1" />
17
18      {/* Facebook Meta Tags */}
19      <meta
20        property="og:url"
21        content={`https://junghyeonsu.com/posts/${post?.slug}`}
22      />
23      <meta property="og:type" content="website" />
24      <meta
25        property="og:site_name"
26        content={`${post?.title} | 정현수 기술 블로그`}
27      />
28      <meta
29        property="og:title"
30        content={`${post?.title} | 정현수 기술 블로그`}
31      />
32      <meta property="og:description" content={post?.description} />
33      <meta property="og:image" content={`${DOMAIN}${post?.coverImage}`} />
34
35      {/*  Twitter Meta Tags  */}
36      <meta name="twitter:card" content="summary_large_image" />
37      <meta property="twitter:domain" content="junghyeonsu.com" />
38      <meta
39        property="twitter:url"
40        content={`https://junghyeonsu.com/posts/${post?.slug}`}
41      />
42      <meta
43        name="twitter:title"
44        content={`${post?.title} | 정현수 기술 블로그`}
45      />
46      <meta name="twitter:description" content={post?.description} />
47      <meta
48        name="twitter:image"
49        content={`${DOMAIN}${post?.coverImage}`}
50      ></meta>
51      <meta name="twitter:label1" content="Category" />
52      <meta name="twitter:data1" content={`개발 | ${post?.category}`} />
53      <meta
54        name="article:published_time"
55        content={`${post?.date.replace(/[/]/g, "-")}T09:00:00.000Z`}
56      />
57    </Head>
58  ) : (
59    <Head>
60      {/* HTML Meta Tags */}
61      <title>정현수 기술 블로그</title>
62      <meta name="description" content="공부한 것들을 정리해서 올립니다." />
63      <meta name="viewport" content="width=device-width, initial-scale=1" />
64      {/* Facebook Meta Tags */}
65      <meta property="og:url" content="https://junghyeonsu.com/" />
66      <meta property="og:type" content="website" />
67      <meta property="og:site_name" content="정현수 기술 블로그" />
68      <meta property="og:title" content="정현수 기술 블로그" />
69      <meta
70        property="og:description"
71        content="공부한 것들을 정리해서 올립니다."
72      />
73      <meta
74        property="og:image"
75        content="https://github.com/junghyeonsu/junghyeonsu.dev/blob/main/public/profile.jpeg?raw=true"
76      />
77      {/*  Twitter Meta Tags  */}
78      <meta name="twitter:card" content="summary_large_image" />
79      <meta property="twitter:domain" content="junghyeonsu.com" />
80      <meta property="twitter:url" content="https://junghyeonsu.com/" />
81      <meta name="twitter:title" content="정현수 기술 블로그" />
82      <meta
83        name="twitter:description"
84        content="공부한 것들을 정리해서 올립니다."
85      />
86      <meta
87        name="twitter:image"
88        content="https://github.com/junghyeonsu/junghyeonsu.dev/blob/main/public/profile.jpeg?raw=true"
89      />
90      <meta name="twitter:label1" content="Category" />
91      <meta name="twitter:data1" content="개발" />
92    </Head>
93  );
94};
95
96export default CustomHead;