링크 공유의 이미지

오픈 그래프 메타 태그

og:image 태그는 누군가가 콘텐츠를 Facebook에 공유하면 나타나는 이미지의 URL을 지정하는 데 사용할 수 있습니다. 이미지 속성의 전체 리스트는 여기에서 사용할 수 있습니다.

요구 사항

  • 최소 허용 이미지 크기는 200 x 200픽셀입니다.
  • 이미지 파일의 크기는 8MB를 초과해서는 안 됩니다.
  • 고해상도 기기에서 최상의 크기와 화질로 표시되려면 1,200 x 630픽셀 이상인 이미지를 사용합니다. 큰 이미지로 링크 페이지 게시물을 표시하려면 최소 600 x 315픽셀 이상인 이미지를 사용해야 합니다.
  • 이미지가 600 x 315픽셀보다 작더라도 링크 페이지 게시물에는 표시되지만 크기는 훨씬 작아집니다.
  • 또한 이미지의 가로세로비가 데스크톱과 모바일 피드에서 동일하게 일치하도록 링크 페이지 게시물을 다시 디자인했습니다. 잘리는 부분 없이 피드에 전체 이미지가 표시되도록 최대한 1.91:1 화면 비율에 가깝게 이미지를 유지해야 합니다.
  • Facebook 크롤러는 gzipdeflate 인코딩만 허용하므로 서버에서 적절한 인코딩을 사용해야 합니다.

이미지 사전 캐싱

콘텐츠를 처음 공유하는 경우 Facebook 크롤러가 공유된 URL에서 메타데이터를 스크래핑하고 캐싱합니다. 크롤러가 적어도 이미지를 한 번 이상 보아야 렌더링할 수 있습니다. 즉, 콘텐츠를 처음 공유하는 사용자는 렌더링된 이미지를 볼 수 없습니다.

이런 현상을 방지하고 첫 번째 좋아요 또는 공유 행동에서 이미지를 렌더링하는 방법은 세 가지가 있습니다.

  1. 공유 디버거로 이미지 사전 캐싱: URL 디버거를 통해 URL을 실행하여 페이지의 메타데이터를 미리 가져옵니다. 이 방법은 콘텐츠의 이미지를 업데이트할 경우에도 사용할 수 있습니다.

  2. 그래프 API를 사용한 이미지 사전 캐싱: 그래프 API를 통해 프로그래밍 방식으로 URL을 강제 스크래핑하여 페이지의 메타데이터를 미리 가져옵니다. 이 방법은 콘텐츠의 이미지를 업데이트할 경우에도 사용할 수 있습니다.

  3. og:image:widthog:image:height 오픈 그래프 태그 사용: 이 태그를 사용하면 비동기적으로 다운로드하고 처리할 필요 없이 즉시 렌더링하도록 크롤러에 이미지 크기를 지정합니다.

이미지 업데이트

각 이미지 URL에 기반하여 참조된 모든 이미지를 캐싱하므로 이미지를 교체할 경우 다음과 같은 작업을 수행해야 합니다.

  • 새로운 이미지에 새로운 URL을 사용하세요. 그렇지 않으면 이미지가 업데이트되지 않습니다.
  • 이전 이미지를 삭제하지 마세요. 이전의 이미지를 참조하는 기존 소식이 있을 수 있습니다.
  • 의 섹션에 나온 지침에 따라 Facebook 크롤러가 새로운 이미지를 다운로드하도록 하세요.

URL에 대해 이미지를 업데이트하더라도 이전 공유의 미리 보기는 자동으로 업데이트되지 않습니다. 이를 위해서는 여기에 나온 설명대로 공유를 새로 고침해야 합니다.

문제 해결

이미지가 URL에 대해 올바르게 표시되지 않는 문제가 있을 경우 공유 디버거이미지 URL을 연결하여 오류가 있는지 확인하세요. Facebook에 문제가 있다고 생각할 경우 버그 신고를 고려해 보세요.