페이스북에 워드프레스 글을 공유하거나 관련 글 플러그인으로 관련 글을 표시할 때 썸네일이 깨지는 경우 여러 가지 원인이 있을 수 있지만, 젯팩 플러그인이 설치되어 있다면 이미지 CDN 기능이 활성화되어 있는지 체크해보시기 바랍니다. JetPack의 Image CDN 모듈이 사용되면 소셜 네트워크 공유 시에 문제가 될 수 있습니다.
또한, 2024년 3월 말부터 OG 이미지 이름에 한글 등 비영문 글자가 포함되면 썸네일이 표시되지 않는 현상이 나타나고 있습니다. 페이스북이 이미지를 처리하는 방식을 바꾼 것으로 보입니다.
[ 이 글은 2024년 7월 29일에 마지막으로 업데이트되었습니다 ]
페이스북 공유 시 워드프레스 썸네일이 깨지는 경우 확인 사항
얼마 전에 네이버나 트위터 공유 시에는 썸네일이 이쁘게 잘 표시되지만 페이스북 공유 시에는 표시되지 않는 문제에 대한 질문이 네이버 카페에 올라온 적이 있습니다.
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을 비활성화한 후에 캐시를 삭제하고 다시 확인하면 이미지가 깨지는 현상이 사라질 것입니다.
특성 이미지 파일 이름에 한글이 포함될 경우
OG 이미지의 파일 이름에 한글이 포함되면 페이스북 공유 시에 썸네일이 깨질 수 있습니다. 살펴보니 페이스북에서 지난 3월 말부터 특성 이미지에 비영문(non-English) 문자가 포함될 경우 이미지가 표시되지 않는 현상이 발생하고 있습니다.
최근 Facebook이 영문이 아닌 이미지 파일명을 처리하는 방식의 변경으로 인해 공유된 이미지가 표시되지 않는 문제가 발생하고 있습니다. Facebook 개발자 포럼에서 논의된 이 문제는 웹마스터들에게 영향을 미치며 약 2주 전(2024년 4월 3일 기준)부터 시작되었습니다. 이 때문에 이미지 파일 이름에 비영문 글자가 있다면 영문으로 변경해야 하며, 향후 업로드 시 호환성을 위해 영숫자 표준을 준수할 것을 제안하고 있습니다.
페이스북이 이미지 파일명을 처리하는 방식을 변경하여 이런 문제가 나타나는 것으로 보입니다. 실제로 테스트를 해보니 이미지 파일명에 한글을 포함한 일본어, 중국어, 히브리어 등 비영문 글자가 포함되면 아래와 같이 페이스북 공유 시 이미지 파일이 깨져서 표시되었습니다.
이미지 파일명에 포함된 한글을 영문이나 숫자로 바꾸면 문제가 해결됩니다.
썸네일이 깨지는 경우 이미지 파일 이름을 변경한 후에 페이스북 공유 디버거 툴에서 주소를 입력하고 디버그 버튼을 누른 다음, 다시 스크랩 버튼을 누르면 페이스북에서 이미지를 제대로 인식하여 표시합니다.
이미지 파일 이름에는 가급적 한글을 포함하지 않는 것이 안전합니다. 이 점은 이 블로그를 통해 여러 차례 언급한 적이 있습니다.
사용자들이 이미지들을 업로드하고 있고, 이미지 파일 이름에 한글이 포함되는 것을 통제할 수 없다면 다음 글에서 소개하는 코드를 사용하여 이미지 파일 이름에 한글이 포함되면 강제로 숫자 등으로 바꿀 수 있습니다.
이미지 파일 이름에 한글을 사용해서는 안 되는 이유에 대한 다음 글도 참고해보세요.
마치며
이상으로 워드프레스 사이트에서 JetPack 플러그인의 Image CDN 때문에 썸네일이 깨지는 문제에 대하여 살펴보았습니다. 젯팩은 사이트 속도에 부정적인 영향을 미치므로 사용하지 않는 것이 바람직할 수 있습니다. 속도가 느린 웹호스팅에서는 특히 젯팩을 사용하지 않는 것을 고려해보시기 바랍니다.
젯팩 통계 때문에 JetPack을 이용하고 있다면 젯팩 통계만 활성화하고 나머지 모듈들은 비활성화하는 것도 가능합니다.
JetPack의 Image CDN 말고 다른 Image CDN은 괜찮은가요?
이미지 CDN을 사용하지 않아서 여기에 대해서는 잘 모르겠습니다.