오픈 그래프 (Open Graph)

정의

오픈 그래프(Open Graph, OG) 프로토콜은 웹 페이지를 SNS, 메신저, AI 답변 플랫폼에 공유할 때 표시되는 미리보기 카드를 제어하는 메타 태그 표준이다.

Facebook이 2010년에 도입했으며 현재는 사실상 업계 표준이 되었다. HTML <head> 태그 내에 property="og:..." 형식의 메타 태그를 추가하면 Facebook, Twitter(X), LinkedIn, 카카오톡, 슬랙, 디스코드 등 대부분의 공유 플랫폼에서 일관된 미리보기를 표시할 수 있다.

공식 스펙: https://ogp.me/

요약

오픈 그래프 필수 4개 태그: og:title, og:description, og:image(1200×630px, 절대 URL), og:url. 선택 태그로 og:type을 추가한다. 모든 페이지에 고유하게 설정하고, Facebook Sharing Debugger로 캐시를 주기적으로 갱신한다. 구글 SEO 직접 영향은 없으나 소셜 트래픽·CTR·브랜드 일관성에 큰 간접 영향을 준다.

오픈 그래프 핵심 태그 5가지

<meta property="og:title" content="페이지 제목 (60자 이내)" />
<meta property="og:description" content="페이지 설명 (100-150자)" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/page/" />
<meta property="og:type" content="article" />

og:title

공유 미리보기에 표시되는 제목이다. 타이틀 태그와 동일하게 설정해도 되지만, SNS 공유를 위해 더 클릭 유도적인 문구로 별도 설정할 수 있다. 60자 이내가 권장된다. 자세히는 타이틀 태그 참조.

og:description

미리보기 카드 아래에 표시되는 설명이다. 메타 디스크립션과 동일하게 설정해도 되고 SNS 특화 문구로 별도 설정할 수도 있다. 100–150자가 권장된다. 자세히는 메타 디스크립션 참조.

og:image

미리보기 카드에서 가장 시각적으로 중요한 요소다. 반드시 절대 URL(https://...)을 사용해야 한다. 권장 크기는 1200×630px(가로:세로 = 약 1.91:1 비율)이다. 너무 작은 이미지(600px 미만)는 일부 플랫폼에서 표시되지 않거나 품질이 낮아 보인다. 자세히는 이미지 alt 텍스트 작성법 참조.

og:url

페이지의 정식 URL을 명시한다. 카노니컬 태그와 일치시키는 것이 권장된다. 여러 URL에서 동일 콘텐츠에 접근할 수 있는 경우, og:url로 정식 URL을 명시해 소셜 공유가 한 URL로 집중되도록 한다. 자세히는 카노니컬 태그 참조.

og:type

페이지 유형을 명시한다. 주요 값: website(기본), article(블로그 포스트/뉴스), product(제품), video.movie, music.song.

Twitter Card 추가 설정

Twitter(X)는 OG 태그에 폴백(fallback)을 지원하지만, Twitter Card 전용 태그를 함께 추가하면 더 정확한 미리보기를 제어할 수 있다.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="페이지 제목" />
<meta name="twitter:description" content="페이지 설명" />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
<meta name="twitter:site" content="@계정명" />

twitter:card 값: summary(작은 카드), summary_large_image(큰 이미지 카드, 권장), app(앱 카드). OG 태그만 있고 Twitter Card 태그가 없으면 Twitter가 자동으로 OG 값을 폴백으로 사용한다.

오픈 그래프의 5가지 가치

1. SNS 공유 미리보기 제어

og:image·og:title·og:description이 없으면 플랫폼이 자의적으로 이미지와 텍스트를 선택해 보여준다. 매력적이지 않은 미리보기는 공유 및 클릭을 저해한다.

2. 카카오톡·슬랙·디스코드 미리보기

현재 웹 공유의 상당 부분은 SNS보다 메신저를 통해 이루어진다. 카카오톡, 슬랙, 디스코드 모두 OG 태그를 기반으로 미리보기 카드를 생성한다.

3. CTR 간접 향상

매력적인 og:image와 명확한 og:title은 공유 시 클릭 의도를 높인다. SNS 유입 트래픽 증가 → 소셜 시그널 → 장기적 도메인 권위 향상의 경로가 있다. 자세히는 클릭률 참조.

4. 브랜드 일관성

모든 채널에서 동일한 이미지와 메시지가 표시되어 브랜드 인지도를 강화한다.

5. Google Discover 및 AI 플랫폼 미리보기

Google Discover 피드와 일부 AI 답변 플랫폼(Perplexity 등)은 OG 정보를 출처 미리보기에 활용한다. 자세히는 구글 디스커버 참조.

오픈 그래프 작성 5가지 원칙

원칙 1: og:image는 1200×630px 절대 URL

Facebook·LinkedIn·Slack 공식 권장 크기다. 절대 URL(https://)을 사용해야 하며, 상대 URL(/og-image.jpg)은 일부 플랫폼에서 인식하지 못한다.

원칙 2: og:title 60자 이내

대부분의 플랫폼이 60–70자를 초과하면 제목을 잘라낸다.

원칙 3: og:description 100–150자

지나치게 길면 플랫폼이 자르거나 표시하지 않는다.

원칙 4: og:url과 canonical 일치

og:url이 카노니컬과 다르면 소셜 공유 통계가 분산된다. 반드시 정식 URL로 일치시킨다.

원칙 5: 모든 페이지에 고유 OG 설정

홈페이지와 동일한 OG 이미지·제목이 모든 하위 페이지에 표시되면 콘텐츠 차별화가 되지 않는다. CMS의 자동 생성 기능(예: Next.js의 동적 og:image 생성)을 활용해 페이지마다 고유하게 설정한다.

오픈 그래프 검증 도구

Facebook Sharing Debugger

developers.facebook.com/tools/debug/에서 URL을 입력하면 OG 태그를 즉시 미리보기할 수 있다. 이미지를 업데이트한 후 캐시가 남아 있다면 "Scrape Again" 버튼으로 강제 갱신할 수 있다.

LinkedIn Post Inspector

linkedin.com/post-inspector/에서 LinkedIn 공유 미리보기를 확인하고 캐시를 갱신할 수 있다.

OpenGraph.xyz

무료 OG 태그 검증 사이트로, URL을 입력하면 각 플랫폼에서 어떻게 보이는지 미리볼 수 있다.

오픈 그래프 흔한 실수 4가지

실수 1: og:image 누락

가장 흔한 실수다. og:image가 없으면 플랫폼이 회색 빈 영역 또는 임의의 이미지를 표시한다. 시각적 매력이 없어 클릭률이 크게 낮아진다.

실수 2: og:image에 상대 URL 사용

실수 3: 모든 페이지에 동일한 OG 정보

홈페이지의 OG 태그를 모든 페이지에 그대로 사용하는 경우다. 개별 페이지의 콘텐츠를 반영한 고유 제목·설명·이미지를 사용해야 한다.

실수 4: 이미지 변경 후 캐시 갱신 안 함

SNS 플랫폼은 OG 이미지를 캐싱한다. 이미지를 업데이트해도 이전 이미지가 계속 표시된다면 Facebook Sharing Debugger·LinkedIn Post Inspector에서 "Scrape Again"으로 강제 갱신해야 한다.

오픈 그래프와 AEO

AI 답변 플랫폼에서의 활용

Perplexity 같은 AI 검색 플랫폼은 출처 링크를 표시할 때 OG 이미지와 제목을 활용하는 경향이 있다. 매력적인 OG 정보는 AI 인용 출처 클릭을 유도하는 데 도움이 된다.

Google Discover 피드

Google Discover는 og:image를 콘텐츠 피드 미리보기 이미지로 사용한다. 매력적인 고품질 이미지(최소 1200px 가로)가 있는 페이지가 Discover 노출에 유리하다. 자세히는 구글 디스커버 참조.

한국 시장 적용

카카오톡 공유 최적화

한국 1위 메신저인 카카오톡은 OG 표준을 그대로 활용한다. 특이사항으로 카카오톡이 권장하는 og:image 비율은 1:1 또는 800×400px이지만, 표준 1200×630px도 문제없이 작동한다. 한국 비즈니스에서 카카오톡 공유는 주요 트래픽 소스이므로 OG 태그 최적화의 ROI가 높다.

네이버 카페·블로그 공유

네이버 카페와 블로그에서 외부 링크를 공유할 때도 OG 태그를 인식한다. 단, 네이버 자체 서비스는 별도의 메타 태그도 지원하므로 네이버 SEO 최적화에서는 OG 태그 외 추가 설정이 필요할 수 있다. 자세히는 URL 슬러그 참조.

라인 공유

일본·동남아에서 주로 사용하는 라인도 OG 표준을 지원한다. 한국 기업이 일본·태국 등 동남아 시장을 공략할 때 OG 최적화가 라인 공유 효과로 이어진다.

자주 묻는 질문

Q. 오픈 그래프 태그가 구글 검색 순위에 직접 영향을 주나요?
A. 구글은 OG 태그를 직접적인 랭킹 팩터로 사용하지 않는다고 공식적으로 밝혔다. 그러나 OG 태그를 통한 SNS 공유 증가 → 트래픽 증가 → 사용자 행동 시그널 개선 → 간접적 SEO 영향의 경로가 있다. Google Discover에서는 og:image 품질이 노출에 영향을 준다.

Q. og:title이 타이틀 태그와 달라도 되나요?
A. 가능하다. OG 태그는 SNS 공유를 위한 별도 최적화 레이어다. 타이틀 태그는 SEO·SERP 최적화, OG 태그는 소셜 공유 최적화에 각각 집중한다. 단, 너무 다르면 사용자가 혼란을 느낄 수 있으므로 핵심 메시지는 일관되게 유지한다.

Q. og:image를 적용했는데 카카오톡에서 이전 이미지가 계속 나와요.
A. SNS 플랫폼은 OG 이미지를 캐싱한다. 이미지를 변경한 경우 Facebook Sharing Debugger에서 "Scrape Again"을 실행하면 대부분의 플랫폼에서 새 이미지로 갱신된다. 카카오톡의 경우 캐시 만료 시간이 있어 자연 갱신에 시간이 걸릴 수 있다.

Q. Article 타입과 Website 타입 중 어느 것을 사용해야 하나요?
A. 홈페이지·카테고리 페이지에는 website, 블로그 포스트·뉴스 기사에는 article을 사용한다. article 타입에는 og:article:published_time, og:article:author 등 추가 속성을 함께 설정하면 일부 플랫폼에서 더 풍부한 정보를 표시한다.

Q. 이미지 없이 og:image만 설정하지 않으면 어떻게 되나요?
A. 플랫폼이 페이지 내에서 첫 번째 이미지를 자동으로 선택해 표시하거나, 이미지 없이 텍스트만 있는 카드를 표시한다. 이는 시각적으로 매력이 없어 클릭률을 크게 낮추므로, og:image 설정은 사실상 필수다.

정의

요약