Open Graph란 무엇인가?

Open Graph는 웹 페이지가 소셜 미디어 사이트에 링크되었을 때, 제목, 설명, 이미지와 같이 특정한 정보를 보여주는 데 사용되는 HTML 메타 태그들의 집합입니다.

이를 통해 사이트 소유자는 자신의 콘텐츠가 소셜 미디어 상에서 어떻게 표현될지를 더 잘 제어할 수 있습니다.

즉, Open Graph 메타 태그는 페이스북, 트위터와 같은 소셜 미디어 플랫폼에서 웹페이지의 내용을 미리 보기 형태로 잘 나타내기 위해 사용됩니다.

Open Graph의 주요 메타 태그와 그 예시

일반적으로 사용되는 Open Graph 메타 태그에는 다음과 같은 것들이 있습니다.

og:title: 콘텐츠의 제목
og:type: 콘텐츠의 유형 (예: website, video.movie)
og:image: 콘텐츠를 대표하는 이미지 URL
og:url: 콘텐츠가 위치한 웹 페이지의 정확한 URL
og:description: 콘텐츠의 간략한 설명

예를 들어, 아래와 같이 HTML 문서 내 <head> 섹션에 Open Graph 메타 태그를 추가할 수 있습니다.

index.html

<head>
    <meta property="og:title" content="Open Graph 소개" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="https://example.com/thumbnail.jpg" />
    <meta property="og:url" content="https://example.com/page.html" />
    <meta property="og:description" content="Open Graph 프로토콜을 이용해 소셜 미디어에서의 콘텐츠 표시 방법을 개선합니다." />
</head>

이렇게 설정된 메타 태그는, 예를 들어 페이스북 같은 소셜 미디어 플랫폼에 해당 페이지가 공유될 때 해당 정보를 사용하여 미리보기를 생성합니다.

Open Graph의 중요성

Open Graph의 사용은 웹 페이지의 소셜 미디어 플랫폼상에서의 가시성과 클릭율을 향상시킬 수 있습니다.

적절한 이미지와 설명이 추가된 공유는 사용자의 주목을 끌기 더 쉽고, 그로 인해 더 많은 트래픽을 유도할 수 있습니다.

Nextjs에서의 Open Graph

Next.js 프로젝트에서 이를 구현하기 위해, 주로 <Head> 컴포넌트를 사용하여 특정 페이지의 <head> 섹션에 OG 메타 태그를 추가합니다.

<Head> 컴포넌트는 Next.js가 제공하는 헤드 관리를 위한 내장 컴포넌트입니다.

sample.jsx

import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <title>페이지 제목</title>
        <meta name="description" content="페이지 설명" />
        <meta property="og:title" content="공유될 때 나타날 제목" />
        <meta property="og:description" content="공유될 때 나타날 설명" />
        <meta property="og:image" content="공유될 이미지 URL" />
        <meta property="og:url" content="페이지 URL" />
        <meta property="og:type" content="website" />
      </Head>
      {/* 페이지 컨텐츠 */}
    </div>
  );
}