OG 태그 완전 가이드 — 링크 공유할 때 이미지가 안 뜨는 이유 (2026)

카카오톡에 링크를 보내면 제목, 설명, 이미지가 카드처럼 깔끔하게 표시되는 사이트가 있습니다. 반면 URL만 덩그러니 나오는 사이트도 있습니다. 이 차이를 만드는 게 OG 태그입니다.

OG 태그를 모르고 사이트를 만들면, 누군가 내 사이트를 공유했을 때 제목도 이상하고 이미지도 없는 초라한 링크가 카카오톡에 뜹니다. 블로그를 운영하든, 웹 앱을 만들든, 포트폴리오를 올리든 — OG 태그는 반드시 알아야 합니다.

OG 태그란 — 30초 요약

OG는 Open Graph의 약자입니다. 원래 페이스북이 2010년에 만든 프로토콜인데, 지금은 카카오톡, 슬랙, 디스코드, 트위터, 텔레그램, 라인까지 거의 모든 플랫폼이 OG 태그를 읽습니다.

OG 태그는 HTML의 <head> 안에 넣는 메타 태그입니다. “이 페이지의 제목은 이거고, 설명은 이거고, 대표 이미지는 이겁니다”라고 플랫폼한테 미리 알려주는 명함 같은 겁니다.

OG 태그가 없으면 플랫폼이 알아서 페이지 내용을 긁어오는데, 이 결과가 대부분 엉망입니다. 엉뚱한 이미지가 뜨거나, 제목이 잘리거나, 아예 이미지 없이 URL만 나옵니다.

OG 태그 기본 설정 — 이 4줄이면 된다

필수 OG 태그는 딱 4개입니다. HTML의 <head> 안에 넣으면 됩니다.

<head>
  <meta property="og:title" content="내 월급 등급은? — 2026 월급 계산기" />
  <meta property="og:description" content="LoL 티어로 보는 내 월급 수준, 지금 확인해보세요" />
  <meta property="og:image" content="https://salary.pearsoninsight.com/og-image.png" />
  <meta property="og:url" content="https://salary.pearsoninsight.com/" />
</head>

각 태그가 하는 일

OG 태그	역할	팁
`og:title`	공유 카드의 제목	40자 이내가 적당. 너무 길면 잘림
`og:description`	제목 아래 설명 텍스트	80자 이내. 핵심만 간결하게
`og:image`	썸네일 이미지 URL	반드시 HTTPS. 권장 1200×630px
`og:url`	페이지의 대표 URL	정규화된 URL 사용

이 4줄만 넣으면 카카오톡, 페이스북, 슬랙, 디스코드에서 전부 미리보기가 뜹니다.

OG 태그 — 이미지 사이즈가 중요하다

OG 태그에서 가장 많이 실수하는 부분이 이미지 크기입니다. 플랫폼마다 권장 사이즈가 다르지만, 1200×630px로 만들면 대부분의 플랫폼에서 잘 표시됩니다.

플랫폼	권장 이미지 크기	비율
카카오톡	800×400px 이상	2:1
페이스북	1200×630px	1.91:1
트위터	1200×628px	1.91:1
슬랙	1200×630px	1.91:1
디스코드	1200×630px	1.91:1

1200×630px로 만들면 모든 플랫폼에서 무난하게 표시됩니다. 이보다 작으면 카카오톡에서는 괜찮아도 페이스북에서 이미지가 작게 나올 수 있습니다.

이미지 크기를 명시적으로 알려줄 수도 있습니다.

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

이 태그가 없어도 플랫폼이 이미지를 직접 읽어서 크기를 파악하지만, 넣어주면 로딩이 빨라집니다.

OG 태그 — 플랫폼별 추가 설정

기본 4개 외에 플랫폼별로 추가하면 좋은 태그들이 있습니다.

트위터용 태그

트위터(X)는 OG 태그도 읽지만, 자체 twitter:card 태그를 우선합니다.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="내 월급 등급은?" />
<meta name="twitter:description" content="2026 월급 계산기" />
<meta name="twitter:image" content="https://사이트/og-image.png" />

twitter:card에는 두 가지 옵션이 있습니다.

summary — 작은 정사각형 이미지 + 제목 + 설명
summary_large_image — 큰 이미지 + 제목 + 설명 (대부분 이걸 씁니다)

주의: twitter:card를 두 개 넣으면 안 됩니다. summary_large_image과 summary가 동시에 있으면 어느 쪽이 적용될지 알 수 없습니다. 하나만 남기세요.

카카오톡 전용 설정

카카오톡은 OG 태그를 읽긴 하지만, 카카오 SDK로 공유하면 JavaScript에서 설정한 값이 OG 태그보다 우선됩니다. 카카오 SDK 공유를 사용한다면 OG 태그는 “URL 직접 붙여넣기” 상황을 위한 백업이라고 생각하면 됩니다.

OG 태그 — 워드프레스에서 설정하는 법

워드프레스를 쓰고 있다면 직접 코드를 건드릴 필요가 없습니다. SEO 플러그인이 알아서 OG 태그를 생성해줍니다.

Rank Math 사용 시

글 편집 화면 → Rank Math 패널 → “소셜” 탭 클릭. 여기서 페이스북/트위터 미리보기 제목, 설명, 이미지를 설정할 수 있습니다. 설정하지 않으면 SEO 제목과 메타 설명이 자동으로 OG 태그에 들어갑니다.

Yoast SEO 사용 시

글 편집 화면 → Yoast 패널 → “소셜” 아이콘 클릭. Facebook과 Twitter 탭에서 각각 설정 가능합니다.

이미지를 따로 설정하지 않으면 글의 대표 이미지(Featured Image)가 OG 이미지로 사용됩니다. 그래서 워드프레스 글을 쓸 때 대표 이미지를 반드시 설정하는 게 좋습니다.

OG 태그 — 제대로 적용됐는지 확인하는 법

OG 태그를 넣었다고 바로 반영되지 않습니다. 플랫폼마다 캐시가 있어서, 이전 버전의 정보를 계속 보여주는 경우가 많습니다. 각 플랫폼의 디버깅 도구로 확인하고 캐시를 갱신할 수 있습니다.

플랫폼	디버깅 도구	URL
페이스북	Sharing Debugger	developers.facebook.com/tools/debug
트위터	Card Validator	cards-dev.twitter.com/validator
카카오톡	공유 디버거	developers.kakao.com/tool/debugger
범용	OG 태그 검사기	opengraph.xyz

opengraph.xyz가 가장 편합니다. URL을 넣으면 카카오톡, 페이스북, 트위터, 슬랙, 디스코드에서 어떻게 보이는지 한 번에 미리보기를 보여줍니다.

OG 태그 — 자주 하는 실수 5가지

OG 태그를 넣었는데 이미지가 안 뜬다면, 대부분 이 5가지 중 하나입니다.

1. 이미지 URL이 HTTP

2026년 기준 대부분의 플랫폼은 HTTP 이미지를 거부합니다. 반드시 HTTPS URL이어야 합니다.

<!-- 안 됨 -->
<meta property="og:image" content="http://사이트/image.png" />

<!-- 됨 -->
<meta property="og:image" content="https://사이트/image.png" />

2. 이미지 파일이 너무 큼

카카오톡은 이미지를 스크랩할 때 시간 제한이 있습니다. 5MB 이하, 가능하면 1MB 이하로 만드세요. PNG보다 JPG가 파일 크기가 작습니다.

3. 상대 경로 사용

<!-- 안 됨 -->
<meta property="og:image" content="/images/og.png" />

<!-- 됨 -->
<meta property="og:image" content="https://사이트/images/og.png" />

OG 이미지는 반드시 https://로 시작하는 전체 URL이어야 합니다.

4. Cloudflare 캐시

Cloudflare를 사용하고 있다면, OG 태그를 수정해도 캐시 때문에 구버전이 계속 서빙될 수 있습니다. 수정 후 Cloudflare 대시보드 → Caching → Purge Everything을 꼭 해주세요.

5. og:image와 실제 크기 불일치

og:image:width에 1200이라고 적어놓고 실제 이미지가 400px이면, 플랫폼이 이미지를 무시할 수 있습니다. 메타 태그의 크기와 실제 이미지 크기를 일치시키세요.

OG 태그 전체 템플릿 — 복사해서 쓰세요

이 템플릿을 <head> 안에 넣고 내용만 바꾸면 됩니다.

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="페이지 제목" />
<meta property="og:description" content="페이지 설명 (80자 이내)" />
<meta property="og:image" content="https://사이트/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://사이트/" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="페이지 제목" />
<meta name="twitter:description" content="페이지 설명" />
<meta name="twitter:image" content="https://사이트/og-image.png" />

마무리 — OG 태그, 5분 투자로 공유 품질이 달라진다

OG 태그는 코드 몇 줄이지만, 있고 없고의 차이가 큽니다. 카카오톡에서 링크를 보냈을 때 이미지가 깔끔하게 뜨는 것과 URL만 덜렁 나오는 것은 클릭률에서 체감할 수 있는 차이입니다.

특히 블로그나 웹 앱의 바이럴을 노린다면 OG 태그는 필수입니다. 5분이면 설정할 수 있으니, 아직 안 넣었다면 지금 바로 넣으세요. OG 태그에 대한 더 자세한 스펙은 Open Graph 공식 사이트에서 확인할 수 있습니다.