오픈그래프 태그
콘텐츠의 링크를 공유할때 요약정보를 SNS에서 미리 확인할 수 있는 프로토콜이다.
사용자가 클릭 하기 전에 크롤러가 해당 웹사이트를 방문하여
HTML의 head의 메타데이터를 크롤링 하여 미리보기 화면을 생성해 준다.
( ↓ 아래 이미지 참고 )
<meta property="og:title" content="콘텐츠 제목" />
<meta property="og:url" content="웹페이지 URL" />
<meta property="og:type" content="웹페이지 타입(blog, website 등)" />
<meta property="og:image" content="표시되는 이미지" />
<meta property="og:title" content="웹사이트 이름" />
<meta property="og:description" content="웹페이지 설명" /> html의 <head> 안에 메타 태그를 작성해주면 된다.
설정을 했는데 미리보기가 안보일 때
CSR문제
처음에 미리보기 이미지를 public 폴더에 넣어서 확인을 해봤지만 이미지가 보이지 않았다.
<meta property="og:image" content="https://chansoo-toy-box.vercel.app/preview.jpg" />어떤게 문제인지 찾아보니 CSR로 작동하는 React앱이다보니 빈 html만 가지고있어서 미리보기 이미지를 못가져왔다.
해결
간단하게 노션에 이미지 URL을 넣어줬다.
카톡서버 URL캐시 삭제
카톡서버에 공유한 URL의 정보가 캐시로 저장되어 있어서 바로 보이지 않는다.
해결
아래의 카카오 디버거 툴을 이용하여 URL캐시를 삭제할 수 있다.
https://developers.kakao.com/tool/debugger/sharing
성공
참조
프론트엔드 개발자