Open Graph
Open Graph는 웹 페이지가 페이스북·링크드인·슬랙 등 소셜 플랫폼에 공유될 때 미리보기(제목·이미지·설명)가 어떻게 표시될지 제어하는 메타 태그 프로토콜입니다. og:title, og:image 같은 <meta property> 태그로 페이지의 공유 카드를 명시적으로 지정합니다.
- Open Graph는 페이지가 소셜에 공유될 때의 미리보기 카드(제목·이미지·설명)를 제어하는 메타 태그 프로토콜로, 2010년 페이스북이 ogp.me에 공개했습니다.
- 필수 4종은 og:title, og:type, og:image, og:url이며, og:description·og:site_name·og:locale을 함께 쓰면 카드 품질이 올라갑니다.
- og:image 권장 규격은 1200×630px(1.91:1 비율)로, 페이스북·X·링크드인·슬랙·디스코드 등 대부분 플랫폼에서 잘리지 않고 표시됩니다.
- Open Graph 태그 자체는 구글의 직접 순위 요소가 아니지만, 공유 클릭률(CTR)을 끌어올려 브랜드 트래픽과 체류 시간을 늘리는 간접 SEO 효과가 있습니다.
- 태그를 수정한 뒤에는 페이스북 공유 디버거(Sharing Debugger)로 캐시를 강제 갱신해야 새 미리보기가 반영됩니다.
개요
Open Graph는 웹 페이지를 소셜 그래프 안의 하나의 객체로 표현하기 위해 페이스북이 2010년 공개한 메타데이터 프로토콜입니다. 페이지 <head> 안에 <meta property="og:.."> 형태의 태그를 넣으면, 그 링크가 소셜 플랫폼에 공유될 때 어떤 제목·이미지·설명으로 보일지를 작성자가 직접 지정할 수 있습니다. 태그가 없으면 플랫폼이 본문에서 임의로 추출하기 때문에, 의도와 다른 이미지나 잘린 문구가 노출되는 경우가 많습니다.
표준 문서(ogp.me)는 네임스페이스로 https://ogp.me/ns#를 사용하며, property 속성과 content 값으로 구성됩니다. 페이스북·링크드인·슬랙·디스코드·카카오톡 등 다수 플랫폼이 이 프로토콜을 그대로 따르며, X(트위터)는 Twitter Cards를 우선 참조하되 해당 태그가 없으면 Open Graph 값으로 대체(fallback)합니다.
필수 및 권장 태그
| 태그 | 구분 | 역할 |
|---|---|---|
| og:title | 필수 | 공유 카드에 표시될 제목 |
| og:type | 필수 | 객체 유형(예: website, article, video.movie) |
| og:image | 필수 | 미리보기 이미지 URL(권장 1200×630px) |
| og:url | 필수 | 객체의 영구 식별자가 되는 정규(canonical) URL |
| og:description | 권장 | 1~2문장 설명 |
| og:site_name | 권장 | 전체 사이트 이름 |
| og:locale | 권장 | language_TERRITORY 형식의 로케일(예: ko_KR) |
| og:image:width / height / alt | 선택 | 이미지 크기·대체 텍스트 명시(첫 공유 시 렌더링 안정화) |
마크업 예시
아래는 ogp.me 표준 구문을 따른 기본 구현 예시입니다. <html> 태그에 prefix를 선언하고, 필수 4종에 설명·이미지 메타데이터를 함께 지정합니다.
<html prefix="og: https://ogp.me/ns#">
<head>
<meta property="og:title" content="검색 OS 용어집" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/glossary/open-graph" />
<meta property="og:image" content="https://example.com/og/open-graph.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:description" content="Open Graph 메타 태그로 소셜 공유 미리보기를 제어하는 방법." />
<meta property="og:site_name" content="검색 OS" />
<meta property="og:locale" content="ko_KR" />
</head>이미지 권장 규격
업계 가이드에 따르면 단일 og:image를 쓸 경우 1200×630px(1.91:1 비율)이 페이스북·X·링크드인·슬랙·디스코드 등에서 잘림 없이 표시되는 사실상의 표준입니다. JPG 또는 PNG로 저장하고 핵심 문구·얼굴은 중앙 안전 영역 안에 배치하는 편이 안전합니다. 페이스북 공식 문서는 정확한 픽셀 수치를 규정하지 않지만, 첫 공유 시 이미지가 올바르게 렌더링되도록 width·height를 명시할 것을 권장합니다.
근거 및 SEO 간접 효과
Open Graph 태그는 구글의 직접적인 순위 요소가 아니며, 태그를 추가한다고 검색 순위가 곧바로 오르지는 않습니다. 다만 간접 효과가 분명합니다. 업계 분석에 따르면 잘 설정된 미리보기는 맨 URL 대비 공유 링크의 클릭률을 끌어올리는 것으로 보고되며, 늘어난 클릭은 브랜드 검색량·재방문·체류 시간 증가로 이어져 구글이 권위 신호로 해석하는 지표에 긍정적으로 작용합니다(출처: NoGood, Ahrefs 계열 SEO 가이드, env.dev). 또한 GPTBot·ClaudeBot·PerplexityBot 등 AI 크롤러가 og:title·og:description·article:modified_time를 페이지 요약·인용 판단에 참조한다는 분석도 있어, GEO 관점에서도 의미가 있습니다.
캐시 갱신 주의
페이스북은 OG 데이터를 URL 기준으로 캐시하므로, 태그를 수정해도 같은 URL이면 미리보기가 즉시 바뀌지 않습니다. 변경 후에는 페이스북 공유 디버거(Sharing Debugger)로 페이지를 다시 스크랩(scrape)해 캐시를 강제 갱신해야 합니다. 같은 도구로 어떤 태그가 인식되는지, 누락·오류가 없는지도 점검할 수 있습니다.