OG태그 이미지 사이즈 가이드: 플랫폼별 권장 크기 총정리

OG 이미지는 소셜 미디어에서 링크를 공유할 때 표시되는 대표 이미지입니다. 이 가이드에서는 Facebook, X(Twitter), LinkedIn, 카카오톡 등 주요 플랫폼별 OG 이미지 권장 사이즈와 최적화 방법을 정리합니다.

OG 이미지란?

OG 이미지(Open Graph Image)는 og:image 메타태그로 지정하는 이미지로, URL이 소셜 미디어에 공유될 때 링크 미리보기에 표시됩니다. 적절한 크기와 품질의 OG 이미지를 설정하면 링크의 시각적 노출도가 높아져 클릭률이 향상됩니다.

OG 이미지가 설정되지 않으면, 플랫폼이 페이지 내 이미지를 임의로 선택하거나 이미지 없이 텍스트만 표시합니다. 특히 기업 홈페이지나 블로그의 경우, 공유 시 의도하지 않은 이미지가 노출되면 브랜드 인상에 부정적인 영향을 줄 수 있습니다.

범용 권장 사이즈: 1200 × 630px

하나의 사이즈만 기억해야 한다면 1200 × 630 픽셀입니다. 이 크기는 약 1.91:1 비율로, Facebook이 공식 권장하는 사이즈이며 LinkedIn, Slack, Discord, 카카오톡, WhatsApp 등 대부분의 플랫폼에서 안정적으로 표시됩니다.

ℹ️ 참고

이 가이드의 플랫폼별 사이즈 정보는 2025년 2월 기준입니다. 소셜 미디어 플랫폼은 표시 규격을 수시로 변경하므로, 공유 전 디버깅 도구로 미리보기를 확인하는 것을 권장합니다.

플랫폼별 OG 이미지 사이즈

플랫폼 권장 사이즈 비율 최소 사이즈 최대 파일 크기
Facebook 1200 × 630px 1.91:1 600 × 315px 8MB
X (Twitter) 1200 × 675px 16:9 300 × 157px 5MB
LinkedIn 1200 × 627px 1.91:1 1200 × 627px (풀카드) 5MB
카카오톡 800 × 400px 이상 2:1 200 × 200px –
Slack 1200 × 630px 1.91:1 – –
Discord 1200 × 630px 1.91:1 – –

플랫폼별 주의사항

Facebook: 600px 미만의 이미지는 대형 카드가 아닌 소형 썸네일로 표시됩니다. 대형 카드 미리보기를 원하면 최소 600 × 315px 이상의 이미지를 사용해야 합니다.

X(Twitter): summary_large_image 카드를 사용하면 1200 × 675px 크기의 이미지가 가장 깔끔하게 표시됩니다. 이미지의 핵심 요소(텍스트, 로고)는 중앙 영역에 배치하세요. 양쪽 가장자리가 잘릴 수 있습니다.

LinkedIn: 이미지 너비가 1200px 미만이면 좌측에 소형 썸네일로 표시됩니다. 풀 너비 카드를 원하면 최소 1200px 이상의 이미지를 사용해야 합니다. LinkedIn은 이미지를 적극적으로 캐시하므로, 수정 후에는 Post Inspector에서 강제 갱신해야 합니다.

카카오톡: OG태그 기반으로 미리보기를 생성합니다. 이미지 변경 후에도 이전 이미지가 표시되면 카카오 개발자 도구의 캐시 초기화 기능을 사용하세요.

OG 이미지 최적화 방법

파일 형식

  • JPEG: 사진이나 복잡한 이미지에 적합. 용량 대비 화질이 우수합니다.
  • PNG: 텍스트, 로고, 투명 배경이 필요한 이미지에 적합. 선명도가 높지만 용량이 큽니다.
  • WebP: 일부 플랫폼에서 지원하지만 아직 범용적이지 않으므로, JPEG 또는 PNG를 권장합니다.

파일 크기

파일 크기는 1MB 이하로 유지하는 것이 좋습니다. 용량이 큰 이미지는 플랫폼에서 로딩이 지연되거나, 스크래핑 시 타임아웃이 발생할 수 있습니다. 특히 WhatsApp은 300KB 제한이 있으므로, 다양한 플랫폼을 고려한다면 가능한 한 경량으로 유지하세요.

💡 실무 팁

TinyPNG(tinypng.com)나 Squoosh(squoosh.app)를 사용하면 이미지 품질 저하 없이 파일 크기를 줄일 수 있습니다. 1200 × 630px JPEG 이미지를 TinyPNG로 압축하면 대부분 200~400KB 이내로 줄어듭니다.

디자인 가이드

  • 안전 영역: 텍스트와 로고는 이미지 중앙 80% 영역에 배치합니다. 가장자리는 플랫폼에 따라 잘릴 수 있습니다.
  • 고대비: 라이트 모드와 다크 모드 모두에서 잘 보이도록 명확한 대비를 유지합니다.
  • 텍스트 최소화: Facebook은 이미지 내 텍스트 비율이 20%를 넘으면 도달률이 떨어질 수 있습니다.
  • 브랜드 일관성: 사이트의 OG 이미지에 일관된 브랜드 컬러, 로고, 폰트를 사용하면 인지도가 높아집니다.

 

OG 이미지 HTML 코드 예시

<!-- 기본 OG 이미지 -->
<meta property="og:image" content="https://example.com/images/og-default.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="웹닷 기업 홈페이지 제작 서비스 소개 이미지">
<meta property="og:image:type" content="image/jpeg">

<!-- X(Twitter) 전용 이미지 (별도 최적화 시) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/twitter-card.jpg">

og:image:width와 og:image:height를 함께 설정하면, 플랫폼이 이미지를 미리 캐싱하는 데 도움이 됩니다. 이미지 로딩 속도가 개선되어 미리보기 표시가 빨라집니다.

확인 및 디버깅

OG 이미지를 설정한 후에는 반드시 각 플랫폼의 디버깅 도구에서 미리보기를 확인합니다.

  • Facebook: developers.facebook.com/tools/debug → URL 입력 → “Scrape Again” 클릭
  • X(Twitter): cards-dev.twitter.com/validator → URL 입력
  • LinkedIn: linkedin.com/post-inspector → URL 입력
  • 카카오톡: developers.kakao.com/tool/clear/og → URL 입력하여 캐시 초기화
  • 종합 미리보기: ogpreview.app 또는 metatags.io에서 여러 플랫폼 미리보기를 한 번에 확인

💡 실무 팁

OG 이미지를 수정한 후에도 카카오톡이나 Facebook에서 이전 이미지가 계속 표시된다면, 이는 플랫폼의 캐시 때문입니다. 위 디버깅 도구에서 “다시 스크래핑”을 실행하면 즉시 갱신됩니다. 특히 카카오톡은 캐시 유지 기간이 길어, 별도 초기화를 하지 않으면 수일간 이전 이미지가 유지될 수 있습니다.

정리

  • OG 이미지 범용 권장 사이즈는 1200 × 630px (1.91:1 비율)입니다.
  • 파일 형식은 JPEG 또는 PNG, 파일 크기는 1MB 이하를 권장합니다.
  • 텍스트와 로고는 이미지 중앙 80% 영역에 배치하여 잘림을 방지합니다.
  • LinkedIn은 1200px 미만 이미지를 소형 썸네일로 처리하므로 최소 1200px 이상을 사용합니다.
  • 이미지 수정 후에는 각 플랫폼의 디버깅 도구에서 캐시를 갱신하여 확인합니다.
이전 가이드 OG태그 설정 방법 완벽 가이드 (Open Graph 메타태그)

이 주제에 대해 전문 상담이 필요하신가요?

웹닷이 최적의 솔루션을 제안해드립니다.

무료 상담 문의하기
개발가이드