WordPress - Facebook 공유시 OpenGraph 정보가 않보일때

최근에 HTTPS로 홈페이지를 전반적으로 적용하면서, 가장크게 고생한 부분이 바로 Facebook Crawler

요즘 페이스북이나 트위터 같은 추가적인 사용자 공유가 필수인 시대에 만약 내가 공유한것이 미리보기가 않된다면 치명적일 것이다. 그런데 이부분이 HTTPS로 전환하면서 발생했다..

HTTP때에는 잘 되던 것이 HTTPS로 넘어가니 사이트 이름만 딱 뜨는 것이 아닌가…

 

 

이 현상으로 HTTP로 다시 내려갈까를 고민했지만, 역시나 HTTPS의 안전함을 버릴 수 없다.

외 않나오나 확인!

처음 공유시 나오는 이미지나 설명을 뭐라고 하는지 몰라서 Facebook link broken Image 로 검색하니 힌트를 얻을 수 있었다.

OpenGraph 

OpenGraph은 페이스북에서 만든 프로토콜로

그리고 해결 실마리를 찾을 수 있엇는데 웹 사이트에 페이스북 계정 또는 앱 아이디와 오픈그래프 메타태그를 넣어두기만 하면  이 페이지를 공유했을 때 또는 페이스북에 링크를 게시했을 때 카드 처럼 요약 정보와 미리보기 이미지를 확인 할 수 있다.

그리고 디버깅에 가장 큰 도움을 준 사이트는 역시 페이스북에서 만들어서 인지 페이스북에 있었다.

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

여기에서 디버깅을 해보면 오류코드를 잘 확인 할 수 있다.

그리고 WordPress에 가장 잘 맞는 플러그인으로 쉽게 해결 할 수 있었는데, Open Graph이다.

이 플러그인을 설치하고 HTTPS 관련 플러그인들을 비활성화 하니깐 신기하게 요약 정보와 미리보기가 잘 보인다.(물론 일부 오류는 있지만 어떻게 해결해야 할지는 개개인의 몫)

 

추가팁

만약 브라우저로 디버깅 한다면, 크롬의 경우 F12키를 눌려 Element에서 Ctrl + F로 og: 를 검색하여 Source 에 OpenGragh 정보가 들어가 있는지 확인하면 된다.