오픈 그래프(Open Graph)에 대해서 with Next.js

조관희·2025년 4월 20일

웹 링크를 공유하다보면 링크 속 컨텐츠를 미리보기로 볼 수 있는 경험이 있으실거에요. 그렇다면 어떻게 내부 컨텐츠를 미리보기를 할 수 있는 지 이론과 실습을 함께 배워보려고 합니다.

링크 속 컨텐츠를 어떻게 미리볼 수 있을까요?

오픈 그래프(Open Graph)라는 프로토콜을 사용하면 웹페이지의 미리보기 정보를 다른 플랫폼(카카오톡, 슬랙 등)에 공유하여 링크 속 컨텐츠를 미리볼 수 있습니다.

그러면 여기서 우리는 오픈 그래프에 대한 개념을 알아야 합니다.

오픈 그래프란 무엇인가요?

오픈 그래프는 Facebook(메타)이 처음 만들었고, 웹페이지를 소셜 객체(Social Object)로 표현하기 위해 만들어진 메타데이터 표준 프로토콜입니다. 즉, 웹사이트가 어떤 컨텐츠인지 설명하기 위한 통신 규칙이자 SNS (페이스북, 인스타그램 등)가 그 정보를 읽어서(크롤링) 미리보기를 꾸밀 수 있도록 정의한 명세서라고 보면 됩니다.

아래 처럼 웹 링크를 공유한 경우에 웹 내부 컨텐츠를 확인해본 경험이 있을겁니다.

(예시는 저의 velog 블로그 포스팅 하나를 가져와 슬랙에 링크를 넣었을 경우입니다.)

위처럼 웹 링크를 공유했을 때, 공유된 링크의 컨텐츠가 보인다면 클릭율이나 사용자에게 더 나은 경험을 제공할 수 있습니다.

결국 이는 사용자의 트래픽을 증가시킬 수 있는 바이럴 유도의 좋은 전략이 될 수 있습니다.

그렇다면 또 다른 장점은 없을까요? 다양한 장점이 존재합니다.

오픈 그래프를 사용해서 얻는 장점이 무엇일까요?

오픈 그래프라는 프로토콜을 만들면서 모든 웹페이지가 같은 형식으로 자신을 설명할 수 있는 통일된 구조를 가질 수 있습니다.

그렇다면, 어떤 구조를 가질까요?

위 사진을 살펴보면, 태그의 og:XXX 라는 이름을 가진 데이터들을 설정할 경우, 그 웹사이트 링크의 컨텐츠를 제공할 수 있습니다. 기본적으로 og:title, og:image, og:description, og:url 만 넣으면 기본적으로 정보 전달이 가능합니다.

컨텐츠를 어떻게 각 플랫폼이 읽어서 미리보기로 보여줄 수 있을까요?

여러 플랫폼(페이스북, 슬랙, 디스코드 등) 이 같은 방식으로 처리 가능하기 때문에 플랫폼의 일관성을 가질 수 있는 장점도 있습니다.

다시 질문으로 돌아와서 미리보기를 어떻게 보여주게 되는걸까요? 그 이유는 플랫폼별 크롤러가 존재하기 때문입니다. 아래의 예시로 설명해볼게요.

처음에 조씨는 링크를 카카오톡에 이씨에게 https://example.com/study/1 전달합니다.

이 경우에 클라이언트 앱(카카오톡)은 해당 URL을 감지하고 바로 서버에 전달합니다.

이때 플랫폼별 크롤러(카카오톡 크롤러)는 HTML 요청을 통해 태그를 분석합니다.

<head>
  <meta property="og:title" content="오늘은 스터디 데이" />
  <meta property="og:description" content="오픈 그래프에 대해서 알아봅니다." />
  <meta property="og:image" content="https://example.com/thumb.jpg" />
  <meta property="og:url" content="https://example.com/study/1" />
</head>

그렇게 위 처럼 HTML 태그를 살펴보며, 태그이면서 property=”og:XXX” 속성을 가진 데이터를 찾습니다.

이제는 템플릿에 맞게 데이터를 구성합니다. title, description, image, url 을 웹 링크 컨텐츠에 맞게 설정하고, 각 플랫폼 별 레이아웃에 맞게 컨텐츠를 동적으로 렌더링하여 보여주게 됩니다.

그런데 이런 말이 있습니다. Open Graph를 설정하면, SEO(search engine optimization, 검색 엔진 최적화)에 도움이 된다고 합니다.

왜 도움이 될까요?

Open Graph가 SEO에 영향이 가는 이유는?

실제로 직접적인 영향은 제한적이지만, 간접적으로 상당히 중요한 역할을 한다고 합니다.

직접적인 영향이 제한된다는 것은 구글의 검색엔진이 있죠? 그 검색엔진이 OG 태그를 직접 SEO 랭킹 기준으로 삼지 않는다는 것이에요.

그런데 왜 SEO에 도움이 된다고하는 것일까요?

그 이유는 간접적으로 상당히 중요한 역할을 하기 때문입니다.

우선, OG 설정으로 링크 공유 시, 클릭율을 높일 수 있습니다. 이는 SEO에 긍정적 신호라고 볼 수 있습니다. 왜냐하면, 클릭율(CTR, Click-through rate)은 검색 엔진이 “어? 이 컨텐츠는 유용한데?” 라고 판단하고 지표가 되기 때문입니다. 즉, 랭킹 개선에 긍정적으로 영향을 끼칩니다.

그래서 OG 설정이 SEO에 어떻게 영향이 가는 지 대충 알아봤습니다.

그러면 실제 적용하기 위해서는 어떻게 해볼 수 있을까요?

Next.js 에서 어떻게 OG 메타태그를 서버사이드 렌더링(SSR, Server Side Rendering)으로 구성하는 지 알아보려고 합니다.

Next.js에서 메타 태그를 SSR 으로 구성하는 방법

우선 저는 Next.js 버전은 15로 설정하고 시작합니다.

메타데이터는 정적/동적 할당하는 2가지의 방법이 존재합니다. 저는 공유 랜딩페이지의 컨텐츠를 OG 메타 태그 데이터에 넣어서 링크 공유 시, 컨텐츠를 미리보기로 노출시키고 싶었습니다.

링크는 아래와 같습니다.

https://exmaple.com/share/ABC

그리고 저는 디렉토리 구조는 아래와 같이 진행해서 앱 라우터(App Router) 방식으로 동적 라우팅 처리를 했습니다.

app
└─ share
   └─ [token]
      ├─ layout.tsx
      ├─ page.tsx
      └─ ...

코드는 아래와 같습니다.

// layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
      {children}
    </ThemeProvider>
  )
}

// page.tsx

// 라우트 세그먼트에서 받는 Props 타입 정의
type Props = {
  params: { token: string }
  searchParams?: { [key: string]: string | string[] | undefined }
}

// 동적으로 메타데이터 생성
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { token } = params.token

  const res = await fetch(`${process.env.API_URL}/share?token=${token}`)

  const json = await res.json()
  const meeting: MeetingData = json.data
  return {
    title: meeting.meetingNote.title,
    openGraph: {
      description: meeting.meetingNote.summary,
      images: meeting.meetingNote.moodImageUrl,
      locale: `ko_KR`
    }
  }
}

// 실제 컴포넌트
export default async function SharePage({ params }: Props) {
	const { token } = params.token
}

* 주의할 부분이 있습니다.

버전마다 로직 부분이 다를 수 있으므로, Next.js 15인지 확인하고 참고해주세요. 다른 버전이라면 공식문서를 참고해주시기 바랍니다! ☺️

또한, Next.js 환경에서는 서버 사이드 렌더링을 하기 때문에 API 서버를 스프링 부트를 사용하거나 다른 서버를 사용한 경우에는 해당 API 호출을 위해서 포트를 잘 확인해주세요! (이를 같은 네트워크에서 웹 서버를 띄울 경우에 Next.js 로 시작된 노드 서버를 인식할 수 있기 때문입니다.)

그래서 위처럼 추가할 경우에 아래처럼 잘 컨텐츠를 미리볼 수 있는 것을 알 수 있습니다.

(아래 내용은 실제 개발한 웹 사이트 OG 미리보기 형식입니다.)