얼마 전 facebook 플러그인을 이용해 timeline에 포스트를 공유해봤습니다. 공유가 잘된다 싶더니 원하지 않는 사진이 포스트와 함께 facebook에 게시가 되는 현상이 발생했습니다. 개발에 관한 포스트 내용인데 우리 아이 사진이 타이틀로 올라오는 문제가 생긴거죠.
그래서 facebook 디버그 페이지에서 점검을 해보니 웹사이트 메타 데이터에 이미지가 없어 facebook에서 사용가능한 사진을 무작위로 선택해 타이틀로 사용되고 있었습니다. 블로그 로고가 있는데 불구하고 사용이 안되고 있었던 것입니다.
이런 경우 점검 방법은 아래와 같습니다.
1. https://developers.facebook.com/tools/debug/ 에서 자신의 URL을 입력
2. Object Properties 의 og:image 가 정상적으로 나오는지 확인
3. 정상적으로 나오지 않는다면 Share Preview 의 나열된 이미지로 facebook 대표 이미지가 사용되게 됩니다.
og:image 설정 방법
1. 웹사이트 상단 <head>~</head> 사이에 아래 메타 태그를 넣어주고 저장합니다.
<meta property="og:image" content="http://www.website.com/my_image.jpg" />
2. 위에서 설명드린 점검 방법에 따라 다시 한번 확인합니다.
주의 사항
1. content 안에 이미지가 외부에서 정상적으로 노출되는 이미지인지 경로를 웹브라우저 주소창에 입력해 확인 해봅니다.
2. 이미지는 최소 200px * 200px로 되어있어야 합니다.
3. 워드프레스의 경우 WP Super Cache와 같은 페이지 캐싱 플러그인의 캐시 내용을 초기화(삭제) 시켜주셔야 합니다.