[워드프레스 tip] 페이스북에 공유한 링크 게시물의 이미지 변경하기

워드프레스에 dundin.net 홈페이지를 개설 하고, 기존에 네이버 블로그에 올리던 카이승트 만화를 한땀 한땀 옮겼다. WordPress로 이사 온 후 카이승트 만화 첫 업로드 하고 Facebook 카이승트 알리미 페이지에 홍보 했는데 생각보다 이런저런 이슈가 있어서 정리해 보고자 한다.

네이버 블로그와 워드프레스 링크를 페이스북에 링크로 공유했을 때 차이

open_graph_01

왼쪽이 기존의 네이버 블로그에 있던 만화 (카이승트 시즌 2-3 화)를 링크한 스크린 샷이고 오른쪽이 워드프레스 링크 (카이승트 시즌 2 – 4화)를 링크한 캡쳐이다. 리스트 화면에서 심플하게 보이기 위해서 제목을 ‘카이승트 시즌 2 – 4화’ 가 아닌 그냥 ‘4화’ 로 넣었더니 페이스북 링크 제목까지 저렇게 나와 버렸다.
왼쪽은 제목이 볼드체로 정확하게 써있어서 ‘카이승트’라는 단어의 시인성이 좋고, 우연이긴 하지만 썸네일이 잘 나온 케이스이다. 그래서인지 블로그로 올린 왼쪽 게시물은 페이스북 좋아요 67명 / 도달 7,000 여명 인 것에 비해서 오른쪽의 WordPress 링크 게시물은 좋아요 18개 / 도달 3,000여개에 그쳤다. (설마 그냥 인기가 떨어졌다거나???)

WordPress PlugIn을 이용해서 Facebook OpenGraph 설정하기

Facebook은 보통 링크의 첫번째 이미지를 링크의 섬네일로 사용한다. 내가 원하는 이미지를 따로 설정하고자 한다면 WordPress 에서 해당 기능을 제공하는 OpenGraph Plugin 을 설치하면 된다. 검색해 보다가 아래 플러그인이 평가가 좋길래 설치해 보았다.
다운로드 링크 -> https://wordpress.org/plugins/wonderm00ns-simple-facebook-open-graph-tags/
open_graph_02

설치하고 나면 Post Edit 화면에 아래와 같은 창이 생길 것이다. 본인이 원하는 이미지를 여기에 넣어주면 된다. 권장 이미지 사이즈는 1200 x 630 이며 비율은 1: 1.9 이다
open_graph_03

Facebook debugger에서 메타정보 확인하기

Facebook Debugger -> https://developers.facebook.com/tools/debug/sharing/
위 주소에서 Facebook 크롤러가 내 포스팅의 정보를 제대로 긁어가고 있는지 확인 할 수 있다.
open_graph_04
open_graph_05

Facebook 에서 링크 refresh 하기

open_graph_06
은근히 페이스북에서 링크 정보 업데이트하는 기능을 찾기가 어려웠다.
1. 게시물의 날짜를 클릭해서 큰 화면으로 본다
2. 오른쪽 드롭다운 버튼에서 공유첨부 파일 새로 고침 이라는 버튼을 누른다.

Facebook Opengraph를 이용해서 공유한 링크가 잘 나오는지 확인 해 보자

수정 전
open_graph_08
수정 후
open_graph_07