reese.dev

OG Tag

date
Sep 12, 2023
slug
og-tag
author
status
Public
tags
Etc
summary
type
Post
thumbnail
1.jpg
category
updatedAt
Aug 3, 2025 02:38 PM

OG(Open Graph)란?

OG(Open Graph Protocol)은 웹페이지의 정보를 SNS(소셜 미디어), 메신저, 검색 엔진 등 외부 플랫폼에 미리보기 카드 형태로 보여줄 수 있도록 메타 정보를 제공하는 프로토콜입니다.
Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
Open Graph protocol
https://ogp.me/
Open Graph protocol
 

왜 필요한가요?

웹페이지의 링크를 SNS나 메신저에 붙여넣으면, 링크 제목, 이미지, 설명이 자동으로 보이죠?
이런 기능은 단순한 URL이 아닌, HTML 내부의 <meta> 태그에 정의된 OG 정보를 기반으로 작동합니다.

예시: 카카오톡, 페이스북, 트위터 등

  • 사용자가 URL을 붙여넣으면
  • 해당 플랫폼의 크롤러가 해당 페이지의 OG 태그 정보를 읽어서
  • 예쁘게 구성된 미리보기 카드로 보여줍니다.
 

기본 OG 메타태그 구성

아래와 같은 메타태그들을 <head> 태그 안에 작성합니다.
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:title" content="페이지 제목" />
<meta property="og:description" content="간략한 페이지 설명" />
<meta property="og:image" content="https://example.com/image.jpg" />
속성
설명
og:url
공유할 웹페이지 URL
og:type
페이지의 유형 (예: website, article)
og:title
제목
og:description
설명
og:image
대표 이미지 URL

🐦 트위터(Twitter) 전용 메타태그

트위터는 Open Graph 외에 자체적으로 Twitter Cards라는 메타태그를 사용합니다.
OG 태그만으로는 트위터에서 카드 미리보기가 제대로 표시되지 않을 수 있습니다.
<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" />
트위터 카드 타입 종류
  • summary: 작은 썸네일 카드
  • summary_large_image: 큰 썸네일 카드
 

📐 이미지 사이즈 가이드

Open Graph 이미지에도 최소 권장 사이즈와 비율이 있습니다.
플랫폼
권장 사이즈
최소 사이즈
비율
Facebook
1200×630 px
200×200 px
1.91:1
Twitter
1200×675 px
300×157 px
1.78:1
KakaoTalk
800×400 px 이상 권장
명시 X (비슷함)
2:1
og:image:width / og:image:height로 사이즈 명시도 가능하지만 선택 사항입니다.

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
 

미리보기 테스트 도구

OG 태그를 적용한 후, 실제로 잘 적용되었는지 확인하려면 아래 툴들을 활용하세요!
  • Facebook Debugger
  • Twitter Card Validator
 

이미지가 변경되지 않을 때?

OG 이미지 변경 후에도 예전 이미지가 보인다면 캐시 문제일 가능성이 높습니다.
플랫폼마다 OG 정보를 캐시하는 주기가 다릅니다.
플랫폼
캐시 유지 기간
캐시 초기화 방법
Facebook
수 시간~몇 일
디버거 이용
Twitter
최대 7일 (공식 문서 기준)
Validator로 갱신
Kakao
수 시간~
Kakao Developers API 활용 가능

마무리

  • OG(Open Graph)는 링크 미리보기 정보를 제공하는 메타 태그 규약입니다.
  • SNS/메신저에서 제대로 보여주려면 OG와 Twitter Card 태그 모두 고려해야 합니다.
  • 이미지 크기와 비율은 플랫폼별 권장 스펙을 따르는 게 좋습니다.
  • 변경 사항 반영이 안 될 땐 플랫폼별 캐시를 갱신해보세요.
 

📚 참고 자료

  • Twitter Card 문서
  • 카카오 OG 설정 가이드