메타태그 오픈그래프 설정, 카카오톡 링크 미리보기 변경

OG(Open Graph)

오픈 그래프 프로토콜은 어떠한 인터넷 웹사이트의 HTML 문서에서 head -> meta 태그 중 "og:XXX"가 있는 태그들을 찾아내어 보여주는 프로토콜이다.

https://namu.wiki/w/%EC%98%A4%ED%94%88%20%EA%B7%B8%EB%9E%98%ED%94%84%20%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C

 

 원리는 플랫폼에 URL을 붙여 넣는 순간 해당 플랫폼에서 일하는 크롤러가 빠르게 해당 URL을 먼저 방문해서 웹페이지에 있는 오픈그래프 데이터를 수집해 미리 보기 형식으로 구성해주는 방식

출처: https://6u2ni.tistory.com/22 [Design Futures:티스토리]

 

 

쉽게 말해 링크를 SNS 등의 플랫폼에 추가할 때 보이는 미리보기 형식이다.

 

 

 

오픈 그래프 작성법

 <!-- 오픈그래프 -->
  <meta property="og:image" content="%PUBLIC_URL%/thumbnail.png" />
  <meta property="og:site_name" content="감정일기장" />
  <meta property="og:description" content="나만의 작은 감정 일기장" />

 

%PUBLIC_URL% : 자동으로 public 디렉토리로 변경됨.

 

 

카카오톡 공유 시 오류

카카오톡 서비스에서 링크 공유 시 매번 오픈그래프를 가져 오지 않고,기존의 내용을 보관해둔다.

따라서 오픈 그래프 업데이트 때마다 바로 적용이 되지 않는다.

가만히 두면 계속 변경되지 않을 수도 있으므로 카카오 개발자 사이트에서 변경할 것.

https://developers.kakao.com/

 

카톡 아이디로 로그인 후, 도구 > 초기화 도구로 들어가면 OG 캐시 라는 항목에서 설정이 가능하다.