본문으로 건너뛰기

오픈 그래프(Open Graph)란?

image

정의​

오픈 그래프(Open Graph Protocol)는 페이스북이 2010년에 개발한 메타데이터 프로토콜로, 웹페이지가 소셜 미디어에서 공유될 때 어떻게 표시될지를 제어하는 기술입니다. 쉽게 말해, 여러분이 블로그 링크를 페이스북, 카카오톡, 링크드인 등에 공유할 때 나타나는 제목, 설명, 이미지를 미리 정의하는 HTML 메타 태그입니다.

오픈 그래프를 사용하면 웹페이지를 소셜 미디어의 '객체(Object)'로 만들 수 있습니다. 예를 들어, 블로그 글을 공유했을 때 그냥 URL만 보이는 것이 아니라, 매력적인 썸네일 이미지와 함께 제목, 요약 설명이 카드 형태로 예쁘게 표시됩니다. 이는 클릭률을 크게 높이며, 소셜 미디어 마케팅의 핵심 요소가 되었습니다.

오픈 그래프는 <head> 섹션에 <meta property="og:xxx"> 형식의 태그로 구현됩니다. 페이스북에서 시작되었지만 현재는 트위터(X), 링크드인, 슬랙, 카카오톡, 라인 등 대부분의 소셜 플랫폼에서 표준으로 채택하여 사용하고 있습니다. 오픈 그래프가 없다면 소셜 플랫폼은 페이지의 콘텐츠를 임의로 추출하게 되어, 의도하지 않은 이미지나 텍스트가 표시될 수 있습니다.

특징​

  • 소셜 미디어 최적화: 링크 공유 시 제목, 설명, 이미지를 정확히 제어하여 클릭률을 크게 향상시킵니다. 연구에 따르면 오픈 그래프 이미지가 있는 링크는 최대 200% 높은 참여도를 보입니다.
  • 표준 프로토콜: 페이스북이 개발했지만 현재는 거의 모든 소셜 플랫폼에서 지원하는 사실상의 업계 표준입니다. 한 번 설정하면 여러 플랫폼에서 활용됩니다.
  • 간단한 구현: HTML <head> 섹션에 메타 태그만 추가하면 되므로 기술적으로 복잡하지 않습니다. 프로그래밍 지식이 없어도 누구나 쉽게 적용할 수 있습니다.
  • 디버깅 도구 제공: 페이스북, 링크드인 등은 오픈 그래프 태그를 테스트하고 미리보기할 수 있는 공식 디버깅 도구를 제공합니다.
  • 검색엔진에도 유용: 오픈 그래프 정보는 검색엔진도 참고하므로 SEO에도 간접적으로 도움이 됩니다. 특히 이미지 검색 최적화에 효과적입니다.

활용 방법​

오픈 그래프를 효과적으로 활용하는 방법은 다음과 같습니다.

1단계: 필수 오픈 그래프 태그 추가 웹페이지의 <head> 섹션에 기본적인 오픈 그래프 태그를 추가합니다. 최소한 og:title, og:type, og:url, og:image 네 가지는 반드시 포함해야 합니다. 이것들이 오픈 그래프의 핵심 4대 요소입니다.

<head>
  <meta property="og:title" content="블로그 SEO 최적화 완벽 가이드">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://zero-coke.com/blog/seo-guide">
  <meta property="og:image" content="https://zero-coke.com/images/seo-thumbnail.jpg">
</head>

2단계: 선택적 태그 추가 더 풍부한 정보를 제공하기 위해 설명, 사이트 이름, 로케일 등을 추가합니다. og:description은 특히 중요하며, 클릭을 유도하는 매력적인 설명을 작성해야 합니다.

<meta property="og:description" content="초보자도 쉽게 따라할 수 있는 블로그 SEO 최적화 방법을 단계별로 알려드립니다.">
<meta property="og:site_name" content="Zero-Coke 블로그">
<meta property="og:locale" content="ko_KR">

3단계: 이미지 최적화 오픈 그래프에서 가장 중요한 것은 이미지입니다. 썸네일 이미지는 첫인상을 결정하므로 신중하게 선택해야 합니다. 페이스북은 1200x630px 크기를 권장하며, 최소 600x314px 이상이어야 합니다. 파일 크기는 8MB 이하로 유지하세요.

<meta property="og:image" content="https://zero-coke.com/images/thumbnail.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="SEO 최적화 가이드 썸네일">

4단계: 콘텐츠 타입별 추가 태그 블로그 글(article)의 경우 작성자, 발행일, 섹션 등의 추가 정보를 제공할 수 있습니다. 이는 뉴스 피드에서 더 풍부한 정보를 표시하는 데 도움이 됩니다.

<meta property="article:author" content="김철수">
<meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="블로그">
<meta property="article:tag" content="SEO">

5단계: 디버깅 및 테스트 태그를 추가한 후에는 반드시 테스트해야 합니다. 페이스북 공유 디버거(https://developers.facebook.com/tools/debug/)에 URL을 입력하면 오픈 그래프가 어떻게 표시되는지 미리 볼 수 있습니다. 오류가 있으면 즉시 수정하세요.

6단계: 캐시 갱신 이미 공유된 URL의 오픈 그래프를 변경했다면, 소셜 플랫폼의 캐시를 갱신해야 합니다. 페이스북 공유 디버거에서 "Scrape Again" 버튼을 클릭하면 최신 정보로 업데이트됩니다. 각 플랫폼마다 비슷한 도구를 제공합니다.

예시​

예시 1: 블로그 글의 기본 오픈 그래프

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>백링크란? SEO 초보자 가이드</title>

  <!-- 기본 오픈 그래프 태그 -->
  <meta property="og:title" content="백링크란? SEO 초보자를 위한 완벽 가이드">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://zero-coke.com/blog/what-is-backlink">
  <meta property="og:image" content="https://zero-coke.com/img/backlink-guide.jpg">
  <meta property="og:description" content="백링크의 정의와 중요성, 획득 방법까지 초보자도 쉽게 이해할 수 있도록 설명합니다.">
  <meta property="og:site_name" content="Zero-Coke">
  <meta property="og:locale" content="ko_KR">

  <!-- 아티클 관련 추가 태그 -->
  <meta property="article:author" content="김철수">
  <meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
  <meta property="article:modified_time" content="2024-03-23T14:30:00+09:00">
  <meta property="article:section" content="SEO">
  <meta property="article:tag" content="백링크">
  <meta property="article:tag" content="SEO">
  <meta property="article:tag" content="검색엔진최적화">
</head>
<body>
  <!-- 페이지 콘텐츠 -->
</body>
</html>

예시 2: 이미지 최적화가 포함된 오픈 그래프

<head>
  <!-- 기본 정보 -->
  <meta property="og:title" content="2024년 디지털 마케팅 트렌드">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/marketing-trends-2024">

  <!-- 상세한 이미지 정보 -->
  <meta property="og:image" content="https://example.com/images/marketing-trends-main.jpg">
  <meta property="og:image:secure_url" content="https://example.com/images/marketing-trends-main.jpg">
  <meta property="og:image:type" content="image/jpeg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="2024년 디지털 마케팅 트렌드 인포그래픽">

  <!-- 여러 이미지 제공 (플랫폼이 선택) -->
  <meta property="og:image" content="https://example.com/images/marketing-trends-square.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="1200">

  <!-- 추가 정보 -->
  <meta property="og:description" content="AI, 인플루언서 마케팅, 숏폼 콘텐츠 등 2024년 주목해야 할 디지털 마케팅 트렌드를 분석합니다.">
  <meta property="og:site_name" content="마케팅 인사이트">
</head>

예시 3: 전자상거래 제품 페이지

<head>
  <!-- 제품 기본 정보 -->
  <meta property="og:title" content="프리미엄 무선 블루투스 이어폰 - XYZ-2000">
  <meta property="og:type" content="product">
  <meta property="og:url" content="https://shop.example.com/products/xyz-2000">
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-main.jpg">
  <meta property="og:description" content="노이즈 캔슬링 기능이 탑재된 고품질 무선 이어폰. 최대 30시간 재생 가능.">

  <!-- 제품 특화 정보 -->
  <meta property="product:price:amount" content="129000">
  <meta property="product:price:currency" content="KRW">
  <meta property="product:availability" content="in stock">
  <meta property="product:condition" content="new">
  <meta property="product:brand" content="TechSound">
  <meta property="product:retailer_item_id" content="XYZ2000-BLK">

  <!-- 추가 이미지 -->
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-side.jpg">
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-case.jpg">
</head>

예시 4: 동영상 콘텐츠

<head>
  <!-- 동영상 기본 정보 -->
  <meta property="og:title" content="블로그 수익화 완벽 가이드 (2024년 최신)">
  <meta property="og:type" content="video.other">
  <meta property="og:url" content="https://example.com/video/blog-monetization">
  <meta property="og:image" content="https://example.com/video/thumbnails/blog-monetization.jpg">
  <meta property="og:description" content="블로그로 월 100만원 벌기. 애드센스, 제휴 마케팅, 디지털 제품 판매까지 모든 방법을 알려드립니다.">

  <!-- 동영상 특화 정보 -->
  <meta property="og:video" content="https://example.com/video/blog-monetization.mp4">
  <meta property="og:video:secure_url" content="https://example.com/video/blog-monetization.mp4">
  <meta property="og:video:type" content="video/mp4">
  <meta property="og:video:width" content="1280">
  <meta property="og:video:height" content="720">
  <meta property="video:duration" content="1200">
  <meta property="video:release_date" content="2024-03-23T09:00:00+09:00">

  <!-- YouTube 임베드 URL -->
  <meta property="og:video" content="https://www.youtube.com/embed/abc123xyz">
  <meta property="og:video:type" content="text/html">
</head>

예시 5: 웹사이트 홈페이지

<head>
  <!-- 웹사이트 전체 정보 -->
  <meta property="og:title" content="Zero-Coke - 블로그 SEO 최적화 전문 미디어">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://zero-coke.com">
  <meta property="og:image" content="https://zero-coke.com/images/og-homepage.jpg">
  <meta property="og:description" content="블로그 SEO, 검색엔진 최적화, 웹 개발에 대한 전문 지식을 공유합니다. 초보자부터 전문가까지 모두를 위한 실용적인 가이드.">
  <meta property="og:site_name" content="Zero-Coke">
  <meta property="og:locale" content="ko_KR">
  <meta property="og:locale:alternate" content="en_US">

  <!-- 소셜 미디어 프로필 -->
  <meta property="og:see_also" content="https://twitter.com/zerocoke">
  <meta property="og:see_also" content="https://www.facebook.com/zerocoke">
  <meta property="og:see_also" content="https://www.instagram.com/zerocoke">
</head>

장단점​

장점​

  • 클릭률 대폭 향상: 매력적인 썸네일과 설명이 포함된 링크는 텍스트만 있는 링크보다 클릭률이 2-3배 높습니다. 소셜 미디어 트래픽을 늘리는 가장 효과적인 방법입니다.

  • 브랜드 이미지 강화: 일관된 오픈 그래프 이미지와 설명을 사용하면 전문적이고 신뢰할 수 있는 브랜드 이미지를 구축할 수 있습니다. 잘 디자인된 썸네일은 브랜드 인지도를 높입니다.

  • 범용성과 호환성: 한 번 설정하면 페이스북, 트위터, 링크드인, 카카오톡, 슬랙 등 대부분의 플랫폼에서 자동으로 적용됩니다. 플랫폼마다 별도로 설정할 필요가 없습니다.

단점​

  • 이미지 제작 부담: 각 페이지마다 적절한 오픈 그래프 이미지를 제작해야 하므로 디자인 리소스가 필요합니다. 특히 블로그 글이 많다면 상당한 작업량이 될 수 있습니다.

  • 캐시 문제: 소셜 플랫폼은 오픈 그래프 정보를 캐싱하므로, 변경사항이 즉시 반영되지 않습니다. 수동으로 캐시를 갱신해야 하며, 이미 공유된 링크는 업데이트되지 않을 수 있습니다.

  • 플랫폼별 차이: 대부분의 플랫폼이 오픈 그래프를 지원하지만, 일부는 자체 태그를 선호합니다. 예를 들어 트위터는 Twitter Card를 우선 사용하므로, 완벽한 최적화를 위해서는 추가 작업이 필요할 수 있습니다.

FAQ​

Q: 오픈 그래프가 없으면 어떻게 되나요? A: 오픈 그래프 태그가 없어도 링크 공유는 가능하지만, 소셜 플랫폼이 페이지에서 정보를 임의로 추출합니다. 이 경우 의도하지 않은 이미지나 텍스트가 표시될 수 있으며, 썸네일이 아예 나타나지 않을 수도 있습니다. 결과적으로 클릭률이 크게 낮아집니다.

Q: 오픈 그래프 이미지의 최적 크기는? A: 페이스북은 1200x630px(비율 1.91:1)을 권장합니다. 최소 크기는 600x314px이며, 이보다 작으면 품질이 저하됩니다. 정사각형 이미지(1200x1200px)도 함께 제공하면 다양한 플랫폼에서 더 잘 표시됩니다. 파일 크기는 8MB 이하, 형식은 JPG 또는 PNG가 좋습니다.

Q: og:title과 HTML title 태그의 차이는? A: HTML <title> 태그는 브라우저 탭과 검색 결과에 표시되는 제목이고, og:title은 소셜 미디어에서 공유될 때 표시되는 제목입니다. 두 가지는 같을 수도 있지만, 소셜 미디어에서는 더 짧고 강렬한 제목을 사용하는 것이 효과적일 수 있습니다. 예: <title>은 "백링크란? 정의, 특징, 획득 방법 완벽 가이드 | Zero-Coke", og:title은 "백링크로 블로그 순위 올리는 법"

Q: 오픈 그래프를 수정했는데 변경이 안 됩니다. 어떻게 하나요? A: 소셜 플랫폼은 성능 향상을 위해 오픈 그래프 정보를 캐싱합니다. 페이스북 공유 디버거(https://developers.facebook.com/tools/debug/)에서 "Scrape Again" 버튼을 클릭하여 캐시를 갱신하세요. 링크드인은 Post Inspector(https://www.linkedin.com/post-inspector/), 트위터는 Card Validator를 사용할 수 있습니다. 이미 공유된 게시물은 업데이트되지 않으므로, 중요한 변경이라면 재공유가 필요할 수 있습니다.