Open Graph(og 태그)로 SNS 공유 최적화하기 - 검색/SEO 기초

블로그나 웹사이트의 글을 SNS(페이스북, 카카오톡, 트위터 등)에 공유할 때, 제목, 이미지, 설명이 제대로 표시되지 않은 경험이 있을까? 또는 내가 설정한 이미지가 아니라 엉뚱한 이미지가 나타난 적은? 이런 문제는 대부분 "Open Graph" 메타 태그가 제대로 설정되지 않아서다.

Open Graph는 페이스북이 개발한 프로토콜로, 웹 페이지의 정보를 SNS에 공유할 때 어떻게 표시할지 정의하는 것이다. 단순해 보이지만, 제대로 설정하면 SNS 클릭률을 크게 높일 수 있다. 특히 마케팅이 중요한 요즘 시대에 Open Graph 최적화는 거의 필수다. 이번 글에서는 Open Graph가 뭔지, 어떻게 설정하는지, 그리고 실제 효과를 측정하는 방법까지 완벽하게 정리해서 소개하겠다.

Open Graph가 왜 필요한가

웹 페이지를 SNS에 공유할 때를 생각해보자.

사용자: "이 링크 공유해야지"
링크 복사 → 페이스북/카카오톡 붙여넣기

SNS에 표시되는 것:
✗ 설정 안 함: 제목 없음, 이미지 없음, 설명 불명확
✓ Open Graph 설정: 멋진 제목, 좋은 이미지, 명확한 설명

차이가 크다! Open Graph가 설정되지 않으면 사람들이 그 링크를 클릭할 가능성이 훨씬 낮아진다.

Open Graph 기본 메타 태그

HTML의 <head> 섹션에 다음 메타 태그들을 추가하면 된다:

<head>
  <!-- 기본 필수 태그 -->
  <meta property="og:title" content="글의 제목" />
  <meta property="og:description" content="글의 설명 (150자 이내 권장)" />
  <meta property="og:image" content="https://example.com/image.jpg" />
  <meta property="og:url" content="https://example.com/article" />
  
  <!-- 콘텐츠 타입 (기본값: website) -->
  <meta property="og:type" content="website" />
  
  <!-- 선택사항 -->
  <meta property="og:site_name" content="사이트명" />
</head>

각 태그의 의미:

og:title - SNS에 표시될 제목 (60자 이내)
og:description - SNS에 표시될 설명 (150~160자)
og:image - SNS에 표시될 이미지 (1200x630px 권장)
og:url - 공유되는 페이지의 URL (정확한 주소)
og:type - 콘텐츠 타입 (website, article, video 등)
og:site_name - 웹사이트 이름

실제 구현 예제

1. 블로그 포스트 예제 (PHP)

<?php
// 데이터베이스에서 글 정보 조회
$article = array(
   'title' => '웹 성능 최적화 완벽 가이드',
   'description' => '웹사이트 속도를 2배 빠르게 하는 방법을 소개합니다. 이미지 최적화부터 캐싱까지 모든 것을 다룹니다.',
   'image' => 'https://example.com/images/optimization.jpg',
   'url' => 'https://example.com/articles/web-performance',
   'author' => '홍길동',
   'published_date' => '2024-01-15'
);
?>

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8" />
   <title><?php echo $article['title']; ?></title>
   
   <!-- Open Graph -->
   <meta property="og:title" content="<?php echo $article['title']; ?>" />
   <meta property="og:description" content="<?php echo $article['description']; ?>" />
   <meta property="og:image" content="<?php echo $article['image']; ?>" />
   <meta property="og:url" content="<?php echo $article['url']; ?>" />
   <meta property="og:type" content="article" />
   <meta property="og:site_name" content="개발 블로그" />
   <meta property="article:author" content="<?php echo $article['author']; ?>" />
   <meta property="article:published_time" content="<?php echo $article['published_date']; ?>T00:00:00+09:00" />
</head>
<body>
   <h1><?php echo $article['title']; ?></h1>
   <img src="<?php echo $article['image']; ?>" />
   <p><?php echo $article['description']; ?></p>
</body>
</html>

2. tinyMCE 에디터에서 동적 생성 (JavaScript)

// 글 저장 시 메타 태그 자동 생성
function generateOpenGraphMeta(title, description, imageUrl) {
   var metaTags = '';
   
   metaTags += '<meta property="og:title" content="' + escapeHtml(title) + '" />n';
   metaTags += '<meta property="og:description" content="' + escapeHtml(description) + '" />n';
   metaTags += '<meta property="og:image" content="' + imageUrl + '" />n';
   metaTags += '<meta property="og:url" content="' + window.location.href + '" />n';
   metaTags += '<meta property="og:type" content="article" />n';
   
   return metaTags;
}

// XSS 방지
function escapeHtml(text) {
   var map = {
      '&': '&',
      '<': '<',
      '>': '>',
      '"': '"',
      "'": '''
   };
   return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

og:image 최적화

이미지는 Open Graph에서 가장 중요한 요소다. SNS 클릭률의 대부분은 이미지 품질에 달려있다.

이미지 가이드:

크기: 1200 x 630px (페이스북 권장)
파일 크기: 100KB 이하 (로딩 속도)
포맷: JPG 또는 PNG
여러 이미지: 최대 5개까지 등록 가능
주의: 절대 경로 사용 (https://...)

여러 이미지 설정 (선택 사항):

<meta property="og:image" content="https://example.com/images/main.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<meta property="og:image" content="https://example.com/images/alt1.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Twitter Card (트위터 최적화)

트위터는 og 태그가 아니라 twitter:card 메타 태그를 사용한다.

<!-- 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/image.jpg" />
<meta name="twitter:creator" content="@twitter_username" />

twitter:card 타입:

summary: 작은 이미지 (기본)
summary_large_image: 큰 이미지 (권장)
player: 비디오/오디오 플레이어
app: 앱 다운로드

카카오톡 커스텀 (Kakao)

카카오톡도 og 태그를 기본으로 사용하지만, 추가 설정으로 최적화 가능:

<meta property="og:title" content="글의 제목" />
<meta property="og:description" content="글의 설명" />
<meta property="og:image" content="https://example.com/image.jpg" />

<!-- 카카오 추가 메타 데이터 -->
<meta property="article:author" content="작성자명" />
<meta property="article:published_time" content="2024-01-15T00:00:00+09:00" />

Open Graph 검증 도구

설정 후 실제로 제대로 작동하는지 확인해야 한다.

1. Facebook Sharing Debugger

https://developers.facebook.com/tools/debug/sharing/

당신의 URL을 입력 → 미리보기 확인
- 제목, 설명, 이미지가 제대로 표시되는지 확인
- 캐시 새로고침 옵션도 있음

2. 직접 확인 (개발자 도구)

# 웹 페이지 소스 보기
curl https://example.com/article | grep og:

# 결과:
# <meta property="og:title" content="..." />
# <meta property="og:description" content="..." />
# <meta property="og:image" content="..." />

흔한 실수

실수 1: 상대 경로 사용

✗ 잘못됨
<meta property="og:image" content="/images/photo.jpg" />

✓ 올바름
<meta property="og:image" content="https://example.com/images/photo.jpg" />

실수 2: 동적 데이터 미반영

✗ 잘못됨
<meta property="og:title" content="글의 제목" />  // 고정값

✓ 올바름 (PHP)
<meta property="og:title" content="<?php echo $article['title']; ?>" />

실수 3: 이미지 사이즈 무시

✗ 잘못됨: 너무 작은 이미지
<meta property="og:image" content="https://example.com/tiny.jpg" />  // 200x150px

✓ 올바름
<meta property="og:image" content="https://example.com/proper.jpg" />  // 1200x630px

실수 4: 특수문자 이스케이프 처리 미흡

✗ 잘못됨
<meta property="og:description" content="<?php echo $desc; ?>" />

✓ 올바름
<meta property="og:description" content="<?php echo htmlspecialchars($desc, ENT_QUOTES, 'UTF-8'); ?>" />

SEO 효과

Open Graph는 직접적인 SEO 순위에는 영향을 주지 않지만, **간접적으로 매우 중요하다:**

클릭률 증가: 좋은 이미지와 설명으로 SNS 클릭률 ↑
트래픽 증가: SNS 클릭 → 웹사이트 방문 ↑
체류 시간: 좋은 콘텐츠는 체류 시간 ↑
소셜 신호: SNS 공유 많음 → 검색 엔진에 긍정 신호

Open Graph는 SEO의 필수 요소는 아니지만, 사용자 경험과 웹 트래픽 증대 측면에서 매우 중요하다. 특히 SNS 마케팅이 중요한 요즘 시대에는 거의 필수적이라고 봐도 된다. 이 글의 예제를 참고해 당신의 웹사이트에 Open Graph를 적용하면, SNS 공유 시 훨씬 더 나은 결과를 볼 수 있을 것이다.