(OG Tag) 카카오톡, 페이스북 미리보기 + 수정 적용 안될때 초기화하기 !

*Open Graph tag : og tag

 

카카오톡이나 페이스북과 같은 sns등에서 웹사이트의 링크를 공유할때 사진과 간략한 설명이 뜨게된다.

카카오톡으로 예를 들면, 사용자가 채팅창에 웹사이트의 주소를 입력하게되면, 카카오톡의 크롤러가 미리 사이트에 방문하여 OG tag를 수집한다.

아래 사진에서 확인 가능하듯이, og graph 이미지, 설명, 그리고 제목을 수집하여 미리보기 화면을 생성하게 된다.

제목 , 설명, 이미지는 각각 다음에 해당된다. -> og:title, og:description, og:image

 

* og 태그 사용

 

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지 url"}" />

 

 

* OG태그의 이미지 및 제목등을 수정했는데 적용이 안되는 경우

 

og태그를 수정한 뒤에도 미리보기화면이 바뀌지 않는 이유는 , 해당 서비스(카카오톡, 페이스북)에서 한번 수집한 사이트의 내용을 한동안 저장해놓기 때문이다. -> 캐싱(caching)

이러한 경우에는 아래 주소에서 해결이 가능하다.

 

• 페이스북 og태그 초기화 :  https://developers.facebook.com/tools/debug/

공유 디버거 - Facebook for Developers

• 카카오톡 og 태그 초기화 : https://developers.kakao.com/tool/clear/og

카카오계정 로그인