Open Graph 이미지는 어떤 크기로 만들어야 하나요?

가장 널리 권장되는 크기는 1200x630픽셀입니다. Facebook, LinkedIn, X(Twitter), 대부분의 메시징 앱에서 잘 표시됩니다. 600x315보다 작으면 일부 플랫폼에서 큰 미리보기 카드 대신 작은 썸네일로 보일 수 있습니다.

페이지에 og:image 태그가 없으면 어떻게 되나요?

플랫폼이 페이지에서 적당한 이미지를 자동으로 찾으며 대개 HTML에서 처음 나오는 큰 이미지를 선택합니다. 로고, 광고, 관계없는 사진이 미리보기에 나오는 등 결과를 예측하기 어렵습니다.

Twitter/X와 Facebook에 서로 다른 이미지를 쓸 수 있나요?

네. X는 og:image보다 우선하는 자체 메타 태그 twitter:image를 지원합니다. 태그가 있으면 X가 이를 사용하고 없으면 og:image로 대체합니다. 플랫폼별 화면 비율에 맞춰 이미지를 따로 만들 수 있습니다.

Open Graph 이미지를 어떻게 시험하나요?

Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector처럼 플랫폼별 디버거를 사용하세요. 페이지를 가져와 이미지, 제목, 설명을 포함한 실제 미리보기 모습을 보여 줍니다.

Open Graph 이미지에도 대체 텍스트가 필요한가요?

og:image:alt 태그로 미리보기 이미지의 대체 텍스트를 제공할 수 있습니다. 모든 플랫폼이 지원하는 것은 아니지만 공유 링크를 접하는 화면 읽기 프로그램 사용자의 접근성을 높입니다.

Open Graph 이미지란? | 용어집

Open Graph 이미지는 소셜 미디어, 메시징 앱, 검색 결과에서 URL을 공유할 때 표시되는 미리보기 이미지입니다. 페이지 HTML의 og:image 메타 태그로 지정합니다.

OG 이미지가 중요한 이유

누군가 Facebook, LinkedIn, X, Slack, iMessage, WhatsApp에서 링크를 공유하면 플랫폼이 페이지를 가져와 제목, 설명, 이미지가 있는 풍부한 미리보기를 표시합니다. 이미지는 가장 크고 눈에 띄는 요소라 사람들이 스크롤을 멈추고 링크를 살펴볼지에 큰 영향을 줍니다.

잘 디자인한 OG 이미지는 비어 있거나 일반적인 미리보기보다 링크의 주제와 출처를 분명히 전달합니다. 이미지가 없으면 플랫폼이 관계없는 이미지나 아무것도 고르지 못할 수 있어 공유 링크가 깨졌거나 정돈되지 않은 것처럼 보입니다.

마케팅 팀, 제품 출시, 블로그 글, 랜딩 페이지에서 OG 이미지는 URL이 공유될 때마다 나타나는 간판과 같습니다. 일관된 브랜드 템플릿을 사용하면 공유할 때마다 시각 정체성을 유지하고 내용을 바로 알릴 수 있습니다.

OG 이미지는 검색 결과, 북마크 관리자, 링크 모음 서비스에도 표시돼 소셜 플랫폼 밖에서도 영향을 줍니다.

OG 이미지 사양

Facebook이 처음 만든 Open Graph 프로토콜은 페이지 <head> 안에 넣을 메타 태그를 정의합니다. 이미지와 관련된 핵심 태그는 다음과 같습니다.

og:image — 이미지 URL입니다. 상대 경로가 아닌 절대 URL이어야 하며 HTTPS 사용을 강하게 권장합니다.
og:image:width와 og:image:height — 픽셀 단위 이미지 크기입니다. 값을 넣으면 플랫폼이 전체 이미지를 내려받기 전에도 미리보기 공간을 잡을 수 있습니다.
og:image:type — image/png, image/jpeg 같은 MIME 형식입니다. 선택 항목이지만 형식 호환성을 확인하는 플랫폼에 도움이 됩니다.
og:image:alt — 이미지 콘텐츠를 설명하는 대체 텍스트로 접근성을 높입니다.

권장 크기는 약 1.91:1 비율인 1200x630픽셀입니다. Facebook, LinkedIn, 대부분의 메시징 앱에서 큰 미리보기 카드로 잘 표시됩니다. X(Twitter)의 summary_large_image 카드는 1200x675처럼 조금 다른 비율을 사용하지만 1200x630도 주요 플랫폼에서 무리 없이 보입니다.

파일은 Facebook에서 5MB 아래, 다른 플랫폼 대부분에서는 8MB 아래로 유지하세요. JPEG와 PNG는 널리 지원되지만 WebP 지원은 플랫폼마다 다릅니다.

효과적인 OG 이미지 만들기

효과적인 OG 이미지는 읽기 쉽고 브랜드가 드러나며 페이지 맥락을 보여 줍니다.

읽을 수 있는 글자를 넣습니다. 제목이 함께 보이지 않아도 이미지 자체로 페이지 주제를 알 수 있어야 합니다. 큰 글꼴로 제목이나 핵심 구절을 넣고 썸네일에서 읽기 어려운 작은 글자는 피하세요.
브랜드를 일관되게 적용합니다. 로고, 브랜드 색, 같은 레이아웃 템플릿을 사용하세요. 피드에 사이트 링크가 여러 개 나타나도 한눈에 알아볼 수 있습니다.
잘림을 고려해 디자인합니다. 플랫폼마다 이미지 자르는 방식이 다릅니다. 글자와 로고 같은 핵심 콘텐츠를 가운데 80% 안에 놓아 중요한 부분이 잘리지 않게 하세요.
생성을 자동화합니다. 페이지마다 직접 만들면 규모를 늘리기 어렵습니다. 스타일을 적용한 템플릿을 렌더링하고 페이지별 이미지로 캡처하는 방식으로 OG 이미지를 동적으로 만들 수 있습니다.

실제 게시 작업에서 활용하기

Shotomatic 같은 게시 작업에서는 OG 이미지를 일회성 디자인이 아니라 반복 가능한 결과물로 다루는 편이 좋습니다. 용어집, 블로그 글, 도구 페이지가 검토 단계로 넘어갈 때 제목, 부제, 브랜드 토큰을 고정된 OG 템플릿에 넣어 미리보기를 자동 생성할 수 있습니다. 게시 속도를 늦추지 않으면서 모든 공유 URL의 브랜드를 일정하게 유지합니다.

흔한 실수

해상도가 낮은 이미지를 사용합니다. 600x315보다 작으면 큰 미리보기 카드가 아니라 작은 인라인 썸네일로 표시될 수 있습니다. 플랫폼 전반에서 잘 보이도록 1200x630 이상을 사용하세요.
절대 URL을 쓰지 않습니다. /images/og.png 같은 상대 경로는 작동하지 않습니다. og:image 값에는 프로토콜과 도메인이 들어간 전체 URL이 필요합니다.
플랫폼별로 시험하지 않습니다. Facebook에서 보기 좋아도 LinkedIn이나 X에서는 다르게 잘릴 수 있습니다. 게시 전에 각 플랫폼의 미리보기 디버거로 확인하세요.
오래된 이미지 캐시를 방치합니다. 플랫폼은 OG 이미지를 강하게 캐시합니다. 이미지를 바꾼 뒤 플랫폼 디버거에서 다시 가져오도록 요청하세요. 메타 태그만 바꿔서는 몇 시간이나 며칠 동안 미리보기가 갱신되지 않을 수 있습니다.
모든 페이지에 같은 일반 이미지를 씁니다. 사이트 공통 기본 이미지라도 없는 것보다는 낫지만 페이지마다 내용을 반영한 고유한 이미지가 더 정확한 맥락을 전달합니다.

Open Graph 이미지