OG(Open Graph Protocol)은 웹페이지의 정보를 SNS(소셜 미디어), 메신저, 검색 엔진 등 외부 플랫폼에 미리보기 카드 형태로 보여줄 수 있도록 메타 정보를 제공하는 프로토콜입니다.
웹페이지의 링크를 SNS나 메신저에 붙여넣으면, 링크 제목, 이미지, 설명이 자동으로 보이죠?
이런 기능은 단순한 URL이 아닌, HTML 내부의 <meta> 태그에 정의된 OG 정보를 기반으로 작동합니다.
아래와 같은 메타태그들을 <head> 태그 안에 작성합니다.
1<meta property="og:url" content="https://example.com/page" />
2<meta property="og:type" content="website" />
3<meta property="og:title" content="페이지 제목" />
4<meta property="og:description" content="간략한 페이지 설명" />
5<meta property="og:image" content="https://example.com/image.jpg" />
6| 속성 | 설명 |
|---|---|
og:url | 공유할 웹페이지 URL |
og:type | 페이지의 유형 (예: website, article) |
og:title | 제목 |
og:description | 설명 |
og:image | 대표 이미지 URL |
트위터는 Open Graph 외에 자체적으로 Twitter Cards라는 메타태그를 사용합니다.
OG 태그만으로는 트위터에서 카드 미리보기가 제대로 표시되지 않을 수 있습니다.
1<meta name="twitter:card" content="summary_large_image" />
2<meta name="twitter:title" content="페이지 제목" />
3<meta name="twitter:description" content="간략한 설명" />
4<meta name="twitter:image" content="https://example.com/image.jpg" />
5
6트위터 카드 타입 종류
Open Graph 이미지에도 최소 권장 사이즈와 비율이 있습니다.
| 플랫폼 | 권장 사이즈 | 최소 사이즈 | 비율 |
|---|---|---|---|
| 1200×630 px | 200×200 px | 1.91:1 | |
| 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 태그를 적용한 후, 실제로 잘 적용되었는지 확인하려면 아래 툴들을 활용하세요!
OG 이미지 변경 후에도 예전 이미지가 보인다면 캐시 문제일 가능성이 높습니다.
플랫폼마다 OG 정보를 캐시하는 주기가 다릅니다.
| 플랫폼 | 캐시 유지 기간 | 캐시 초기화 방법 |
|---|---|---|
| 수 시간~몇 일 | 디버거 이용 | |
| 최대 7일 (공식 문서 기준) | Validator로 갱신 | |
| Kakao | 수 시간~ | Kakao Developers API 활용 가능 |