OG 이미지의 이상적인 크기는 무엇인가요?

권장 크기는 1200x630 픽셀(1.91:1 비율)입니다. Facebook, Twitter, LinkedIn 및 대부분의 메시징 플랫폼에서 잘 작동합니다.

OG 이미지를 어떻게 테스트하나요?

Facebook의 공유 디버거(developers.facebook.com/tools/debug)나 Twitter의 카드 검증기를 사용하세요. Open Graph 태그를 미리보기할 수 있는 브라우저 확장도 있습니다.

OG 이미지가 SEO에 영향을 미치나요?

OG 이미지는 검색 순위에 직접 영향을 미치지 않지만, 소셜 미디어에서의 클릭률을 크게 높이고, 참여도를 높여 사이트 트래픽을 증가시킵니다.

Open Graph 이미지 — 소셜 미디어 미리보기 카드 완벽 가이드 (2026)

Open Graph란 무엇이며 왜 중요한가

Open Graph(OG) 프로토콜은 Facebook이 2010년에 도입한 메타데이터 표준입니다. 웹 페이지의 콘텐츠가 소셜 미디어 플랫폼에서 공유될 때 어떻게 표시될지를 제어하는 역할을 합니다. 링크를 공유하면 자동으로 생성되는 미리보기 카드, 바로 그것이 Open Graph 태그에 의해 결정됩니다.

OG 이미지는 이 미리보기 카드에서 가장 눈에 띄는 요소입니다. 사용자가 피드를 스크롤하다가 가장 먼저 시선이 닿는 곳이 바로 이미지이기 때문입니다. 잘 만들어진 OG 이미지는 클릭률(CTR)을 크게 높일 수 있으며, 이는 곧 더 많은 트래픽으로 이어집니다.

OG 이미지가 없거나 부적절한 이미지를 사용하면 플랫폼이 페이지에서 임의의 이미지를 선택하거나 빈 회색 상자를 표시합니다. 이는 브랜드 이미지를 손상시키고 사용자의 신뢰를 떨어뜨리는 결과를 초래합니다. 전문적인 웹 개발에서 OG 이미지 설정은 선택이 아닌 필수 작업입니다.

OG 이미지 규격

권장 크기

OG 이미지의 표준 권장 크기는 1200 x 630 픽셀입니다. 이 크기는 1.91:1 비율로, 대부분의 소셜 미디어 플랫폼에서 최적의 표시를 보장합니다.

항목	권장값
너비	1200px
높이	630px
비율	1.91:1
최소 크기	600 x 315px
최대 파일 크기	8MB (5MB 이하 권장)

지원 형식

PNG: 텍스트가 포함된 이미지에 적합하며, 선명한 가장자리를 유지합니다
JPEG: 사진 기반 이미지에 적합하며, 파일 크기가 작습니다
WebP: 일부 플랫폼에서 지원하지만 호환성 문제가 있을 수 있습니다
GIF: 정적 프레임만 표시되므로 권장하지 않습니다

가장 안전한 선택은 PNG 또는 JPEG 형식입니다. 파일 크기를 5MB 이하로 유지하되, 가능하면 1MB 이하로 최적화하는 것이 로딩 속도에 유리합니다.

플랫폼별 요구사항

Facebook

Facebook은 Open Graph 프로토콜의 창시자로서 가장 완벽한 OG 태그 지원을 제공합니다. 권장 크기는 1200 x 630 픽셀이며, 최소 600 x 315 픽셀 이상이어야 합니다. 이보다 작은 이미지는 축소된 형태로 표시되어 시각적 효과가 크게 떨어집니다.

Twitter (X)

Twitter는 자체적인 메타 태그 체계인 Twitter Cards를 사용합니다. twitter:card 속성을 summary_large_image로 설정하면 대형 이미지 카드가 표시됩니다. Twitter 전용 태그가 없으면 OG 태그를 대체로 사용합니다. 권장 크기는 1200 x 628 픽셀이며, 비율은 2:1입니다.

LinkedIn은 OG 태그를 지원하며 권장 크기는 1200 x 627 픽셀입니다. LinkedIn에서는 특히 전문적이고 깔끔한 이미지가 중요합니다. 과도한 텍스트나 화려한 그래픽보다는 명확한 메시지를 전달하는 간결한 디자인이 효과적입니다.

Slack

Slack은 링크 미리보기에서 OG 태그를 활용합니다. 이미지 비율 1.91:1을 따르며, 제목과 설명도 함께 표시됩니다. Slack에서는 이미지가 비교적 작게 표시되므로 핵심 요소가 중앙에 위치하도록 디자인하는 것이 좋습니다.

OG 이미지를 위한 HTML 메타 태그

기본 Open Graph 태그

<head>
  <meta property="og:title" content="페이지 제목" />
  <meta property="og:description" content="페이지에 대한 간결한 설명" />
  <meta property="og:image" content="https://example.com/og-image.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="이미지 대체 텍스트" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:type" content="website" />
</head>

Twitter Cards 태그

<head>
  <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/og-image.png" />
  <meta name="twitter:image:alt" content="이미지 대체 텍스트" />
</head>

모든 플랫폼을 위한 종합 설정

<head>
  <!-- Open Graph 기본 태그 -->
  <meta property="og:title" content="페이지 제목" />
  <meta property="og:description" content="페이지에 대한 간결한 설명" />
  <meta property="og:image" content="https://example.com/og-image.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="이미지 대체 텍스트" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="사이트 이름" />
  <meta property="og:locale" content="ko_KR" />

  <!-- Twitter Cards 태그 -->
  <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/og-image.png" />
  <meta name="twitter:image:alt" content="이미지 대체 텍스트" />
</head>

og:image의 URL은 반드시 절대 경로로 지정해야 합니다. 상대 경로를 사용하면 일부 플랫폼에서 이미지를 인식하지 못합니다. HTTPS 프로토콜을 사용하는 것도 필수입니다.

효과적인 OG 이미지 디자인 모범 사례

텍스트 배치

OG 이미지에 텍스트를 포함할 때는 다음 원칙을 따르세요.

핵심 텍스트를 중앙에 배치하세요. 플랫폼마다 이미지를 다르게 잘라내기 때문에 가장자리에 있는 텍스트는 잘릴 수 있습니다.
글자 크기를 충분히 크게 설정하세요. 모바일 환경에서는 이미지가 작게 표시되므로 작은 글씨는 읽기 어렵습니다.
텍스트 양을 최소화하세요. 제목과 한두 줄의 부제목 정도가 적절합니다.

안전 영역

이미지의 상하좌우에서 약 60~80 픽셀의 여백을 확보하세요. 이 영역은 플랫폼에 따라 잘려나갈 수 있는 구간입니다. 중요한 시각적 요소나 텍스트는 반드시 이 안전 영역 안에 배치해야 합니다.

브랜딩

로고를 포함하되 너무 크지 않은 크기로 배치하세요
브랜드 컬러를 일관되게 사용하세요
모든 OG 이미지에 통일된 디자인 템플릿을 적용하면 브랜드 인지도를 높일 수 있습니다

대비와 가독성

배경과 텍스트 사이의 충분한 대비를 확보하세요
반투명 오버레이를 사용하여 사진 위의 텍스트 가독성을 높이세요
밝은 배경에는 어두운 텍스트, 어두운 배경에는 밝은 텍스트를 사용하세요

OG 이미지 만드는 방법

OG 이미지를 만드는 방법에는 여러 가지가 있습니다.

수동 제작

Figma, Canva, Adobe Photoshop 등의 디자인 도구를 사용하여 직접 제작할 수 있습니다. 캔버스 크기를 1200 x 630 픽셀로 설정하고 디자인을 시작하면 됩니다. 정교한 디자인이 필요한 경우에 적합하지만, 매번 수동으로 작업해야 하는 단점이 있습니다.

자동 생성

프로그래밍 방식으로 OG 이미지를 자동 생성할 수도 있습니다. Next.js의 @vercel/og 라이브러리나 Satori 같은 도구를 활용하면 HTML과 CSS를 기반으로 동적 이미지를 생성할 수 있습니다. 블로그 게시물이 많은 사이트에서 특히 유용합니다.

온라인 생성기 활용

가장 간편한 방법은 온라인 OG 이미지 생성기를 사용하는 것입니다. 별도의 디자인 기술이나 코딩 지식 없이도 빠르게 전문적인 OG 이미지를 만들 수 있습니다.

무료 OG 이미지 생성기 사용해보기

위 도구를 사용하면 텍스트, 배경색, 레이아웃을 설정하여 즉시 OG 이미지를 다운로드할 수 있습니다. 코딩이나 디자인 소프트웨어 설치 없이 브라우저에서 바로 작업할 수 있어 편리합니다.

OG 이미지 테스트 및 디버깅

OG 이미지를 설정한 후에는 반드시 테스트를 거쳐야 합니다. 각 플랫폼은 메타 태그를 캐싱하기 때문에 변경 사항이 즉시 반영되지 않을 수 있습니다.

테스트 도구

Facebook 공유 디버거: developers.facebook.com/tools/debug에서 URL을 입력하면 Facebook이 인식하는 OG 태그 정보를 확인할 수 있습니다. 캐시를 강제로 갱신하는 기능도 제공합니다.
Twitter 카드 검증기: cards-dev.twitter.com/validator에서 Twitter Cards가 올바르게 표시되는지 확인할 수 있습니다.
LinkedIn 게시물 검사기: linkedin.com/post-inspector에서 LinkedIn 미리보기를 테스트할 수 있습니다.

디버깅 팁

<!-- 올바른 예: 절대 경로 사용 -->
<meta property="og:image" content="https://example.com/images/og.png" />

<!-- 잘못된 예: 상대 경로 사용 -->
<meta property="og:image" content="/images/og.png" />

메타 태그가 올바르게 설정되어 있는데도 이미지가 나타나지 않는다면, 서버의 응답 헤더를 확인하세요. 이미지 URL이 리다이렉트되거나 인증이 필요한 경우 크롤러가 이미지에 접근하지 못할 수 있습니다.

캐시 갱신

소셜 미디어 플랫폼은 한번 크롤링한 OG 정보를 캐싱합니다. 이미지를 변경한 후에는 다음 방법으로 캐시를 갱신하세요.

Facebook: 공유 디버거에서 URL을 다시 스크래핑합니다
Twitter: 카드 검증기에서 URL을 다시 확인합니다
LinkedIn: 게시물 검사기에서 URL을 새로 검사합니다
이미지 파일명이나 URL에 버전 쿼리 파라미터를 추가하는 방법도 효과적입니다 (예: og.png?v=2)

흔한 실수와 해결 방법

1. 상대 경로 사용

가장 흔한 실수 중 하나입니다. og:image에는 반드시 https://로 시작하는 절대 URL을 사용해야 합니다. 상대 경로는 소셜 미디어 크롤러가 해석하지 못합니다.

2. 이미지 크기가 너무 작음

최소 600 x 315 픽셀 이상이어야 합니다. 이보다 작은 이미지는 작은 축소판으로 표시되거나 아예 무시됩니다. 최적의 결과를 위해 1200 x 630 픽셀을 사용하세요.

3. 파일 크기가 너무 큼

8MB를 초과하는 이미지는 대부분의 플랫폼에서 로드되지 않습니다. 이미지 압축 도구를 활용하여 파일 크기를 줄이되, 시각적 품질은 유지하세요. 일반적으로 200KB~1MB 사이가 적절합니다.

4. og:image:width와 og:image:height 누락

이 속성을 명시하지 않으면 플랫폼이 이미지를 다운로드한 후에야 크기를 파악할 수 있어 미리보기 생성이 느려집니다. 너비와 높이를 항상 함께 지정하세요.

5. HTTPS 미사용

HTTP로 제공되는 이미지는 일부 플랫폼에서 차단됩니다. 이미지 URL은 반드시 HTTPS 프로토콜을 사용해야 합니다.

6. 이미지 접근 제한

OG 이미지는 인증 없이 공개적으로 접근 가능해야 합니다. CDN이나 방화벽 설정으로 인해 크롤러가 이미지에 접근하지 못하는 경우가 있습니다. 크롤러의 User-Agent가 차단되지 않았는지 확인하세요.

7. 동적 렌더링 의존

OG 태그는 서버 사이드에서 HTML에 포함되어야 합니다. JavaScript로 클라이언트 사이드에서 태그를 삽입하면 크롤러가 이를 인식하지 못합니다. React, Vue 등의 SPA 프레임워크를 사용하는 경우 SSR(서버 사이드 렌더링) 또는 정적 생성을 통해 메타 태그를 포함하세요.

마무리

OG 이미지는 소셜 미디어에서의 콘텐츠 성과를 좌우하는 중요한 요소입니다. 올바른 크기와 형식으로 제작하고, 적절한 HTML 메타 태그를 설정하며, 각 플랫폼에서 테스트하는 과정을 거치면 소셜 미디어 공유 시 전문적이고 눈에 띄는 미리보기 카드를 제공할 수 있습니다.

지금 바로 무료 OG 이미지 생성기를 사용하여 프로젝트에 최적화된 OG 이미지를 만들어 보세요.