안녕하세요. KBoard 게시물이 아닌 일반 페이지에서의 소셜 공유에 대해 문의드립니다.
http://www.celltree.co.kr/event-2017/
페이지의 디자인 구조상 소셜 공유 버튼을 '페이지에 표시'로 출력하지 않고 하드코딩으로 넣었는는데
카카오톡/스토리, 네이버 블로그/카페는 정상적으로 공유 내용이 출력이 되는 반면에 네이버 밴드와
페이스북은 아래와 같이 홈페이지 주소와 로고 썸네일이 출력됩니다.
<div class="cosmosfarm-share-buttons cosmosfarm-share-buttons-default cosmosfarm-align-right">
<span class="cosmosfarm-share-button-title">
<img src="/cosmosfarm-share-buttons/layout/default/images/icon-share.png" alt="공유하기" title="공유하기"></span>
<button class="cosmosfarm-share-button cosmosfarm-naver" onclick="return cosmosfarm_share('naver', 'http://www.celltree.co.kr/event-2017/', '셀트리 캠페인 - [엄마는 옳다] 소문내기 이벤트');"><img src="/cosmosfarm-share-buttons/layout/default/images/icon-naver.png" alt="네이버" title="네이버"></button>
<button class="cosmosfarm-share-button cosmosfarm-band" onclick="return cosmosfarm_share('band', 'http://www.celltree.co.kr/event-2017/', '셀트리 캠페인 - [엄마는 옳다] 소문내기 이벤트');"><img src="/cosmosfarm-share-buttons/layout/default/images/icon-band.png" alt="밴드" title="밴드"></button>
<button class="cosmosfarm-share-button cosmosfarm-kakaostory" onclick="return cosmosfarm_share('kakaostory', 'http://www.celltree.co.kr/event-2017/', '셀트리 캠페인 - [엄마는 옳다] 소문내기 이벤트');"><img src="/cosmosfarm-share-buttons/layout/default/images/icon-kakaostory.png" alt="카카오스토리" title="카카오스토리"></button>
<button class="cosmosfarm-share-button cosmosfarm-kakaotalk" onclick="return cosmosfarm_share('kakaotalk', 'http://www.celltree.co.kr/event-2017/', '셀트리 캠페인 - [엄마는 옳다] 소문내기 이벤트');"><img src="/cosmosfarm-share-buttons/layout/default/images/icon-kakaotalk.png" alt="카카오톡" title="카카오톡"></button>
<button class="cosmosfarm-share-button cosmosfarm-twitter" onclick="return cosmosfarm_share('twitter', 'http://www.celltree.co.kr/event-2017/', '셀트리 캠페인 - [엄마는 옳다] 소문내기 이벤트');"><img src="/cosmosfarm-share-buttons/layout/default/images/icon-twitter.png" alt="트위터" title="트위터"></button>
<button class="cosmosfarm-share-button cosmosfarm-facebook" onclick="return cosmosfarm_share('facebook', 'http://www.celltree.co.kr/event-2017/', '셀트리 캠페인 - [엄마는 옳다] 소문내기 이벤트');"><img src="/cosmosfarm-share-buttons/layout/default/images/icon-facebook.png" alt="페이스북" title="페이스북"></button></div>
- 페이스북
- 네이버밴드
그럼 답변 부탁드립니다.
감사합니다.
안녕하세요~^^
밴드나 페이스북 등 거의 대부분의 서비스에서는
홈페이지의 SEO 정보를 참조해서 제목, 썸네일 등을 표시하고 있습니다.
특히 많은 서비스에서 Open Graph protocol 정보를 참조하고 있습니다.
홈페이지에 참조할 정보가 없다면 각각 서비스에서는 자동으로 이미지를 선택해서 썸네일로 보여줍니다.
또한 페이스북 등에 공유되는 링크 정도만 전송이 가능하기 때문에,
썸네일 이미지 정보를 함께 보내고 싶어도 불가능합니다.
그리고 잘못된 썸네일에서 제대로 된 썸네일로 바꿔줘도 페이스북 등에 캐시가 남아있어서 쉽게 이미지가 바뀌지 않습니다.
SEO 정보 혹은 Open Graph protocol 정보를 페이지의
<head></head> 태그 사이에 추가해주셔야 합니다.
고맙습니다.
답변 감사합니다.
말씀하신 대로라면 아무래도 접근 방식을 바꿔야겠네요.
페이지 내에서 og:image를 추가해도 <head>쪽에 들어가 있지 않으니 여전히 페이스북에서는 상위에 있는 로고 파일을 끌어가는 것 같습니다.
https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Fwww.celltree.co.kr%2Fevent-2017%2F
혹시 워드프레스에서 개별적으로 페이지의 헤더를 바꿀 수 있는 방법이 있을까요?
아니면 KBoard 내에서의 SNS 공유는 깔끔하게 잘 되니 KBoard에서 이벤트 페이지를 다시 구현하는게 나을까요?
감사합니다^^
안녕하세요~^^
페이지의 헤더 안에 메타 태그를 넣는 방법으로
플러그인을 통해 추가하는 방법과 테마의 functions.php 파일에 직접 추가하는 방법이 있습니다.
아래 링크를 참고해보세요.
http://hwangc.com/add-facebook-meta-tag/
위의 방법대로 해결되지 않으신다면 KBoard(케이보드) 플러그인으로 구현하시는 것도 괜찮을 것 같습니다.ㅎㅎ
고맙습니다.
답변 감사합니다.
두 가지 모두 테스트 해봐야겠네요^^