[카카오톡 OpenGraph] 링크 공유 시 나오는 썸네일 이미지 및 텍스트 수정하기 (+ 적용이 잘 안될 때 확인해볼 사항들)

 

오픈그래프(Open Graph)란?

오픈 그래프 프로토콜은 특정 HTML 문서의 정보(제목, 설명, 문서 타입, 대표 URL 등)를 통일해서 사용할 수 있도록 페이스북이 개발한 프로토콜이다.

아래와 같이 SNS에서 링크를 공유할 때 뜨는 이미지와 제목 및 설명 등을 오픈그래프를 통해 설정할 수 있다.

 

오픈그래프 설정 방법

기본적으로 많이 쓰이는 오픈 그래프 요소

// 사이트 제목
<meta property="og:title" content="기록하는 삶📚" />

// Type
<meta property="og:type" content="website" />

// 대표 url 
<meta property="og:url" content="https://jiineeee.tistory.com/" />

// 이미지. 이미지 사이즈는 410x200px 을 권장한다.
<meta property="og:image" content="https://i1.daumcdn.net/thumb/C264x200/?fname=https://tistory2.daumcdn.net/tistory/3454287/skinCover/199033df9674456f9121c367ba463d76" />

 

추가적인 요소들에 대해 알아보고 싶은 경우, 아래 사이트를 확인해보면 된다.
https://ogp.me/#optional

Open Graph protocol

 

 

카카오톡에서 반영이 안되는 경우

1. Kakao Developers 에서 캐시 삭제

테스트를 위해 이미 카카오톡으로 링크를 전송한 경우, 해당 정보가 카카오톡 서버에 캐싱되어 다시 테스트를 하기 위해 링크를 전송해도 반영이 안된다. 캐시를 삭제하기 위해서는 Kakao Developers 사이트에 방문해야 한다.

• 회원가입이 되어 있지 않은 경우, 회원가입이 필요하다.
• URL을 입력한 후, 초기화 버튼을 클릭한다.

  

• 입력한 URL에 대해 'ㅇㅇ개의 스크랩 정보가 삭제되었습니다.' 라는 문구가 보인다면, 캐시 삭제가 완료된 것!

2. 해당 URL을 전송한 카카오톡 채팅방 나오기