[meta-og] 카카오톡 미리보기 이미지, 텍스트 적용 및 확인 방법

이슈

• 카카오톡 공유 시 미리보기 이미지 깨짐 현상 발생

자료조사

• SNS (카카오톡, 페이스북) 에서 웹 링크를 공유할 때 관련 이미지와 설명이 미리보기로 출력
• 카카오톡의 크롤러가 웹의 meta tag의 og property 정보 미리 수집
  • 수집한 정보를 미리보기 이미지, 설명으로 출력

이슈 발생 원인

• 공유할 웹 meta tag 의 og property 설정 X

해결방법

• meta tag og property 설정
• 적용 확인

<meta property="og:type" content="website">
<meta property="og:title" content="웹 제목">
<meta property="og:description" content="웹 설명">
<meta property="og:url" content="https://m.sample.co.kr/Mr4uyiM">
<meta property="og:image" content="https://www.sample.com/resource/img/sample.png">

적용확인

• 카카오톡, 페이스북
• og property 변경 후 적용 확인이 안되는 경우
  • 한번 수집한 웹 og property 정보 한동안 저장 (caching)
  • cache 초기화 필요

참고

• og tag 미리보기 및 캐시 초기화 방법