카톡, 네이버 블로그, 페이스북 등 SNS 공유 시 썸네일 문제

0

워드프레스 글이나 사이트 URL을 네이버 블로그, 네이버 카페, 카카오톡, 페이스북 등 SNS에 공유할 때 썸네일이 제대로 표시되지 않는 문제가 발생하는 경우가 있습니다. 이 문제는 재작년에 다루었지만 이 글을 통해 문제의 원인을 파악하고 해결하는 방법을 간단히 살펴보겠습니다.

사이트 URL을 공유할 때 썸네일이 표시되지 않거나 엉뚱한 이미지가 표시된다면 먼저 HTML 소스 보기를 통해 오픈 그래프 이미지(og image)가 어떻게 설정되어 있는지 확인해보도록 합니다.

워드프레스 OG 이미지

제 블로그의 메인 페이지의 HTML 소스입니다. 본래 Open Graph 이미지로 로고를 지정했습니다. 하지만 이미지가 너무 작아서 다른 이미지가 표시되고 있는 것을 발견하여 임시로 제 블로그 배너로 지정해놓은 상태입니다.

Open Graph 이미지의 규격에 대해서는 페이스북 문서(https://developers.facebook.com/docs/sharing/best-practices#images)를 참고할 수 있습니다. 요약하면...

  • 최소 크기: 600x315픽셀
  • 권장 크기: 1200x630픽셀
  • 종횡비(Aspect ratio)는 1.91:1이 되어야 함

그러므로 너무 작은 이미지를 지정하면 제대로 표시되지 않을 수 있습니다. 1200x630px 크기로 지정하면 가장 잘 표시되고 큰 이미지로 표시된다고 하네요.

만약 og:image 항목이 없다면 Yoast SEO나 All in One SEO 플러그인을 사용하여 OG 이미지를 지정할 수 있습니다. 보통 페이스북 이미지가 og:image로 지정됩니다.

마찬가지로 SNS에 공유되는 제목이나 설명을 변경하고 싶은 경우 SEO 플러그인을 사용하여 og:title과 og:description 항목을 설정하거나 수정하면 됩니다.

Yoast SEO를 사용하는 경우 개별 글이나 페이지 하단에서 Social 섹션의 모든 항목(타이틀, 설명, 이미지)을 입력하도록 합니다. 그러면 페이스북, 네이버 블로그, 네이버 카페, 카톡 등에서 공유할 때 올바르게 제목과 설명, 이미지가 표시될 것입니다. 그리고 네이버 검색엔진에서 노출되는 제목, 설명, 썸네일 이미지도 이 설정과 관련이 있습니다.

저처럼 전면 이미지를 '최근 글'로 지정한 경우 SEO > Social > Facebook에서 모든 설정을 지정해주면 올바르게 표시될 것입니다.

All in One SEO Pack 플러그인을 사용하고 홈페이지의 썸네일이 이상하게 나타나거나 나타나지 않는 경우 경우 워드프레스 알림판 > All in One SEO > 소셜 메타에서 홈 이미지를 설정하면 문제가 해결될 수 있습니다. 그리고 기본값 OG:이미지도 설정해 놓으면 썸네일이 없을 때 기본 이미지로 사용할 수 있습니다.

All in One SEO 소셜 메타 설정

설정하는 이미지의 규격이 맞지 않으면 제대로 표시되지 않을 수 있으므로 가능하면 권장되는 이미지 크기를 설정하는 것이 좋을 것 같습니다.

기본적인 내용이지만 이와 관련된 질문이 지속적으로 제기되어 간단히 정리해보았습니다.

요약하면 SNS 공유 시 이미지나 제목 등이 원하는 대로 표시되지 않으면 Open Graph 항목을 체크해보시기 바랍니다. Yoast SEO나 All in One SEO Pack 혹은 다른 SEO 플러그인을 설치하면 수월하게 OG 태그 항목을 지정할 수 있습니다.

검색엔진에 노출되는 제목, 설명, 썸네일 이지는 설정을 변경한 후에 며칠 기다려야 반영됩니다.

참고:

댓글 남기기

댓글을 입력해주세요!
이름을 입력해주세요