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

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

카톡, 네이버 블로그, 페이스북 등 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 항목을 설정하거나 수정하면 됩니다.

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

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

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

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

Rank Math SEO 플러그인을 사용하는 경우 "워드프레스 Rank Math에서 사이트 제목과 사이트 설명 추가하기(SEO 타이틀)"를 참고해보세요.

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

All in One SEO 소셜 메타 설정

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

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

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

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

페이스북 등 SNS에서 공유 시 오류가 발생하는 경우 디버그하기

페이스북 등 소셜 네트워크에 글을 공유할 때 오류가 발생하는 경우 (예: 403 Forbidden 에러), 페이스북의 개발자용 공유 디버그 툴을 이용하여 진단할 수 있습니다.

  • https://developers.facebook.com/tools/debug/

참고:


8개 댓글

  1. 질문 드립니다!
    저는 all in one seo 를 사용중입니다.
    og image 는 설정을 했고 대표도메인을 공유했을때는 og image 가 노출되지만
    서브페이지를 공유했을때는 og image 가 노출되지 않습니다.

    그래서 페이지 > 페이지수정 > 페이지 별도로 설정되는 all in one seo > [소셜설정]탭
    에서 사용자지정 이미지를 지정해보고, 페이지의 특성이미지를 지정해봐도 og image 가 노출이 되지 않아요ㅠ
    (이미지 참고 : https://www.dropbox.com/s/4wpg60rfviq8kzn/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202020-09-22%20%EC%98%A4%ED%9B%84%2011.38.54.png?dl=0)

    대표페이지 말고 각 페이지의 og image 를 설정하는 방법은 없을까요?

    1. 안녕하세요, sky님.

      저는 Yoast SEO와 Rank Math를 사용하고 있어 AIO SEO에서는 확인할 수 없지만, AIO SEO에서 사용자 지정 이미지를 설정하면 적용될 것 같습니다. 이미지를 설정한 후에 HTML 소스에서 Og image가 지정한 이미지로 설정되었는지 체크해보시기 바랍니다.

      그리고 썸네일 규격이 있으므로 규격에 맞게 설정했는지도 체크해보시기 바랍니다.

      https://www.thewordcracker.com/basic/sns-%EA%B3%B5%EC%9C%A0-%EC%8B%9C-%EC%8D%B8%EB%84%A4%EC%9D%BC-%EB%AC%B8%EC%A0%9C/

      1. 감사합니다! 그게 문제가 아니었더라구요
        이게 적용되는데까지 약간의 시간이 소요되는건 알고있었는데 좀 더 많은 시간이 걸렸던것 같습니다 ㅎ
        해결됐어요!
        특성이미지 설정이 아니고

        페이지 > 페이지수정 > 페이지 별도로 설정되는 all in one seo > [소셜설정]탭
        에서 사용자지정 이미지를 지정

        이 맞았습니다!

      2. 문제가 해결되었다니 다행이네요.
        실제로 적용되는 데 시간이 걸리는가 보네요.

        글(페이지가 아님)을 작성할 경우 보통 (사용자가 다른 이미지로 수동으로 변경하지 않으면) 특성 이미지가 og image로 자동으로 설정될 것입니다.

        아침 저녁으로 날씨가 쌀쌀하네요. 감기 조심하세요.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.