0

스크린샷 2015-08-10 13.57.03.png


페이스북에 링크를 공유할 때, 위의 그림과 같이 해당 사이트의 이미지와 제목, 설명이 나오는 경우를 종종 보셨을 거에요.

위와 같이 커스덤화된 링크박스(?)를 보여주는 방법은 매우 간단합니다.


와 사이에 아래와 같은 meta 태그를 추가해주면 됩니다.


<meta property="og:type" content="website">
<meta property="og:title" content="제목에 뜰 내용(굵은글씨)">
<meta property="og:url" content="링크걸릴주소">
<meta property="og:description" content="제목아래쪽에 한줄 나오는 짧은 소개글">
<meta property="og:image" content="썸네일이미지 경로">

하지만 위의 태그를 모든 사람에게 보여줄 필요는 없으므로, 페이스북 봇이 방문할때만 보여주면 되는 코드죠. 트래픽 낭비를 막기위해 USER_AGENT를 검사하여 페이스북 봇일때만 보이게 고치면 아래처럼 됩니다.


<?php if (preg_match('/facebook/',$_SERVER['HTTP_USER_AGENT']) == true) { ?>
<meta property="og:type" content="website">
<meta property="og:title" content="제목에 뜰 내용(굵은글씨)">
<meta property="og:url" content="링크걸릴주소">
<meta property="og:description" content="제목아래쪽에 한줄 나오는 짧은 소개글">
<meta property="og:image" content="썸네일이미지 경로">
<?php } ?>


페이스북은 캐싱기능이 있어 적용후 바로 페이스북에 나오지 않는 경우가 있습니다.

이에 페이스북측은 해당 링크박스(?)가 제대로 나오는지 테스트하고, 캐싱을 갱신할 수 있는 도구도 제공합니다.


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

위의 링크에서 테스트하고자 하는 링크주소를 입력하고 확인을 누르면 아래와 같이 설정된 내용을 확인/갱신할 수 있습니다.


스크린샷 2015-08-10 14.18.32.png


스크린샷 2015-08-10 14.18.52.png



관련팁

트위터에 링크걸때 요약보기(예쁘게) 보이게 하기

카카오톡에서 링크주소 보낼때 링크요약보기 꾸미기

첨부파일 3