페이스북 공유하기 기능 썸네일(대표이미지) 추출 오류 : 다른 이미지를 불러오는 경우 원인과 해결책(debugger 등)

가끔씩 사이트에서 페이스북 공유하기 버튼을 클릭하면 

페이스북 공유창에서 본문에 있는 사진과 다른 사진이 썸네일로 추출되는 오류가 있습니다.

아래 이미지처럼...

오늘은 이와 관련된 원인과 해결책을 알아봅니다.

우선 페이스북의 해당 가이드라인...

https://developers.facebook.com/docs/sharing/opengraph/object-properties

권장 사이즈가 후덜덜 해졌습니다.

The URL of the image for your object. It should be at least 600x315 pixels, but 1200x630 or larger is preferred (up to 5MB). Stay close to a 1.91:1 aspect ratio to avoid cropping. Game icons should be square and at least 600x600 pixels. You can include multiple og:image tags if you have multiple resolutions available. If you update the image after publishing, use a new URL because images are cached based on the URL and might not update otherwise.

우선 아래 페이스북의 개발자 페이지로 접속합니다.

https://developers.facebook.com/tools/debug

그리고 장애가 발생하는 페이지의 URL을 입력합니다.

(테스트용 : http://www.ajunews.com/view/20140613112754174)

 

이 경우 아래와 같은 메시지가 출력됩니다.

og:image could not be downloaded or is too small

Provided og:image could not be downloaded or is not big enough. Please use an image that's at least 200x200px and is accessible from Facebook. Image

 

 

즉 페이스북의 가이드라인은 최소 200x200px 이상의 이미지만 썸네일로 인식됩니다.

이는 본문내 아이콘 등의 이미지를 추출하는 오류를 최소화 하고 또한 너무 작은 이미지가 페이스북에서 썸네일로 나올 경우 서비스 품질을 저해하는 이유 등으로 제한을 하고 있는 것으로 판단됩니다

 

 

 

 

아래 예시를 보시죠

큰 이미지를 삽입하고 공유하기를 클릭하면...

 

 

정상적으로 썸네일을 추출합니다.

 

그러나 작은이미지를 삽입할 경우에는...

 

아래와 같이 페이지에서 임의로 이미지를 추출하게됩니다.