워드프레스 Rank Math: WEBP 파일을 특성 이미지로 지정할 경우 OG 이미지 문제

워드프레스에는 다양한 무료 및 유료 SEO 플러그인이 있습니다. Yoast SEO 플러그인이 많이 사용되는 SEO 플러그인이지만 저는 Rank Math SEO 플러그인을 사용하고 있습니다. Rank Math는 무료 버전에서도 Yoast SEO의 유료 버전에 탑재된 기능을 몇 가지 제공합니다. 

WEBP 파일을 특성 이미지로 지정할 경우 Yoast SEO 등에서는 문제가 발생하지 않지만 Rank Math에서는 [**og:image**]에 WEBP 파일을 지원하지 않는 문제가 발생합니다.

[참고*2023년 6월 현재 이 문제는 더 이상 나타나지 않습니다. Rank Math에서 webp 파일을 특성 이미지로 지정해도 페이스북 등에서 공유할 때 썸네일이 잘 표시됩니다.*]

워드프레스 Rank Math: WEBP 파일을 특성 이미지로 지정할 경우 OG 이미지 문제

워드프레스에서는 버전 5.8부터 WebP 파일을 지원하고 있고 워드프레스 6.1 버전에는 WebP를 기본 이미지 포맷으로 코어에 통합될 것이라는 소문이 있습니다. 하지만 몇 가지 이슈 때문에 워드프레스 6.1에 WEBP가 기본 이미지 포맷으로 통합되는 것은 유보된 것 같습니다.

워드프레스 6.1에서 WebP가 기본 이미지 포맷으로 코어에 통합 예정 - 워드프레스 정보꾸러미

WEBP 파일 포맷을 사용하면 PNG 파일이나 JPG 파일에 비해 파일 크기를 줄일 수 있기 때문에 웹 용량과 트래픽 절감에 도움이 될 수 있습니다.

[참고*추후 워드프레스에 WEBP 파일 포맷이 기본 이미지 포맷으로 통합되는 경우, JPG 이미지를 업로드하면 WEBP 포맷으로 된 썸네일도 함께 생성되는 것 같습니다. 이 때문에 더 많은 용량이 필요할 수 있습니다. 처음부터 이미지를 WebP 파일로 변환하여 업로드하면 웹 서버 공간 크기를 줄일 수 있습니다.*]

워드프레스에서는 WebP 파일을 특성 이미지로 지정할 수 있습니다. 특성 이미지로 WEBP 파일을 지정해도 문제없이 썸네일이 표시됩니다.

하지만 Rank Math에서는 [**og:image**]에 WEBP 파일이 지원되지 않기 때문에 페이스북 등에서 포스트를 공유할 때 썸네일이 표시되지 않거나 전역 설정에서 지정한 썸네일이 표시될 수 있습니다.

얼마 전까지 WebP 파일을 특성 이미지로 지정하면 [**og:image**]가 누락되었지만 이제는 기본 썸네일이 표시되는 것 같습니다. Yoast SEO 등에서는 문제가 발생하지 않습니다.

WEBP 포맷이 og image 태그에 사용할 수 없는 문제에 대하여 Rank Math는 다음과 같이 답변하고 있습니다.

The only way you can add the webp images in the opengraph tag is by removing the og:image tag added by Rank Math and adding a custom code to include this tag with the webp image. We validate the image for a valid format before adding it to og:image, so the webp image will fail this validation as it is not supported by Facebook.

오픈그래프 태그에 webp 이미지를 추가하는 유일한 방법은 Rank Math에서 추가한 og:image를 제거하고 webp 이미지로 된 태그를 포함하는 사용자 정의 코드를 추가하는 것이라고 합니다. 

Rank Math에서 이 문제를 해결하고 싶은 경우 OG — Better Share on Social Media 플러그인을 설치하여 og:image 태그를 추가할 수 있습니다.

하지만 OG 플러그인에서 생성하는 og 관련 태그가 Rank Math에서 생성하는 태그와 겹출 우려가 있습니다. 이 경우 다음과 같은 코드를 테마의 함수 파일에 추가하면 Rank Math에서 생성하는 og 태그가 비활성화됩니다.

// How to remove OG tags
// OG 태그 제거 방법
add_action( 'rank_math/head', function() {
	remove_all_actions( 'rank_math/opengraph/facebook' );
});

위의 코드는 테마(가급적 차일드 테마 설치) 내의 함수 파일에 추가해야 합니다(예: 아바다 테마의 경우 [**wp-content/themes/Avada-Chid/functions.php**]). FTP에 접속하여 테마 파일을 수정하시기 바랍니다.

마치며

WordPress에서는 SEO 플러그인을 어느 것을 사용해도 관계 없지만, 경험상 Rank Math나 Yoast SEO를 사용하는 것이 무난한 것 같습니다. WebP 파일을 특성 이미지로 사용하는 경우에는 현재 Rank Math는 og:image 태그에 WebP 파일 포맷이 지원되지 않으므로 Yoast SEO 등으로 바꾸는 것을 고려해볼 수 있을 것 같습니다. 또는, 특성 이미지만 JPG 파일 포맷으로 만들어 지정하는 것도 고려해볼 수 있을 것입니다.

참고

https://avada.tistory.com/2745

화면 캡처 프로그램 Snagit: WebP 이미지 포맷 지원

효과적인 글쓰기를 위한 Rank Math 활용 방법 (SEO 글쓰기) - 워드프레스 정보꾸러미