페이스북에 워드프레스 게시글을 공유하거나 관련 글을 나열하는 플러그인을 사용할 때 썸네일(특성 이미지)이 제대로 표시되지 않는 문제가 발생하는 경우 여러 가지 원인이 있을 수 있습니다. 특히, 젯팩 플러그인을 사용하고 있다면 이미지 CDN 기능이 활성화되어 있는지 확인해보시기 바랍니다. 젯팩의 이미지 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은 젯팩 모듈에서 비활성화할 수 있습니다.
젯팩이 활성화되어 있다면 [pcode]https://사이트-도메인-이름.com/wp-admin/admin.php?page=jetpack_modules&s=image[/pcode]에 접속하여 image 관련 모듈을 표시할 수 있습니다.
또는, 워드프레스 관리자 페이지 » JetPack » 설정 페이지로 이동하여 맨 하단의 “모듈“을 클릭하여 모듈 페이지로 이동할 수 있습니다. 모듈 페이지의 오른쪽 패널에서 image를 검색하면 이미지 CDN이 표시됩니다.
아래와 같이 이미지 관련 모듈이 표시되면 이미지 CDN을 비활성화하도록 합니다.
비활성화가 되면 위의 그림과 같이 “비활성화” 버튼 대신 “활성화” 버튼이 표시됩니다.
이미지 CDN을 비활성화한 후에 캐시를 삭제하고 다시 확인하면 이미지가 깨지는 현상이 사라질 것입니다.
이미지 이름에 한글이 포함될 경우 (추가)
페이스북 정책이 업데이트되면서 OG 이미지 이름에 한글 등 비영문 글자가 포함될 경우 페이스북 공유 시 이미지가 깨지는 현상이 발생하고 있습니다.
특성 이미지 이름에 한글을 포함하지 않고 영문과 숫자만 사용하는 것이 안전합니다.
“페이스북 공유 시 워드프레스 썸네일이 깨지는 경우 확인 사항“의 “특성 이미지 파일 이름에 한글이 포함될 경우”를 참고해보세요.
마치며
이상으로 워드프레스 사이트에서 JetPack 플러그인의 Image CDN 때문에 썸네일이 깨지는 문제에 대하여 살펴보았습니다. 젯팩은 사이트 속도에 부정적인 영향을 미치므로 사용하지 않는 것이 바람직할 수 있습니다. 속도가 느린 웹호스팅에서는 특히 젯팩을 사용하지 않는 것을 고려해보시기 바랍니다. 젯팩 통계 때문에 젯팩 플러그인을 설치했다면 젯팩 통계를 제외한 나머지 모듈들은 비활성화하는 것도 하나의 방법일 수 있습니다.
공유하기