Open Graph 이미지: 크기, 활용 팁 및 코드 예시
Open Graph 이미지는 페이스북, 트위터, 링크드인에서 공유 시 표시되는 내용을 제어합니다. 잘못된 이미지나 이미지가 없으면 방문자 클릭률이 크게 떨어집니다.
이 가이드는 최적 크기, 디자인 원칙, HTML 적용법, 테스트 도구 등 모든 플랫폼에서 소셜 미리보기를 완벽하게 설정하는 방법을 다룹니다.
목차
Open Graph 이미지란 무엇이며 왜 중요한가
Open Graph는 페이스북이 도입한 프로토콜로, 웹페이지가 소셜 네트워크에서 공유될 때 표시 방식을 제어합니다. og:image 메타 태그는 미리보기 썸네일로 사용할 이미지를 지정합니다.
페이스북, 트위터, 링크드인에서 링크가 공유되면 플랫폼은 Open Graph 메타데이터를 가져와 미리보기 카드를 생성합니다. 이 카드의 이미지, 제목, 설명이 클릭 결정에 큰 영향을 미칩니다.
잘 제작된 Open Graph 이미지는 클릭률을 크게 높입니다. 이미지가 없거나 크기가 맞지 않으면 미리보기가 깨지거나 썸네일이 잘리거나 일반적인 자리 표시자가 표시되어 전문성이 떨어집니다.
클릭률
적절한 크기와 높은 대비의 OG 이미지를 가진 페이지가 이미지가 없거나 저품질 대체 이미지가 있는 페이지보다 성과가 뛰어납니다.
공유당 더 많은 클릭
브랜드 인지도
일관된 시각 아이덴티티는 방문 전부터 사용자에게 친숙함과 신뢰를 형성합니다.
네트워크 전반 일관성 유지
SEO 신호
매력적인 미리보기는 소셜 참여를 유도해 백링크와 트래픽 신호를 생성, 장기적으로 검색 순위에 긍정적 영향을 줍니다.
간접적인 순위 향상 효과
플랫폼별 이미지 요구사항
각 소셜 플랫폼은 권장 크기, 비율, 파일 크기 제한이 다릅니다. 이를 준수해야 이미지 잘림, 왜곡, 대체 이미지 표시를 방지할 수 있습니다.
| 플랫폼 | 권장 크기 | 비율 | 최대 파일 크기 | 포맷 |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
범용 안전 크기: 1200 × 630 픽셀
1.91:1 비율의 1200 × 630 픽셀 이미지는 페이스북, 링크드인, 왓츠앱, 슬랙 등 대부분 플랫폼에서 잘 작동합니다. 트위터는 16:9 크롭을 사용하지만 중요한 내용은 중앙에 배치해 잘림을 방지하세요.
효과적인 Open Graph 이미지 디자인 원칙
이미지는 소셜 피드에서 작은 크기로 표시됩니다. 전체 크기보다 썸네일을 우선 고려해 디자인하세요.
로고, 핵심 제목, 주요 일러스트 등 중요한 시각 요소는 이미지 중앙 80% 안에 배치하세요. 플랫폼에서 가장자리를 자를 수 있습니다.
높은 대비
텍스트, 전경, 배경 간 강한 대비를 사용하세요. 대비가 낮으면 경쟁 게시물 사이에서 눈에 띄지 않습니다.
어떤 크기에서도 가독성 유지
타이포그래피 명확성
텍스트가 포함된 경우 최소 36px 크기의 굵은 글꼴을 사용하고 두 줄을 넘지 않도록 하세요. 작은 텍스트는 썸네일에서 읽기 어렵습니다.
작게 보여도 읽기 쉽게
브랜드 일관성
모든 OG 이미지에 로고나 브랜드 색상을 포함하세요. 클릭하지 않아도 브랜드 인상을 남깁니다.
공유 하나가 브랜드 접점
적합한 이미지 포맷 선택
사진형 OG 이미지는 JPEG, 텍스트·로고·투명도 포함 그래픽은 PNG를 사용하세요. WebP는 지원이 늘고 있으나 모든 소셜 크롤러에서 아직 완전하지 않습니다.
| 포맷 | 최적 용도 | 소셜 지원 | 일반 파일 크기 | 권장 사항 |
|---|---|---|---|---|
| JPEG | 사진, 그라데이션 | 범용 | 60 – 150 KB | 사진 기본값 |
| PNG | 텍스트, 로고, 투명도 | 범용 | 100 – 300 KB | 그래픽 기본값 |
| WebP | 두 가지 모두, 파일 크기 작음 | 트위터, 슬랙(일부만) | 40 – 120 KB | 보조용 |
OG 이미지는 100~200KB를 목표로 하세요. 작을수록 좋지만 과도한 압축으로 픽셀화되지 않도록 주의하세요. 왓츠앱은 300KB 제한이 엄격하므로 왓츠앱 공유가 중요하면 이 이하로 유지하세요.
이미지 포맷 선택에 대한 자세한 내용은 웹 이미지 최적화 가이드 기존 이미지 변환에 관한 내용은 JPG to WebP 가이드 에서 일상적인 작업 흐름을 확인하세요.
HTML 구현 및 메타 태그
Open Graph 메타 태그는 HTML <head> 요소 안에 넣으세요. og:image 태그는 절대 URL을 사용해야 하며 상대 경로는 소셜 크롤러에서 지원하지 않습니다.
필수 태그는 og:title, og:description, og:image, og:url이며, twitter:card 태그는 트위터 대형 이미지 카드 형식을 활성화합니다.
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">og:image:width와 og:image:height를 반드시 지정하세요. 없으면 플랫폼이 미리보기 생성 전 이미지를 다운로드해 검사하므로 표시가 느려지고 대체 이미지가 뜰 확률이 높아집니다.
Blazor를 사용하는 경우, Blazor SEO 메타데이터 컴포넌트 가 문화별 URL을 자동으로 처리하며 모든 Open Graph 태그를 관리합니다.
Open Graph 이미지 테스트 및 디버깅
소셜 플랫폼은 Open Graph 메타데이터를 강력히 캐시합니다. 태그나 이미지를 수정한 후 공식 디버거 도구로 새로고침을 강제해 미리보기가 올바른지 확인하세요.
페이스북 공유 디버거
developers.facebook.com/tools/debug에 URL을 입력해 최신 메타데이터를 가져오고, 페이스북이 선택한 이미지와 경고·오류를 확인하세요.
캐시 강제 새로고침
트위터 카드 검증기
cards-dev.twitter.com/validator에서 트위터 카드 미리보기를 확인하세요. 'Preview card'를 클릭하면 썸네일, 제목, 설명을 실제 카드 형식으로 볼 수 있습니다.
게시 전 미리보기
링크드인 게시물 검사기
linkedin.com/post-inspector에서 링크드인 캐시를 새로고침하고 현재 메타데이터로 게시물 미리보기를 확인할 수 있습니다.
링크드인 캐시 새로고침
자주 발생하는 문제와 해결법
대부분 Open Graph 이미지 문제는 반복되는 몇 가지 실수에서 발생합니다. 문제점을 알면 디버깅 시간을 줄일 수 있습니다.
- 상대 URL 사용 소셜 크롤러는 상대 경로를 인식하지 못합니다. og:image 값은 프로토콜과 도메인을 포함한 절대 URL이어야 합니다 (예: https://yourdomain.com/path/image.jpg).
- 너비 및 높이 태그 누락 og:image:width와 og:image:height가 없으면 플랫폼이 미리보기 생성 전 이미지를 다운로드해 검사해야 합니다. 두 태그를 모두 추가해 불필요한 요청을 줄이세요.
- 인증이 필요한 이미지 크롤러는 로그인 필요 이미지나 robots.txt로 차단된 이미지를 접근할 수 없습니다. OG 이미지는 인증 없이 공개되어야 합니다.
- 잘못된 비율 1.91:1 비율에서 크게 벗어난 이미지는 잘리거나 여백이 생깁니다. 게시 전 반드시 비율을 확인하세요.
- 플랫폼 캐시 갱신 지연 파일명이나 쿼리 스트링 없이 이미지만 교체하면 플랫폼이 이전 캐시를 제공합니다. 파일명을 변경하거나 디버거로 강제 새로고침하세요.
Open Graph 이미지 자동 생성
소규모 사이트나 블로그는 페이지당 하나의 정적 OG 이미지가 가장 간단하고 안정적입니다. 대규모 사이트는 페이지별 고유 미리보기를 위해 동적 생성이 효과적입니다.
동적 OG 이미지 생성은 요청 시점이나 빌드 시점에 페이지 제목, 설명 등 콘텐츠를 기반으로 고유 이미지를 만듭니다. 수동 이미지 제작 없이 페이지별 맞춤 미리보기를 제공합니다.
자동화 시기
페이지가 많고 각각 고유 이미지가 필요하거나, 콘텐츠가 자주 변경되거나, 수동 이미지 제작이 출판량에 맞지 않을 때 자동화하세요.
대량 또는 동적 콘텐츠
정적 이미지 사용 시기
대부분 랜딩 페이지, 가이드, 상시 콘텐츠는 정성 들인 정적 이미지가 품질과 브랜드 일관성에서 동적 이미지보다 우수합니다.
품질 우선 접근법
동적 생성에 인기 있는 도구로는 Cloudinary(URL 매개변수 변환), Vercel OG(엣지에서 React/HTML 렌더링), Puppeteer 또는 Playwright 기반 스크린샷 파이프라인이 있습니다.