생성 및 미리보기 Open Graph 메타 태그

✅ OpenGraph 테스터는 한 곳에서 클릭 한 번으로 메타 태그를 미리보고 생성할 수 있습니다

시도: https://opengraph.dev
에 적용 Facebook, Whatsapp, Twitter, LinkedIn, Wordpress...
Hero Image

Open Graph 태그로 웹사이트 최적화

Open Graph 프로토콜이 소셜 미디어 공유를 어떻게 향상시키는지 알아보기

Open Graph (OG)란 무엇인가요?

Open Graph 프로토콜(Often called OGP)은 웹사이트의 컨텐츠가 소셜 네트워크에 어떻게 나타나는지를 정의하는 데 중요합니다. Open Graph 태그를 구현하면 콘텐츠가 온라인으로 공유될 때 특정 이미지, 제목 및 설명이 표시됩니다.

최적의 오픈 그래프 이미지 크기

고해상도 장치에 대한 영향을 극대화하려면 최소 1200픽셀 너비의 Open Graph 이미지를 사용하세요. 소셜 미디어 분야의 리더인 Facebook은 피드에서 이미지를 자르지 않고 전체 이미지를 표시하기 위해 1.91:1 비율의 이미지를 권장합니다.

Open Graph 태그의 쉬운 통합

OpenGraph.dev와 같은 도구를 사용하여 Open Graph 태그를 쉽게 통합하세요. 메타 태그를 웹사이트의 'head' 섹션에 생성하여 삽입함으로써 사이트의 소셜 미디어 가시성을 향상시킵니다.

SEO에서 Open Graph의 중요성

최적화된 Open Graph 태그는 소셜 미디어에서 콘텐츠가 주목 받고 클릭될 가능성을 크게 높여, 사이트로의 트래픽을 증가시킵니다. 이들은 붐비는 소셜 미디어 피드에서 콘텐츠가 돋보이게 하는 데 필수적입니다.

Open Graph 태그란 무엇인가요?

Open Graph 태그는 웹 페이지의 <head> 내부에 배치되는 HTML <meta> 요소로, URL이 다른 곳(Facebook 피드, X 게시물, LinkedIn 업데이트, WhatsApp 채팅, Discord 서버, iMessage 스레드 또는 Slack 채널 등)에서 공유될 때 페이지가 어떻게 표시되어야 하는지를 설명합니다. Open Graph 프로토콜은 2010년 Facebook에 의해 처음 도입되었으며, 그 이후로 거의 모든 주요 플랫폼에서 링크 미리보기의 사실상 표준이 되었습니다. 완전한 Open Graph 메타 태그 세트는 리치 미리보기 카드 안에 표시되는 제목, 설명, 이미지, 유형 및 표준 URL에 대한 완전한 제어권을 제공하여, 평범한 하이퍼링크를 클릭률에서 일반 링크를 일관되게 능가하는 시선을 끄는 스니펫으로 바꿔줍니다.

Open Graph 메타 태그의 최소 실용 세트 

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, compelling summary of the page." />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta property="og:locale" content="en_US" />

소셜 플랫폼 전반의 Open Graph

거의 모든 주요 소셜 네트워크와 메신저는 Open Graph 메타데이터를 읽지만, 각각 이미지 크기, 캐싱, 대체 방안에 대한 자체 규칙을 적용합니다. 가장 엄격한 요구사항을 충족하면 동일한 이미지 세트가 모든 곳에서 작동합니다.

Facebook

Open Graph 데이터의 최대 소비자입니다. og:title, og:description, og:image를 사용합니다. 권장 이미지는 1200×630 픽셀이며 1.91:1 비율로 뉴스피드에서 잘림 없이 표시됩니다. 캐시가 적극적이므로 변경 후에는 Sharing Debugger를 사용해 새로고침하세요.

X (Twitter)

Twitter Card 메타가 없을 때 Open Graph 태그로 폴백하지만, 큰 미리보기 카드를 얻으려면 twitter:card를 summary_large_image로 설정하고 twitter:image도 선언해야 합니다. 이미지는 5 MB 미만이고 최소 300×157 픽셀이어야 합니다. 1200×630이 안전한 기본값입니다.

LinkedIn

og:title, og:description, og:image, og:type를 읽습니다. 이미지는 5 MB 미만, 최소 1200×627 픽셀(비율 1.91:1)이어야 합니다. LinkedIn은 첫 크롤을 약 7일간 캐시하므로 변경 사항 게시 후 Post Inspector로 재가져오기를 강제하세요.

WhatsApp & iMessage

두 메신저 모두 HTTPS로 Open Graph 태그를 가져오며 이미지 크기에 엄격한 한도가 있습니다. WhatsApp은 약 300 KB를 초과하는 것을 잘라내므로, 이미지를 최적화하고 렌더링을 빠르게 하기 위해 og:image:width와 og:image:height를 선언하세요. iMessage는 가능할 때 1:1 정사각형 이미지를 선호하므로 여러 og:image 태그를 통해 두 비율을 모두 제공하는 것을 고려하세요.

Discord, Slack & Telegram

세 플랫폼 모두 표준 og:title, og:description, og:image 3종 세트로 미리보기를 렌더링합니다. Discord는 사이드바 강조에 theme-color도 적용합니다. Telegram은 iframe과 JS를 제거하므로, 태그가 런타임에 주입되지 않고 초기 서버 렌더링 HTML에 포함되어 있는지 확인하세요.

Pinterest & Reddit

Pinterest는 article:author와 Rich Pin 유형으로 Open Graph를 확장합니다. Reddit는 링크가 제출되면 og:title와 og:image를 가져와 이미지를 게시물 썸네일로 사용합니다. 둘 다 1.91:1 와이드 배너보다 세로 또는 정사각형 이미지(2:3에서 1:1)를 선호합니다.

프레임워크에 Open Graph 메타 태그 추가

이 스니펫을 프로젝트에 추가하여 가장 일반적인 스택에서 Open Graph 태그를 연결하세요. 각 예시는 서버에서 동일한 최소 실용 세트를 렌더링하므로 크롤러가 첫 페인트에서 이를 볼 수 있습니다.

Next.js (App Router)

ts
// app/page.tsx
export const metadata = {
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A short, compelling summary of the page.',
    url: 'https://example.com/article',
    siteName: 'Example',
    images: [{ url: 'https://example.com/preview.png', width: 1200, height: 630 }],
    locale: 'en_US',
    type: 'website'
  }
}

Nuxt 3

ts
<script setup lang="ts">
useSeoMeta({
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  ogTitle: 'Your Page Title',
  ogDescription: 'A short, compelling summary of the page.',
  ogImage: 'https://example.com/preview.png',
  ogUrl: 'https://example.com/article',
  ogType: 'website',
  ogLocale: 'en_US'
})
</script>

Astro

astro
---
const { title, description, image, url } = Astro.props
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
  <meta property="og:url" content={url} />
  <meta property="og:type" content="website" />
</head>

WordPress

php
// functions.php — works without an SEO plugin
add_action('wp_head', function () {
  if (!is_singular()) return;
  global $post;
  $img = get_the_post_thumbnail_url($post->ID, 'full') ?: '';
  printf('<meta property="og:title" content="%s" />', esc_attr(get_the_title($post)));
  printf('<meta property="og:description" content="%s" />', esc_attr(wp_trim_words($post->post_excerpt ?: $post->post_content, 30)));
  printf('<meta property="og:image" content="%s" />', esc_url($img));
  printf('<meta property="og:url" content="%s" />', esc_url(get_permalink($post)));
  echo '<meta property="og:type" content="article" />';
});

Open Graph에 대한 자주 묻는 질문

개발자와 콘텐츠 팀이 Open Graph 메타 태그를 구현할 때 가장 자주 묻는 질문에 대한 빠른 답변입니다.

Open Graph 태그가 SEO에 도움이 되나요?
Open Graph 태그는 Google 검색의 직접적인 순위 신호는 아니지만 간접적인 SEO 결과를 의미 있게 향상시킵니다. 보기 좋은 미리보기는 더 높은 클릭률, 더 많은 공유, 더 많은 인바운드 링크를 가져오며 이 모든 것이 순위에 반영됩니다. 또한 크롤러에게 페이지의 제목, 이미지, 언어를 명확히 알려 Google이 관련 없는 썸네일을 선택하거나 자체 스니펫을 생성할 가능성을 줄입니다.
Open Graph와 Twitter Cards의 차이점은 무엇인가요?
Open Graph는 플랫폼 간 표준입니다. Twitter Cards는 X의 병렬 형식으로 자체 twitter:* 네임스페이스를 가집니다. X는 Twitter 전용 태그가 없을 때 Open Graph로 폴백하므로, 대부분의 사이트에서는 Open Graph와 단일 twitter:card 선언을 게시하면 큰 이미지 미리보기를 사용할 수 있습니다.
권장되는 Open Graph 이미지 크기는 얼마인가요?
1200×630 픽셀(비율 1.91:1)이 안전한 기본값입니다. Facebook, LinkedIn, X 대형 카드, Slack, Discord를 자르지 않고 모두 충족합니다. WhatsApp과 iMessage가 가져올 수 있도록 파일을 1 MB 미만으로 유지하세요. Pinterest 중심 청중이라면 1000×1500 세로 이미지를 추가로 제공하세요.
이미지를 변경한 후에도 미리보기에 이전 이미지가 표시되는 이유는 무엇인가요?
모든 주요 플랫폼은 Open Graph 데이터를 캐시합니다. Facebook, LinkedIn, X는 각각 다른 주기로 새로고침됩니다(몇 분에서 일주일까지). Facebook의 Sharing Debugger, LinkedIn의 Post Inspector, X의 Card Validator를 사용해 재스크랩을 강제하고, 같은 URL로 이미지를 교체할 때는 og:image에 캐시 무효화 쿼리 문자열을 추가하세요.
단일 페이지 앱(SPA)은 Open Graph를 위해 서버 측 렌더링이 필요한가요?
거의 모든 소셜 플랫폼에서 그렇습니다. WhatsApp, LinkedIn, Slack, Discord, Telegram은 URL을 크롤링할 때 JavaScript를 실행하지 않으므로 클라이언트에서만 렌더링된 메타 태그는 보이지 않습니다. SSR(Next.js, Nuxt, Astro), 정적 생성 또는 전용 사전 렌더링 서비스를 사용하여 태그가 초기 HTML 응답에 포함되도록 하세요.
페이지에 Open Graph 태그가 전혀 없으면 어떻게 되나요?
플랫폼은 가져올 수 있는 것에 의존합니다: <title>, meta description, 그리고 문서에서 처음 발견하는 큰 이미지입니다. 결과는 예측할 수 없습니다 — 종종 잘못된 이미지, 잘린 제목 또는 미리보기 없음으로 나타납니다. 세 개의 태그(og:title, og:description, og:image)만 추가해도 추측이 필요 없어집니다.
Open Graph 태그 이름은 대소문자를 구분하나요?
예. 프로토콜이 정의한 대로 정확히 소문자를 사용하세요 — og:title이며, OG:Title이 아닙니다. 대소문자가 혼합된 속성 이름은 대부분의 크롤러가 조용히 무시하므로, 리팩토링 후 미리보기가 갑자기 작동하지 않는 가장 흔한 원인 중 하나입니다.
Open Graph 태그를 디버깅하려면 어떤 도구를 사용할 수 있나요?
OpenGraph.dev의 미리보기 외에도, 각 플랫폼은 자체 유효성 검사 도구를 제공합니다: Facebook Sharing Debugger(developers.facebook.com/tools/debug), LinkedIn Post Inspector(linkedin.com/post-inspector), developer.x.com의 X Cards 문서, Pinterest Rich Pins Validator, 그리고 캐시를 지우기 위한 Telegram의 @WebpageBot.