OG태그 설정 방법 완벽 가이드 (Open Graph 메타태그)

OG태그(Open Graph 태그)는 웹 페이지를 소셜 미디어에 공유할 때 표시되는 제목, 설명, 이미지를 제어하는 메타태그입니다. 이 가이드에서는 OG태그의 개념부터 Facebook, X(Twitter), LinkedIn, 카카오톡에서의 설정 방법과 확인 도구까지 단계별로 정리합니다.

OG태그란?

OG태그(Open Graph Protocol)는 2010년 Facebook이 개발한 메타데이터 표준입니다. 웹 페이지의 URL을 소셜 미디어에 공유하면, 해당 페이지의 OG태그 정보를 기반으로 제목, 설명, 이미지가 포함된 링크 미리보기(Link Preview)가 생성됩니다.

OG태그가 없으면 소셜 미디어 플랫폼이 페이지 본문에서 임의로 정보를 추출합니다. 이 경우 의도하지 않은 이미지나 불완전한 텍스트가 노출될 수 있습니다.

📌 용어 설명: 링크 미리보기(Link Preview)

카카오톡, Facebook, Slack 등에서 URL을 공유했을 때 자동으로 표시되는 썸네일 이미지, 제목, 설명으로 구성된 카드형 미리보기입니다. OG태그가 이 미리보기의 내용을 결정합니다.

OG태그 필수 속성

Open Graph 공식 프로토콜(ogp.me)에 따르면, 모든 페이지에 최소 4개의 OG 속성을 포함해야 합니다.

속성 설명 예시
og:title 공유 시 표시되는 제목 SSL 인증서란? 개념부터 종류까지 정리
og:type 콘텐츠 유형 website, article
og:image 공유 시 표시되는 대표 이미지 URL https://example.com/og-image.jpg
og:url 해당 페이지의 대표 URL https://example.com/ssl-guide

권장 추가 속성

속성 설명 비고
og:description 공유 시 표시되는 설명문 미설정 시 meta description 또는 본문에서 추출
og:site_name 사이트 이름 웹닷, 네이버 등
og:locale 콘텐츠 언어 ko_KR (한국어의 경우)
og:image:width 이미지 가로 크기(px) 1200 권장
og:image:height 이미지 세로 크기(px) 630 권장
og:image:alt 이미지 대체 텍스트 접근성을 위해 반드시 설정 권장

OG태그 작성 방법

HTML 직접 작성

OG태그는 HTML의 <head> 영역에 property 속성을 사용하여 작성합니다. 일반 메타태그의 name 속성이 아닌 property 속성을 사용하는 점에 주의하세요.

<head>
  <meta property="og:title" content="SSL 인증서란? 개념부터 종류까지 정리">
  <meta property="og:description" content="SSL 인증서의 개념, 종류(DV/OV/EV), 발급 방법을 정리한 가이드입니다.">
  <meta property="og:image" content="https://example.com/images/ssl-guide-og.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="SSL 인증서 종류 비교 인포그래픽">
  <meta property="og:url" content="https://example.com/guide/ssl-certificate">
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="웹닷 가이드센터">
  <meta property="og:locale" content="ko_KR">
</head>

⚠️ 주의

og:image의 URL은 반드시 절대 경로(https://로 시작하는 전체 URL)를 사용해야 합니다. 상대 경로(/images/og.jpg)를 사용하면 일부 플랫폼에서 이미지가 표시되지 않습니다.

X(Twitter) 카드 태그

X(구 Twitter)는 OG태그를 폴백(fallback)으로 지원하지만, 자체 Twitter Card 태그를 우선 사용합니다.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="SSL 인증서란? 개념부터 종류까지 정리">
<meta name="twitter:description" content="SSL 인증서 개념, 종류, 발급 방법 가이드">
<meta name="twitter:image" content="https://example.com/images/ssl-guide-og.jpg">

twitter:card의 값은 summary_large_image(대형 이미지 카드)가 가장 많이 사용됩니다. OG태그와 Twitter Card 태그를 모두 설정하면 모든 플랫폼에서 안정적으로 미리보기가 표시됩니다.

카카오톡 링크 미리보기

카카오톡은 OG태그를 기반으로 링크 미리보기를 생성합니다. 별도의 카카오 전용 태그는 필요하지 않으며, OG태그가 올바르게 설정되어 있으면 카카오톡에서도 정상적으로 표시됩니다.

카카오톡에서 이전에 캐시된 미리보기를 초기화하려면 카카오 개발자 도구의 “캐시 초기화” 기능을 사용합니다. (developers.kakao.com/tool/clear/og)

OG태그 확인 및 디버깅 도구

플랫폼 도구 URL
Facebook / Instagram Facebook 공유 디버거 developers.facebook.com/tools/debug
X (Twitter) Twitter Card Validator cards-dev.twitter.com/validator
LinkedIn LinkedIn Post Inspector linkedin.com/post-inspector
카카오톡 카카오 OG 캐시 초기화 developers.kakao.com/tool/clear/og
종합 확인 ogpreview.app / metatags.io ogpreview.app / metatags.io

💡 실무 팁

OG태그를 수정한 후에도 소셜 미디어에 이전 미리보기가 표시되는 경우가 많습니다. 이는 각 플랫폼이 OG 정보를 캐시하기 때문입니다. 위의 디버깅 도구에서 URL을 다시 스크래핑(Scrape Again)하면 캐시가 갱신됩니다.

정리

  • OG태그는 소셜 미디어 링크 미리보기의 제목, 설명, 이미지를 제어하는 메타태그입니다.
  • 필수 속성은 og:title, og:type, og:image, og:url 4가지이며, og:description과 og:image:alt도 함께 설정하는 것을 권장합니다.
  • og:image는 1200 × 630px 크기의 이미지를 절대 경로 URL로 설정합니다.
  • 수정 후에는 Facebook 공유 디버거, 카카오 캐시 초기화 도구로 반드시 확인합니다.
이전 가이드 SEO 메타태그 가이드: 검색 순위에 실제로 영향을 주는 태그 정리
다음 가이드 OG태그 이미지 사이즈 가이드: 플랫폼별 권장 크기 총정리

이 주제에 대해 전문 상담이 필요하신가요?

웹닷이 최적의 솔루션을 제안해드립니다.

무료 상담 문의하기
개발가이드