SNS 공유 썸네일 깨짐, OG 이미지 포맷 교체로 해결

SNS 공유할 때 썸네일이 안 뜨는 문제를 잡았다.

왜 SVG가 문제였나

og:image에 SVG를 쓰고 있었는데, 대부분의 SNS 크롤러가 SVG를 지원하지 않는다. 이건 꽤 흔한 함정이다. 로컬에서 <img src="og.svg" /> 로 확인하면 멀쩡하게 보이니까 "잘 되는 거 아닌가?" 하고 넘어가기 쉽다. 하지만 카카오톡, 슬랙, 트위터/X, 링크드인 같은 플랫폼은 공유 링크를 붙여넣었을 때 서버 사이드 크롤러가 og:image URL을 직접 요청해서 이미지를 렌더링한다. 이 크롤러들이 허용하는 포맷은 사실상 JPEG, PNG, WebP 정도고, SVG는 대부분 무시하거나 빈 썸네일로 처리해 버린다.

채용(job) 관련 페이지라면 공유 썸네일의 중요도가 더 높다. 채용 공고를 슬랙 채널에 올리거나, 지원자가 링크를 퍼나를 때 썸네일이 없으면 신뢰도가 확 떨어진다. 작은 디테일처럼 보이지만 실제 사용자 경험에서는 꽤 유의미한 차이다.

변경 내용

consts.ts에 OG 이미지 경로를 상수로 관리하고 있었던 덕분에 수정 포인트가 딱 두 곳으로 한정됐다. 이런 식으로 공통 메타데이터 상수를 한 파일에 모아두는 패턴은 나중에 도메인별로 og:image를 바꾸거나 CDN 경로를 교체할 때도 편하다.

// src/consts.ts (변경 후)
export const OG_IMAGE = "/og.png";

경로가 여러 페이지에 흩어져 있었다면 이번 수정이 훨씬 번거로웠을 것이다.

og:image 체크리스트, 다시 짚기

이번 작업 하면서 팀에 공유한 내용이기도 한데, OG 이미지 세팅할 때 자주 놓치는 포인트들을 정리해 두면:

• 포맷: PNG 또는 JPEG. SVG, WebP는 플랫폼에 따라 지원 불확실
• 크기: 1200×630 권장. 너무 작으면 크롤러가 무시하기도 함 (최소 200×200 이상)
• 절대 URL: og:image는 반드시 절대 경로여야 함 (/og.png X → https://example.com/og.png O)
• 캐시 무효화: 이미지를 교체했을 때 카카오/페이스북 디버거로 캐시를 강제 갱신해야 즉시 반영됨
• 파일 접근성: public/ 폴더에 있더라도 빌드 결과물에 실제로 포함되는지 확인

절대 URL 이슈는 별도로 consts.ts에서 SITE_URL과 조합해서 처리하고 있을 텐데, 이번엔 파일 포맷 교체가 핵심이라 경로 로직은 그대로 뒀다.

회고

사실 이런 류의 버그는 개발 중에 발견하기가 어렵다. 브라우저에서 직접 페이지를 열면 아무 문제 없어 보이고, OG 태그가 소스에 박혀 있으니 "세팅은 됐다"고 착각하기 딱 좋다. 실제로 SNS에 공유해보거나 Open Graph 디버거나 카카오 공유 디버거 같은 도구로 직접 확인해봐야 잡히는 문제다.

앞으로 새 페이지에 OG 이미지 붙일 일이 생기면 작업 완료 체크리스트에 "SNS 디버거로 썸네일 렌더 확인"을 반드시 넣어두는 게 맞겠다 싶었다. 코드리뷰 단계에서 포맷까지 챙기기는 쉽지 않으니까.

끝.

🛒 이 글과 어울리는 추천 상품

• 기계식키보드 쿠팡에서 보기 →
• 모니터 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.