Open Graph 이미지

Open Graph 이미지는 사용자가 링크를 공유할 때 소셜 네트워크, 메신저, 협업 도구가 보여주는 미리보기 이미지입니다. 페이지는 Open Graph 프로토콜의 og:image 메타 태그로 이 이미지를 지정합니다. 이 프로토콜은 2010년 Facebook이 도입했습니다.

태그 값은 이미지의 절대 URL입니다. 선택 태그로 너비, 높이, MIME 타입, 대체 텍스트를 지정할 수 있습니다. 해당 태그는 og:image:width, og:image:height, og:image:type, og:image:alt입니다. X(구 Twitter)는 자체 twitter:image 태그를 읽고, 해당 태그가 없으면 Open Graph 태그를 대신 사용합니다.

서비스는 링크가 처음 공유될 때 이미지를 가져와 캐시에 저장합니다. 따라서 이미지를 바꾼 뒤에도 캐시가 갱신되기 전까지는 변경 사항이 보이지 않을 수 있습니다.

OG 이미지가 중요한 이유

미리보기 이미지가 있는 링크는 피드나 채팅에서 URL만 있는 링크보다 더 넓은 영역을 차지합니다. 독자는 클릭하기 전에 페이지의 내용을 확인합니다. og:image가 없으면 서비스가 페이지에서 이미지를 골라 쓰거나 이미지를 표시하지 않습니다.

OG 이미지 사양

속성	일반적인 기준
크기	1200×630 픽셀
가로세로 비율	약 1.91:1
형식	PNG 또는 JPG
URL	절대 URL이며 HTTPS로 외부에서 접근 가능함
텍스트	가장자리에서 떨어진 곳에 배치함(일부 서비스는 가장자리를 잘라냄)

각 플랫폼은 자체 가이드라인을 공개하며, 이 가이드라인은 시간이 지나면서 바뀝니다. 사용하는 플랫폼의 최신 문서를 확인합니다.

효과적인 OG 이미지를 만드는 방법

1. 1200×630 캔버스로 시작함.
2. 큰 글씨의 짧은 제목과 명확한 제품 스크린샷 또는 시각 요소를 추가함.
3. 중요한 내용을 가운데 영역에 둠.
4. 텍스트가 많은 디자인은 PNG로, 사진은 JPG로 내보내고 파일 크기를 작게 유지함.
5. 각 플랫폼의 미리보기 또는 디버깅 도구에서 링크를 테스트함.

실제 게시 워크플로에서

팀은 블로그 글이나 문서 페이지마다 템플릿으로 OG 이미지를 생성하는 경우가 많습니다. 템플릿 안에 넣는 제품 스크린샷은 실제 인터페이스를 보여줍니다. 슬롯보다 큰 크기로 캡처한 뒤 축소하면 텍스트가 선명하게 유지됩니다.

흔한 실수

• og:image에 상대 URL을 사용함.
• 일부 플랫폼이 잘라내는 가장자리에 텍스트를 둠.
• 이미지를 바꾼 뒤 캐시를 갱신하지 않음.
• 세로로 긴 스크린샷을 읽을 수 없는 가로 띠로 잘라냄.

지금 고칠 이미지가 있나요?

Social Image Composer로 스크린샷에서 1200×630 미리보기를 만들고, Aspect Ratio Calculator로 비율을 확인합니다.

자주 묻는 질문

OG 이미지는 파비콘과 같은가요?

아닙니다. 파비콘은 작은 사이트 아이콘이고, OG 이미지는 공유된 링크에 표시되는 큰 미리보기입니다.

og:image에 SVG를 사용할 수 있나요?

많은 서비스가 SVG 미리보기를 렌더링하지 않습니다. PNG 또는 JPG를 사용합니다.

출처

• Open Graph 프로토콜

관련 자료

• 파비콘: 브라우저 탭에 표시되는 작은 아이콘.
• Image Compressor: 미리보기 파일 크기를 작게 유지함.