Facebook 공유하기 관련 메타 태그

<meta property="og:type" content="product">
<meta property="og:title" content="test">
<meta property="og:image" content="이미지 주소">
<meta property="og:url" content="url">
<meta property="og:description" content="어쩌고 저쩌고">
<meta property="og:image:width" content="740">
<meta property="og:image:height" content="492">

 

페이스북 공유하기를 만들다 보면 이미지, 제목 이런 것들을 갖고 가야 할 일들이 있습니다. 그럴 때 퍼뜩(?) 드는 생각이 있을 텐데 jQuery로 조작하면 되지 않냐입니다. 그런데 막상 작성해서 로딩을 해 보면 분명 퍼가기 버튼을 클릭했을 때 뜨는 팝업엔 이미지가 들어있는데 실제로 페이스북에 등록을 해서 보면 이미지가 없습니다.

페이스북 스크래퍼는 스크립트를 안 읽는다고 합니다. 그러니 jQuery 같은 걸로 DOM 조작은 시간 낭비라 생각하시면 됩니다.

 

제일 좋은 방법은 페이스북에서 제공해 주는 디버거를 확인해 보면 됩니다.

디버거 페이지에 들어가서 가장 먼저 디버깅을 해야 할 페이지 주소를 넣고 디버그 버튼을 클릭하면 됩니다.

 

위에 보면 자산 누락됨이라고 되어 있는데 뭐 app_id는 제가 안 쓰기에 필요가 없으므로 패스!

체크하시기 전에 'URL을 마지막으로 스크랩한 시간 및 방법' 부분에 있는 '다시 스크랩'을 클릭하시기 바랍니다.

 

해당 페이지 가장 하단에 있는 '스크래퍼에게 표시되는 URL 그대로 보기를 클릭해 보시면 현재 페이스북 스크래퍼가 어떤 페이지를 긁어가는지 코드가 정확하게 나오니 참고하시면 될 것 같네요.