공유하면 뜨는 미리보기 이미지(오픈그래프) 설정하는 법: 카톡·페북에서 안 깨지게

블로그 글이나 웹페이지 링크를 카카오톡, 페이스북, X(트위터)에 붙여 넣으면 제목과 함께 네모난 미리보기 이미지가 뜹니다. 이걸 결정하는 게 바로 오픈그래프(Open Graph, OG)입니다. 이 이미지가 매력적이면 클릭률이 올라가고, 깨지거나 엉뚱하게 잘리면 아무리 좋은 글도 그냥 지나치게 됩니다. 공유 미리보기 썸네일을 안 깨지게 설정하는 법을 정리했습니다.

오픈그래프가 뭔가요

오픈그래프는 페이스북이 만든 규약으로, 웹페이지가 “내 링크를 공유하면 이런 제목·설명·이미지로 보여 줘”라고 SNS에 알려 주는 정보입니다. HTML 안에 og:title, og:description, og:image 같은 태그로 들어가 있습니다. 카카오톡, 페이스북, X, 디스코드, 슬랙 등 대부분의 플랫폼이 이 규약을 따르기 때문에, OG 이미지 하나만 잘 설정해 두면 어디에 공유하든 같은 미리보기가 뜹니다.

권장 이미지 규격

OG 이미지의 표준 권장 규격은 다음과 같습니다.

• 크기: 1200×630 픽셀 (약 1.91:1 가로 비율)
• 최소 크기: 600×315 픽셀
• 파일 형식: JPG 또는 PNG
• 용량: 가급적 1MB 이하, 최대 8MB 미만

가장 안전한 건 1200×630입니다. 이 비율은 페이스북·X·카카오톡·링크드인이 모두 큰 이미지로 시원하게 보여 주는 규격입니다. 600×315보다 작으면 작은 정사각 썸네일로 쪼그라들거나 아예 안 뜰 수 있으니 주의해야 합니다.

글자가 잘리지 않게 배치하기

OG 이미지는 플랫폼마다 미세하게 다르게 잘립니다. 카카오톡은 정사각형에 가깝게, 페이스북·X는 가로로 넓게 보여 주는 식입니다. 그래서 중요한 글자나 로고는 가운데에 모아 두는 게 안전합니다.

• 텍스트는 이미지 가운데 70~80% 영역 안에 배치합니다.
• 가장자리에는 잘려도 괜찮은 배경이나 여백만 둡니다.
• 글자는 크고 굵게 넣습니다. 미리보기에서는 실제보다 작게 보이기 때문입니다.

미리보기가 안 바뀔 때

이미지를 새로 올렸는데 공유했을 때 옛날 이미지가 계속 뜨는 경우가 많습니다. 플랫폼이 OG 정보를 캐시(임시 저장)해 두기 때문입니다. 이럴 때는 각 플랫폼의 디버거로 캐시를 강제로 새로고침하면 됩니다.

• 페이스북: 샤딩 디버거(Sharing Debugger)에서 URL 입력 후 다시 가져오기
• X(트위터): 카드 검사기(Card Validator)
• 카카오톡: 카카오 개발자 도구의 캐시 삭제 기능

이 과정을 거치면 새 이미지가 곧바로 반영됩니다. 캐시 때문이지 설정이 잘못된 게 아닌 경우가 대부분이니, 이미지를 바꿨다면 먼저 디버거부터 돌려 보세요.

마무리

공유 미리보기 썸네일은 1200×630 규격에 글자를 가운데로 모으는 것만 지켜도 대부분 깔끔하게 뜹니다. 링크 클릭률을 좌우하는 작지 않은 요소이니, 블로그나 랜딩페이지를 운영한다면 OG 이미지를 따로 챙겨 두는 게 좋습니다. 1200×630 비율에 맞춰 이미지를 자르거나 용량을 줄여야 한다면 유튜브 이미지 규격 변환기로 크롭·레터박스와 압축을 한 번에 처리해 보세요. 플랫폼별 이미지 규격이 헷갈린다면 SNS 이미지 규격 한 장 비교표도 함께 참고하세요.