[워드프레스] 글(포스트) 썸네일이 생성 안되네요?

글 작성 시, 특성 이미지 설정은 공통
테마파일 functions.php 코드를 수정하거나,
AIOSEO 플러그인에서 소셜 네트워크 설정

[잉여타임즈] 카카오톡 링크 공유 예시 - 강인경 맥심화보, 환승연예, 아이유 가방공개 [출처=구글 검색] — [잉여타임즈] 카카오톡 링크 공유 예시 – 강인경 맥심화보, 환승연예, 아이유 가방공개 [출처=구글 검색]

워드프레스 혹은 신규 사이트를 구축하고 도메인까지 연결했다면, 글은 몇개 없지만 마음이 웅장해 집니다.

첫 글의 벅찬 마음에 지인에게 SNS로 공유했는데 썸네일이 나오지 않아 당황하셨나요? 뭔가 어그로가 끌릴만한 사진도 첨부 했는데 말이죠?

썸네일이 표시되게 하는 방법은 크게 두 가지 방법이 있습니다.

하나는 테마 파일에 코드를 추가하는 방법이고, 다른 하나는 필자가 사용하는 All in One SEO(AIOSEO) 플러그인에서 설정하는 방법입니다.

간단하게 오픈 그래프(Open Graph) 메타태그에 대해 알아보고, 각각의 방법 알아보도록 하겠습니다.

오픈 그래프(Open Graph) 메타태그란?

오픈 그래프 혹은 og:image 검색어로 해당 포스팅에 접근 하셨다면, 대략적인 감이 있으시겠지만 아니라면 기본적인 개념은 알고 가시면 도움이 됩니다.

오픈 그래프 매타테그는 해당 웹 페이지의 요약정보 입니다.

아래는 특정 웹페이지에서 마우스 우클릭 – 페이지 소스 보기를 했을때 내용의 일부 입니다.

...
<meta property="og:locale" content="ko_KR" />
<meta property="og:site_name" content="잉여 타임즈 - SurplsTimes" />
<meta property="og:type" content="article" />
<meta property="og:title" content="2022년 11월 공모주 청약일정 | 미증시 캘린더 - 잉여 타임즈" />
<meta property="og:description" content="2022년 11월 공모주 청약일정 및 간단한 미국 증시 캘린더 입니다." />
<meta property="og:url" content="https://www.surplstimes.com/koreaipo-calendar-2022-11/" />
<meta property="article:published_time" content="2022-10-27T15:35:51+00:00" />
<meta property="article:modified_time" content="2022-10-27T18:02:42+00:00" />
...

소스 상단에 <meta property=로 시작하는 여럿 줄들이 있습니다. 이는 해당 글 주소를 SNS에 공유했을때 처음 표시되는 제목, 사이트, 썸네일 이미지 등과 같은 정보이고 이를 기반으로 썸네일과 함께 가독성 좋은 박스가 표시 됩니다.

우리의 관심사는 왜 썸네일이 표시되지 않는가 인데, 이는 <meta property=”og:image” … 로 정의 됩니다. 예로 제시한 위의 소스에는 정의되어 있지 않습니다. 이 부분이 썸네일 미표시의 이유입니다.

하지만, 워드프레스에 관대한 카카오톡, 링크드인은 og:image가 정의되어 있지 않더라도, 앞으로 설명 할 소스에 특성 이미지 부분을 참고해 썸네일을 표시해 줍니다.

하지만, 텔레그램, 페이스북, 트위터는 원칙적으로 썸네일을 표시하지 않습니다.

공통 – 글에 특성 이미지 추가하기

워드프레스는 썸네일 이미지를 특성 이미지란 이름을 사용합니다.

글 작성 중 이미지 추가가 가능합니다. 여기까지 하시고 글을 발행 하신다면, 카카오톡, 링크드인 글 공유에 썸네일은 가능합니다.

방법 1 – 테마 function.php 수정

여타 플러그인의 도움을 받지 않고 순수하게, 자동으로 글마다 og:image 메타태그를 생성하는 방법입니다.

[ 외모 > 테마 파일 편집기 ]에서 functions.php 파일을 열어봅니다.

[잉여타임즈] 워드프레스 설정페이지 - 테마 파일 편집기 - functions.php — [잉여타임즈] 워드프레스 관리자 페이지 – 외모 – 테마 파일 편집기 – functions.php

functions.php를 여시고 맨 하단에 아래 내용을 추가해 저장합니다.

내용을 요약 하자면, 해당 포스팅의 thumbnail에 정의된 이미지 주소를 얻어 웹페이지 <head>안에 <meta property=”og:image” ..를 추가합니다. 만약, thumbnail내용이 없다면, 기본 이미지로 og:image를 추가합니다.(라인 9)

function getOgImage()
{
    global $wpdb;
		
    $ogimage = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );	
    $ogimageLen = strlen($ogimage);
	
    if( $ogimageLen == 0) {
        echo '<meta property="og:image" content="https://www.surplstimes.com/wp-content/uploads/2022/10/default_img.png"/>';
    }
    else {
        echo '<meta property="og:image" content="'.$ogimage.'"/>';
    }
}
add_action('wp_head', 'getOgImage');

저장 후, 글에 소스 보기에서 og:image로 검색해 보면, 해당 태가 자동추가 됬음을 확인 할 수 있습니다.

해당 방법으로 <meta property=”og:image”를 자동 생성 설정 하더라도, 사용하는 SEO 플러그인(All in One SEO, Yoast SEO와 같은)에 의해 og:image가 생성돼, 페이지 소스 상 og:image가 2개가 되는 경우가 있습니다. 해서, 관리자 페이지의 [ 외모 > 사용자 정의하기 > 사이트 아이덴티티 > 로고 ] 를 제거해 주세요.

방법 2 – All in One SEO(AIOSEO) 플러그인 사용

[ All in One SEO ] 메뉴에서 소셜 네트워크에 진입 합니다.

Facebook 탭에서 오픈 그래프 마크 업 활성화하고, 기본 게시물 이미지 소스를 대표 이미지로 변경합니다.

[잉여타임즈] 워드프레스 관리자 페이지 - All in One SEO - 소셜 네트워크 - Facebook — [잉여타임즈] 워드프레스 관리자 페이지 – All in One SEO – 소셜 네트워크 – Facebook

글의 소스 보기를 하면 og:image, og:image:secure_url, og:image:width, og:image:heigh가 추가 된것을 확인 할 수 있습니다.

<meta property="og:image" content="https://www.surplstimes.com/wp-content/uploads/2022/11/myimage.jpg" />
<meta property="og:image:secure_url" content="https://www.surplstimes.com/wp-content/uploads/2022/11/myimage.jpg" />
<meta property="og:image:width" content="1440" />
<meta property="og:image:height" content="756" />

Twitter 탭에서 Twitter 카드를 활성화 하고, 기본 게시물 이미지 소스를 대표 이미지로 설정합니다.

[잉여타임즈] 워드프레스 관리자 페이지 - All in One SEO - 소셜 네트워크 - Twitter — [잉여타임즈] 워드프레스 관리자 페이지 – All in One SEO – 소셜 네트워크 – Twitter

이 또한, 소스 보기를 하면 twitter:card, twitter:title, twitter:description, twitter:image가 추가 됐음을 확인 할 수 있습니다.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="this is title" />
<meta name="twitter:description" content="this is description" />
<meta name="twitter:image" content="https://www.surplstimes.com/wp-content/uploads/2022/11/myimage.jpg" />

썸네일 테스트 방법

문론, SNS에 링크를 공유해, 썸네일이 잘 적용 됐는지 확인 할 수도 있지만, 좋은 사이트가 있습니다.

소셜 쉐어 프리뷰

소셜 쉐어 프리뷰는 페이스북, 트위터, 링크드인, 핀터레스트에서 썸네일이 잘 표시 될지, 검사해 줍니다.

페이스북이 잘 표시 된다면, 카카오톡은 오케이! 입니다.

[잉여타임즈] 소셜 쉐어 프리뷰 - 썸네일 확인 사이트 - 페이스북, 트위터, 링크드인, 핀터레스트 — [잉여타임즈] 소셜 쉐어 프리뷰 – 썸네일 확인 사이트 – 페이스북, 트위터, 링크드인, 핀터레스트

Social Share Preview – Check social media link previews

Check how the link previews of a website look…

카카오 개발자, 공유 디버거 – 카카오톡 썸네일 캐시 삭제

카카오톡은 링크를 채팅 창에 공유하면, 매번 썸네일을 생성하지 않고, 일정시간 이미지 캐시를 생성해 재 사용 합니다.

그래서, 썸네일 이미지를 변경 했음에도 불구하고, 카카오톡에 링크를 다시 올리면 바로 썸네일이 변경되지 않는 이유가 여기에 있습니다. 아래 사이트는, 이 캐시를 삭제해 주는 사이트 입니다.

약간 난의도가 있기는 합니다. 개발자 회원가입이 필요합니다.

Kakao Developers – 공유 디버거

[잉여타임즈] surplstimes@gmail.com

[워드프레스] 글(포스트) 썸네일이 생성 안되네요? | og:image