Open Graph 태그

작성자

익명

작성일

2026.07.25

조회수

버전

Open Graph (오픈 그래프)

개요

Open Graph(오픈 그래프)는 웹 페이지의 메타데이터를 표준화하여, 소셜 미디어 플랫폼에 링크를 공유했을 때 해당 페이지의 핵심 정보를 요약된 미리보기(Preview) 형태로 표시하게 만드는 프로토콜입니다.

본래 페이스북(Facebook)에서 처음 제안한 표준이지만, 현재는 카카오톡, 슬랙(Slack), 링크드인(LinkedIn) 등 대부분의 소셜 플랫폼과 메신저에서 채택하여 사용하고 있습니다. 이를 통해 사용자는 링크를 클릭하기 전 콘텐츠의 제목, 설명, 대표 이미지를 미리 확인할 수 있어 클릭률(CTR) 향상과 사용자 경험 개선 효과를 얻을 수 있습니다.

작동 원리 및 구조

Open Graph는 HTML 문서의 <head> 섹션 내에 property 속성을 가진 <meta> 태그를 삽입하는 방식으로 작동합니다.

웹 페이지의 URL이 소셜 플랫폼에 입력되면, 해당 플랫폼의 크롤러(Crawler)(웹 페이지의 정보를 수집하는 봇)가 해당 URL에 접속하여 HTML 소스를 분석합니다. 이때 og: 접두사가 붙은 메타 태그를 찾아 그 값을 추출하고, 이를 기반으로 미리보기 카드를 생성합니다.

플랫폼별 지원 및 동작 방식 비교

플랫폼	지원 여부	동작 방식 및 특징
Facebook	표준 지원	OG 프로토콜의 창시자로, 가장 엄격한 표준을 따름
KakaoTalk	지원	`og:image`와 `og:title`을 중심으로 말풍선 형태의 카드 생성단에 요약 정보와 이미지를 포함한 언폴딩(Unfolding) 제공
LinkedIn	지원	비즈니스 프로필 중심의 정제된 미리보기 제공
Naver	지원	블로그 및 카페 공유 시 OG 태그를 우선적으로 참조하여 썸네일 생성

주요 프로퍼티 (Property)

가장 빈번하게 사용되는 핵심 프로퍼티 5가지는 다음과 같습니다.

og:title: 페이지의 제목입니다. 공유 시 가장 강조되어 표시되는 텍스트입니다.
og:type: 콘텐츠의 유형을 정의합니다.
- website: 일반적인 웹사이트 (기본값)
- article: 뉴스 기사, 블로그을거리
- video.movie: 영화 콘텐츠
- video.episode: 시리즈의 에피소드
- profile: 사람 또는 조직의 프로필
- book: 도서 정보
og:image: 미리보기에 표시될 대표 이미지의 절대 경로 URL입니다.
og:url: 페이지의 표준 URL(Canonical URL)입니다.
og:description: 페이지의 내용을 요약한 짧은 설명글입니다.

표준 구현 코드 예시

<head>
  <!-- 기본 메타 태그 -->
  <title>서비스 이름 - 메인 페이지</title>
  <meta name="description" content="서비스에 대한 상세 설명입니다.">

  <!-- Open Graph 메타 태그 -->
  <meta property="og:title" content="서비스 이름 - 혁신적인 웹 솔루션">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.example.com/">
  <meta property="og:image" content="https://www.example.com/images/og-image.png">
  <meta property="og:description" content="최고의 효율을 자랑하는 웹 솔루션을 지금 경험해보세요.">
  <meta property="og:site_name" content="Example Service"> <!-- 사이트 이름 -->
  <meta property="og:locale" content="ko_KR"> <!-- 언어 및 지역 설정 -->
</head>

트위터 카드 (Twitter Cards)

트위터(X)는 Open Graph 표준을 지원하지만, 자체적인 Twitter Cards라는 확장 규격을 가지고 있습니다. OG 태그가 설정되어 있다면 이를 기본적으로 사용하지만, 트위터 전용 태그를 추가하면 더 세밀한 제어가 가능합니다.

twitter:card: 카드의 형태를 결정합니다. (summary - 작은 이미지, summary_large_image - 큰 이미지)
twitter:site: 서비스의 공식 트위터 계정 아이디입니다.
twitter:creator: 콘텐츠 작성자의 트위터 계정 아이디입니다.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@example_official">
<meta name="twitter:title" content="서비스 이름 - 혁신적인 웹 솔루션">
<meta name="twitter:description" content="최고의 효율을 자랑하는 웹 솔루션을 지금 경험해보세요.">
<meta name="twitter:image" content="https://www.example.com/images/twitter-card.png">

고급 설정 및 최적화

플랫폼별 권장 이미지 크기

이미지 비율이 맞지 않을 경우 플랫폼에서 임의로 크롭(Crop)되어 중요한 정보가 잘릴 수 있습니다.

플랫폼	권장 크기 (px)	권장 비율	비고
Facebook	1200 x 630	1.91:1	고해상도 이미지 권장
KakaoTalk	800 x 400	2:1	가로형 이미지 최적화
Twitter	1200 x 628	1.91:1	`summary_large_image` 기준
Slack	1200 x 630	1.91:1	OG 표준 이미지 참조

💡 이미지 최적화 팁: - 용량 제한: 이미지 파일 용량이 너무 크면 크롤러가 수집을 무시하거나 로딩 시간이 길어져 미리보기가 표시되지 않을 수 있습니다. 가급적 5MB 이하로 최적화하는 것을 권장합니다. - 포맷: 대부분의 플랫폼에서 JPG, PNG, GIF를 지원하며, 웹 최적화를 위해 압축된 포맷을 사용하는 것이 좋습니다.

동적 OG 태그 생성 방식

블로그 포스트나 상품 상세 페이지처럼 페이지마다 내용이 다른 경우, 서버 사이드 렌더링(SSR)을 통해 동적으로 태그를 생성해야 합니다. 클라이언트 사이드 렌더링(CSR) 방식(React, Vue 등)은 크롤러가 JS를 실행하지 않는 경우가 많아 태그를 인식하지 못할 수 있습니다.

Next.js (React 기반 SSR) 예시:

// [id].js (상세 페이지)
export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return { props: { post } };
}

export default function Post({ post }) {
  return (
    <>
      <head>
        <title>{post.title}</title>
        <meta property="og:title" content={post.title} />
        <meta property="og:description" content={post.summary} />
        <meta property="og:image" content={post.thumbnailUrl} />
      </head>
      <div>{/* 페이지 본문 */}</div>
    </>
  );
}

검증 및 디버깅 도구

태그를 수정하더라도 플랫폼 서버에 기존 데이터가 캐싱(Caching)되어 있어 즉시 반영되지 않는 경우가 많습니다. 이때 디버거 도구를 사용하여 캐시를 강제로 갱신(Scrape again)해야 합니다.

플랫폼	디버거 도구 URL	주요 기능
Facebook	Sharing Debugger	미리보기 확인, 캐시 삭제 및 재수집
KakaoTalk	Kakao Developers	캐시 삭제 및 미리보기 렌더링 확인
Twitter (X)	X 게시물 작성 창	현재는 별도 밸리데이터보다 실제 게시물 작성 창에 URL을 입력하여 확인하는 방식이 가장 정확함

주의 사항 및 한계

절대 경로 사용: og:image와 og:url에는 /images/thumb.png와 같은 상대 경로가 아닌 https://example.com/images/thumb.png와 같은 절대 경로를 사용해야 합니다. 상대 경로 사용 시 크롤러가 이미지 위치를 찾지 못해 미리보기가 누락됩니다.
HTTPS 필수: 최근 대부분의 플랫폼은 보안상의 이유로 HTTPS 프로토콜을 사용하는 URL의 이미지만 정상적으로 렌더링합니다.
SEO와의 차이점:
- SEO (Search Engine Optimization): 구글, 네이버 등 검색 엔진의 검색 결과 순위를 높이기 위한 최적화로, <title>, <meta name="description"> 등을 사용합니다.
- Open Graph: 검색 순위보다는 소셜 공유 시의 시각적 전달력에 집중한 최적화입니다.
- 두 설정은 상호 보완적이며, 검색 엔진 또한 OG 태그를 참고하는 경우가 많으므로 함께 설정하는 것이 권장됩니다.

📝 마크다운 원본

이 문서의 마크다운 원본 내용입니다.

# Open Graph (오픈 그래프)

## 개요
**Open Graph(오픈 그래프)**는 웹 페이지의 메타데이터를 표준화하여, 소셜 미디어 플랫폼에 링크를 공유했을 때 해당 페이지의 핵심 정보를 요약된 미리보기(Preview) 형태로 표시하게 만드는 프로토콜입니다.

본래 페이스북(Facebook)에서 처음 제안한 표준이지만, 현재는 카카오톡, 슬랙(Slack), 링크드인(LinkedIn) 등 대부분의 소셜 플랫폼과 메신저에서 채택하여 사용하고 있습니다. 이를 통해 사용자는 링크를 클릭하기 전 콘텐츠의 제목, 설명, 대표 이미지를 미리 확인할 수 있어 클릭률(CTR) 향상과 사용자 경험 개선 효과를 얻을 수 있습니다.

## 작동 원리 및 구조
Open Graph는 HTML 문서의 `<head>` 섹션 내에 `property` 속성을 가진 `<meta>` 태그를 삽입하는 방식으로 작동합니다. 

웹 페이지의 URL이 소셜 플랫폼에 입력되면, 해당 플랫폼의 **크롤러(Crawler)**(웹 페이지의 정보를 수집하는 봇)가 해당 URL에 접속하여 HTML 소스를 분석합니다. 이때 `og:` 접두사가 붙은 메타 태그를 찾아 그 값을 추출하고, 이를 기반으로 미리보기 카드를 생성합니다.

### 플랫폼별 지원 및 동작 방식 비교
| 플랫폼 | 지원 여부 | 동작 방식 및 특징 |
| :--- | :---: | :--- |
| **Facebook** | 표준 지원 | OG 프로토콜의 창시자로, 가장 엄격한 표준을 따름 |
| **KakaoTalk** | 지원 | `og:image`와 `og:title`을 중심으로 말풍선 형태의 카드 생성단에 요약 정보와 이미지를 포함한 언폴딩(Unfolding) 제공 |
| **LinkedIn** | 지원 | 비즈니스 프로필 중심의 정제된 미리보기 제공 |
| **Naver** | 지원 | 블로그 및 카페 공유 시 OG 태그를 우선적으로 참조하여 썸네일 생성 |

## 주요 프로퍼티 (Property)
가장 빈번하게 사용되는 핵심 프로퍼티 5가지는 다음과 같습니다.

- `og:title`: 페이지의 제목입니다. 공유 시 가장 강조되어 표시되는 텍스트입니다.
- `og:type`: 콘텐츠의 유형을 정의합니다.
    - `website`: 일반적인 웹사이트 (기본값)
    - `article`: 뉴스 기사, 블로그을거리
    - `video.movie`: 영화 콘텐츠
    - `video.episode`: 시리즈의 에피소드
    - `profile`: 사람 또는 조직의 프로필
    - `book`: 도서 정보
- `og:image`: 미리보기에 표시될 대표 이미지의 절대 경로 URL입니다.
- `og:url`: 페이지의 표준 URL(Canonical URL)입니다.
- `og:description`: 페이지의 내용을 요약한 짧은 설명글입니다.

### 표준 구현 코드 예시
```html
<head>
  <!-- 기본 메타 태그 -->
  <title>서비스 이름 - 메인 페이지</title>
  <meta name="description" content="서비스에 대한 상세 설명입니다.">

  <!-- Open Graph 메타 태그 -->
  <meta property="og:title" content="서비스 이름 - 혁신적인 웹 솔루션">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.example.com/">
  <meta property="og:image" content="https://www.example.com/images/og-image.png">
  <meta property="og:description" content="최고의 효율을 자랑하는 웹 솔루션을 지금 경험해보세요.">
  <meta property="og:site_name" content="Example Service"> <!-- 사이트 이름 -->
  <meta property="og:locale" content="ko_KR"> <!-- 언어 및 지역 설정 -->
</head>
```

## 트위터 카드 (Twitter Cards)
트위터(X)는 Open Graph 표준을 지원하지만, 자체적인 **Twitter Cards**라는 확장 규격을 가지고 있습니다. OG 태그가 설정되어 있다면 이를 기본적으로 사용하지만, 트위터 전용 태그를 추가하면 더 세밀한 제어가 가능합니다.

- `twitter:card`: 카드의 형태를 결정합니다. (`summary` - 작은 이미지, `summary_large_image` - 큰 이미지)
- `twitter:site`: 서비스의 공식 트위터 계정 아이디입니다.
- `twitter:creator`: 콘텐츠 작성자의 트위터 계정 아이디입니다.

```html
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@example_official">
<meta name="twitter:title" content="서비스 이름 - 혁신적인 웹 솔루션">
<meta name="twitter:description" content="최고의 효율을 자랑하는 웹 솔루션을 지금 경험해보세요.">
<meta name="twitter:image" content="https://www.example.com/images/twitter-card.png">
```

## 고급 설정 및 최적화

### 플랫폼별 권장 이미지 크기
이미지 비율이 맞지 않을 경우 플랫폼에서 임의로 크롭(Crop)되어 중요한 정보가 잘릴 수 있습니다.

| 플랫폼 | 권장 크기 (px) | 권장 비율 | 비고 |
| :--- | :--- | :---: | :--- |
| **Facebook** | 1200 x 630 | 1.91:1 | 고해상도 이미지 권장 |
| **KakaoTalk** | 800 x 400 | 2:1 | 가로형 이미지 최적화 |
| **Twitter** | 1200 x 628 | 1.91:1 | `summary_large_image` 기준 |
| **Slack** | 1200 x 630 | 1.91:1 | OG 표준 이미지 참조 |

**💡 이미지 최적화 팁:**
- **용량 제한**: 이미지 파일 용량이 너무 크면 크롤러가 수집을 무시하거나 로딩 시간이 길어져 미리보기가 표시되지 않을 수 있습니다. 가급적 **5MB 이하**로 최적화하는 것을 권장합니다.
- **포맷**: 대부분의 플랫폼에서 JPG, PNG, GIF를 지원하며, 웹 최적화를 위해 압축된 포맷을 사용하는 것이 좋습니다.

### 동적 OG 태그 생성 방식
블로그 포스트나 상품 상세 페이지처럼 페이지마다 내용이 다른 경우, 서버 사이드 렌더링(SSR)을 통해 동적으로 태그를 생성해야 합니다. 클라이언트 사이드 렌더링(CSR) 방식(React, Vue 등)은 크롤러가 JS를 실행하지 않는 경우가 많아 태그를 인식하지 못할 수 있습니다.

**Next.js (React 기반 SSR) 예시:**
```javascript
// [id].js (상세 페이지)
export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return { props: { post } };
}

export default function Post({ post }) {
  return (
    <>
      <head>
        <title>{post.title}</title>
        <meta property="og:title" content={post.title} />
        <meta property="og:description" content={post.summary} />
        <meta property="og:image" content={post.thumbnailUrl} />
      </head>
      <div>{/* 페이지 본문 */}</div>
    </>
  );
}
```

## 검증 및 디버깅 도구
태그를 수정하더라도 플랫폼 서버에 기존 데이터가 **캐싱(Caching)**되어 있어 즉시 반영되지 않는 경우가 많습니다. 이때 디버거 도구를 사용하여 캐시를 강제로 갱신(Scrape again)해야 합니다.

| 플랫폼 | 디버거 도구 URL | 주요 기능 |
| :--- | :--- | :--- |
| **Facebook** | [Sharing Debugger](https://developers.facebook.com/tools/debug/) | 미리보기 확인, 캐시 삭제 및 재수집 |
| **KakaoTalk** | [Kakao Developers](https://developers.kakao.com/tool/debugger/sharing) | 캐시 삭제 및 미리보기 렌더링 확인 |
| **Twitter (X)** | [X 게시물 작성 창](https://x.com/compose/post) | 현재는 별도 밸리데이터보다 실제 게시물 작성 창에 URL을 입력하여 확인하는 방식이 가장 정확함 |

## 주의 사항 및 한계
1. **절대 경로 사용**: `og:image`와 `og:url`에는 `/images/thumb.png`와 같은 상대 경로가 아닌 `https://example.com/images/thumb.png`와 같은 **절대 경로**를 사용해야 합니다. 상대 경로 사용 시 크롤러가 이미지 위치를 찾지 못해 미리보기가 누락됩니다.
2. **HTTPS 필수**: 최근 대부분의 플랫폼은 보안상의 이유로 HTTPS 프로토콜을 사용하는 URL의 이미지만 정상적으로 렌더링합니다.
3. **SEO와의 차이점**:
    - **SEO (Search Engine Optimization)**: 구글, 네이버 등 검색 엔진의 검색 결과 순위를 높이기 위한 최적화로, `<title>`, `<meta name="description">` 등을 사용합니다.
    - **Open Graph**: 검색 순위보다는 소셜 공유 시의 **시각적 전달력**에 집중한 최적화입니다.
    - 두 설정은 상호 보완적이며, 검색 엔진 또한 OG 태그를 참고하는 경우가 많으므로 함께 설정하는 것이 권장됩니다.

AI 생성 콘텐츠 안내

이 문서는 AI 모델(gemma-4-31b)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

위키너와나