페이스북에 워드프레스 글을 공유하거나 관련 글 플러그인으로 관련 글을 표시할 때 썸네일이 깨지는 경우 여러 가지 원인이 있을 수 있지만, 젯팩 플러그인이 설치되어 있다면 이미지 CDN 기능이 활성화되어 있는지 체크해보시기 바랍니다. JetPack의 Image CDN 모듈이 사용되면 소셜 네트워크 공유 시에 문제가 될 수 있습니다.
워드프레스 썸네일이 깨지는 경우 확인 사항
얼마 전에 네이버나 트위터 공유 시에는 썸네일이 이쁘게 잘 표시되지만 페이스북 공유 시에는 표시되지 않는 문제에 대한 질문이 네이버 카페에 올라온 적이 있습니다.
Rank Math의 SNS 미리 보기에서는 썸네일(특성 이미지)이 잘 표시되었지만 실제 페이스북에 글을 공유하면 다음과 같이 썸네일이 로드되지 않았습니다.
페이스북에 공유할 때 에러가 발생하면 페이스북 공유 디버거 사이트에서 해당 URL을 입력하여 오류의 원인을 추적할 수 있습니다.
위의 그림에서는 "잘못된 이미지 콘텐츠 유형" 오류가 발생하면서 og:image URL에 잘못된 콘텐츠 유형이 있어 이미지로 처리될 수 없다고 설명하고 있습니다.
og:image URL이 https://i0.wp.com...으로 시작하고 있습니다. 이미지 URL이 https://i0.wp.com 또는 비슷한 도메인으로 시작하는 경우 젯팩의 이미지 CDN이 사용되고 있음을 짐작할 수 있습니다.
상기 사례에서는 젯팩의 이미지 CDN을 비활성화하면 문제가 해결될 것입니다. 마찬가지로 본문이나 최신 글 리스트, 관련 글 리스트 등에서 썸네일 이미지 URL이 https://i0.wp.com 또는 비슷한 도메인으로 되어 있고 이미지가 깨지는 경우 젯팩의 이미지 CDN을 비활성화하여 문제를 해결할 수 있습니다.
젯팩 이미지 CDN 모듈 비활성화
물론 다른 원인으로 인해 이미지가 깨질 수 있습니다. 다양한 원인 중에서 젯팩이 설치되어 있는 환경에서 이미지가 깨지는 경우에는 먼저 젯팩의 이미지 CDN(이전 명칭 "Photon")을 의심할 수 있습니다. 이미지 CDN은 젯팩 모듈에서 비활성화할 수 있습니다.
젯팩이 활성화되어 있다면 https://사이트-도메인-이름.com/wp-admin/admin.php?page=jetpack_modules&s=image에 접속하여 image 관련 모듈을 표시할 수 있습니다.
또는, 워드프레스 관리자 페이지 » JetPack » 설정 페이지로 이동하여 맨 하단의 "모듈"을 클릭하여 모듈 페이지로 이동할 수 있습니다. 모듈 페이지의 오른쪽 패널에서 image를 검색하면 이미지 CDN이 표시됩니다.
아래와 같이 이미지 관련 모듈이 표시되면 이미지 CDN을 비활성화하도록 합니다.
비활성화가 되면 위의 그림과 같이 "비활성화" 버튼 대신 "활성화" 버튼이 표시됩니다.
이미지 CDN을 비활성화한 후에 캐시를 삭제하고 다시 확인하면 이미지가 깨지는 현상이 사라질 것입니다.
마치며
이상으로 워드프레스 사이트에서 JetPack 플러그인의 Image CDN 때문에 썸네일이 깨지는 문제에 대하여 살펴보았습니다. 젯팩은 사이트 속도에 부정적인 영향을 미치므로 사용하지 않는 것이 바람직할 수 있습니다. 속도가 느린 웹호스팅에서는 특히 젯팩을 사용하지 않는 것을 고려해보시기 바랍니다.
댓글 남기기