Open Graph 메타 태그 완벽 가이드: 소셜 미디어 공유 최적화

hanlee📅2026년 2월 1일

🏷️HTML Open Graph meta 태그 SEO 소셜 미디어 최적화 웹 개발

Facebook, LinkedIn, KakaoTalk 등 소셜 미디어에서 링크 공유 시 표시되는 Open Graph 메타 태그 사용법을 상세히 알아봅니다.

Open Graph 메타 태그 완벽 가이드

Open Graph(OG) 프로토콜은 Facebook에서 개발한 메타데이터 표준으로, 소셜 미디어에서 링크 공유 시 표시되는 정보를 제어합니다. 현재 Facebook, LinkedIn, KakaoTalk, Discord 등 대부분의 소셜 플랫폼에서 지원합니다.

Open Graph란?

Open Graph 프로토콜을 사용하면 웹페이지가 소셜 그래프에서 풍부한 객체가 됩니다. 링크를 공유할 때 제목, 설명, 이미지가 카드 형태로 표시되어 클릭률을 높일 수 있습니다.

html
<!-- Open Graph 태그는 property 속성을 사용합니다 -->
<meta property="og:title" content="페이지 제목">

참고: 일반 메타 태그는 name 속성을, Open Graph는 property 속성을 사용합니다.

필수 OG 태그

모든 페이지에 포함해야 하는 기본 Open Graph 태그입니다.

html
<!-- 콘텐츠 유형 -->
<meta property="og:type" content="website">
<!-- 페이지 제목 -->
<meta property="og:title" content="Open Graph 메타 태그 완전 가이드">
<!-- 페이지 설명 -->
<meta property="og:description" content="소셜 미디어에서 링크 공유 시 표시되는 정보를 제어하는 Open Graph 태그 사용법을 알아봅니다.">
<!-- 페이지 URL (중복 방지용 정규 URL) -->
<meta property="og:url" content="https://example.com/html-guide/meta/opengraph">
<!-- 미리보기 이미지 -->
<meta property="og:image" content="https://example.com/images/og-preview.jpg">

권장 추가 태그

html
<!-- 사이트 이름 -->
<meta property="og:site_name" content="HTML 가이드">
<!-- 언어/지역 설정 -->
<meta property="og:locale" content="ko_KR">
<!-- 이미지 크기 (로딩 최적화) -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- 이미지 대체 텍스트 (접근성) -->
<meta property="og:image:alt" content="Open Graph 태그 가이드 미리보기 이미지">

og:type 값

콘텐츠 유형에 따라 적절한 type을 선택하세요.

값	설명	사용 예
`website`	일반 웹사이트	홈페이지, 랜딩 페이지
`article`	기사/블로그	블로그 포스트, 뉴스 기사
`product`	제품	쇼핑몰 상품 페이지
`video.movie`	영화	영화 정보 페이지
`video.episode`	TV 에피소드	TV 프로그램
`music.song`	음악	음원 페이지
`music.album`	음악 앨범	앨범 페이지
`profile`	프로필	사용자 프로필 페이지
`book`	책	도서 정보 페이지

type 선택 가이드

블로그/뉴스 사이트: 메인 페이지는 website, 개별 글은 article
쇼핑몰: 메인 페이지는 website, 상품 페이지는 product
포트폴리오: website 또는 profile

article 타입 전용 태그

블로그나 뉴스 기사에 사용하는 추가 메타데이터입니다.

html
<meta property="og:type" content="article">
<!-- 발행일 (ISO 8601 형식) -->
<meta property="article:published_time" content="2024-01-15T09:00:00+09:00">
<!-- 수정일 -->
<meta property="article:modified_time" content="2024-01-20T14:30:00+09:00">
<!-- 만료일 (선택적) -->
<meta property="article:expiration_time" content="2025-01-15T09:00:00+09:00">
<!-- 저자 프로필 URL -->
<meta property="article:author" content="https://example.com/author/htmlguide">
<!-- 섹션/카테고리 -->
<meta property="article:section" content="Technology">
<!-- 태그 (여러 개 가능) -->
<meta property="article:tag" content="Open Graph">
<meta property="article:tag" content="Meta Tags">
<meta property="article:tag" content="Social Media">

날짜 형식 (ISO 8601)

code-highlight

YYYY-MM-DDTHH:MM:SS+TZ
예: 2024-01-15T09:00:00+09:00 (한국 시간)

이미지 최적화

플랫폼별 권장 이미지 크기

플랫폼	권장 크기	비율	최소 크기
Facebook	1200 x 630px	1.91:1	600 x 315px
LinkedIn	1200 x 627px	1.91:1	1200 x 627px
Twitter	1200 x 628px	1.91:1	300 x 157px
KakaoTalk	800 x 400px	2:1	200 x 200px
Discord	1200 x 630px	1.91:1	-

이미지 가이드라인

html
<!-- 기본 이미지 -->
<meta property="og:image" content="https://example.com/images/og-image.jpg">
<!-- 고해상도 디스플레이용 (선택적) -->
<meta property="og:image" content="https://example.com/images/og-image-2x.jpg">
<!-- 이미지 메타데이터 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="이미지 설명">

이미지 체크리스트

크기: 1200 x 630px 권장
비율: 1.91:1 유지
용량: 8MB 이하 (Facebook 제한)
형식: JPG, PNG, GIF, WebP
HTTPS: 반드시 HTTPS URL 사용
캐시: 이미지 URL이 변경되면 캐시 무효화 필요

팁: 이미지 URL에 버전 파라미터를 추가하면 캐시 문제를 해결할 수 있습니다. 예: og-image.jpg?v=2

플랫폼별 미리보기

Facebook 미리보기

code-highlight

┌─────────────────────────────────────────┐
│                                         │
│          [og:image 이미지]              │
│          1200 x 630px                   │
│                                         │
├─────────────────────────────────────────┤
│ EXAMPLE.COM                             │
│ og:title - 페이지 제목                  │
│ og:description - 페이지 설명 텍스트가   │
│ 이 영역에 표시됩니다...                  │
└─────────────────────────────────────────┘

LinkedIn 미리보기

LinkedIn은 Facebook과 유사하지만 제목이 더 짧게 표시됩니다.

제목: 최대 70자 권장
설명: 최대 100자 표시
이미지: 1200 x 627px 권장

KakaoTalk 미리보기

카카오톡은 이미지 비율이 다르므로 별도 이미지 준비를 권장합니다.

html
<!-- 카카오톡 전용 이미지 (선택적) -->
<meta property="og:image" content="https://example.com/images/kakao-preview.jpg">

실무 템플릿

웹사이트 메인 페이지

html
<!DOCTYPE html>
<html lang="ko">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>사이트 이름 - 슬로건</title>
    <meta name="description" content="사이트 설명">
    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="사이트 이름 - 슬로건">
    <meta property="og:description" content="사이트 설명 (150자 이내)">
    <meta property="og:url" content="https://example.com">
    <meta property="og:image" content="https://example.com/og-main.jpg">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:site_name" content="사이트 이름">
    <meta property="og:locale" content="ko_KR">
    <!-- 콘텐츠 -->

블로그 포스트

html
<!DOCTYPE html>
<html lang="ko">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글 제목 | 블로그 이름</title>
    <meta name="description" content="글 요약">
    <!-- Open Graph - Article -->
    <meta property="og:type" content="article">
    <meta property="og:title" content="글 제목">
    <meta property="og:description" content="글 요약 (150자 이내)">
    <meta property="og:url" content="https://example.com/blog/post-slug">
    <meta property="og:image" content="https://example.com/blog/post-image.jpg">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:site_name" content="블로그 이름">
    <meta property="og:locale" content="ko_KR">
    <!-- Article 전용 -->
    <meta property="article:published_time" content="2024-01-15T09:00:00+09:00">
    <meta property="article:modified_time" content="2024-01-20T14:30:00+09:00">
    <meta property="article:author" content="https://example.com/author/name">
    <meta property="article:section" content="Technology">
    <meta property="article:tag" content="HTML">
    <meta property="article:tag" content="SEO">
    <!-- 콘텐츠 -->

상품 페이지

html
<!-- Open Graph - Product -->
<meta property="og:type" content="product">
<meta property="og:title" content="상품명">
<meta property="og:description" content="상품 설명">
<meta property="og:url" content="https://example.com/products/item-id">
<meta property="og:image" content="https://example.com/products/item-image.jpg">
<!-- 상품 정보 (Schema.org 연동 권장) -->
<meta property="product:price:amount" content="29900">
<meta property="product:price:currency" content="KRW">

디버깅 도구

OG 태그가 올바르게 설정되었는지 확인하는 공식 도구들입니다.

URL: developers.facebook.com/tools/debug
기능:
- OG 태그 미리보기
- 오류/경고 표시
- 캐시 새로고침 (Scrape Again 버튼)

LinkedIn Post Inspector

URL: linkedin.com/post-inspector
기능:
- LinkedIn 미리보기
- 메타데이터 검증

Kakao 공유 디버거

URL: developers.kakao.com/tool/debugger/sharing
기능:
- 카카오톡 미리보기
- 캐시 초기화

기타 도구

Twitter Card Validator: cards-dev.twitter.com/validator
Open Graph Preview: opengraph.xyz
메타 태그 생성기: metatags.io

자주 발생하는 문제

1. 이미지가 표시되지 않음

html
<!-- 문제: 상대 경로 사용 -->
<meta property="og:image" content="/images/og.jpg">
<!-- 해결: 절대 URL 사용 -->
<meta property="og:image" content="https://example.com/images/og.jpg">

2. 이전 정보가 계속 표시됨

소셜 미디어는 OG 정보를 캐시합니다. 디버거 도구에서 캐시를 새로고침하세요.

3. 이미지 비율이 맞지 않음

각 플랫폼에 맞는 이미지 비율(1.91:1)을 사용하세요.

4. 한글이 깨짐

html
<!-- charset을 먼저 선언 -->
<meta charset="UTF-8">
<!-- 그 다음 OG 태그 -->
<meta property="og:title" content="한글 제목">

Open Graph 메타 태그 완벽 가이드: 소셜 미디어 공유 최적화

Open Graph 메타 태그 완벽 가이드

목차

Open Graph란?

필수 OG 태그

권장 추가 태그

og:type 값

type 선택 가이드

article 타입 전용 태그

날짜 형식 (ISO 8601)

이미지 최적화

플랫폼별 권장 이미지 크기

이미지 가이드라인

이미지 체크리스트

플랫폼별 미리보기

Facebook 미리보기

LinkedIn 미리보기

KakaoTalk 미리보기

실무 템플릿

웹사이트 메인 페이지

블로그 포스트

상품 페이지

디버깅 도구

LinkedIn Post Inspector

Kakao 공유 디버거

기타 도구

자주 발생하는 문제

1. 이미지가 표시되지 않음

2. 이전 정보가 계속 표시됨

3. 이미지 비율이 맞지 않음

4. 한글이 깨짐

참고 자료

Open Graph 메타 태그 완벽 가이드

목차

Open Graph란?

필수 OG 태그

권장 추가 태그

og:type 값

type 선택 가이드

article 타입 전용 태그

날짜 형식 (ISO 8601)

이미지 최적화

플랫폼별 권장 이미지 크기

이미지 가이드라인

이미지 체크리스트

플랫폼별 미리보기

Facebook 미리보기

LinkedIn 미리보기

KakaoTalk 미리보기

실무 템플릿

웹사이트 메인 페이지

블로그 포스트

상품 페이지

디버깅 도구

Facebook Sharing Debugger

LinkedIn Post Inspector

Kakao 공유 디버거

기타 도구

자주 발생하는 문제

1. 이미지가 표시되지 않음

2. 이전 정보가 계속 표시됨

3. 이미지 비율이 맞지 않음

4. 한글이 깨짐

참고 자료