og:img 오픈그래프/ 카카오톡 링크 미리보기 이미지 안바뀜

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

카카오톡 링크 예시 사진

 

 

문제 상황

 

웹 사이트를 관리하면서 연도가 바뀌다 보면 연도에 따라 이미지를 새롭게 바꾸어 주는 경우가 있다.

이 이미지를 바꾸는 과정에서 사이트에 있는 메인이미지 배경이미지 첫 화면 이미지를 전부 바꿔주었는데도

카카오톡으로 URL을 공유했을때 보이는 썸네일(미리 보기)? 이미지는 꿈쩍도 안 했던 상황..

 

 

 

 

<meta property= "og:image"> ?

 

서칭을 해보니 오픈그래프(og)라고 하는 태그를 이용해서  제목, 이미지 등 페이지를 대표할만한 것들을 지정해 주는 태그가 있다고 한다.

 

<meta property="og:title" content="제목">
<meta property="og:description" content="요약">
<meta property="og:image" content="이미지">
<meta property="og:url" content="페이지 URL">
<meta property="og:type" content="페이지 유형">
<meta property="og:site_name" content="사이트 이름">
<meta property="og:locale" content="언어 및 지역">

 

하지만 관리하던 사이트에는 og:태그도 지정해 놓은 것이 하나도 없었다..

og 태그가 없다면 메인페이지에서 가장 처음으로 보이는 이미지태그의 이미지가 미리 보기로 보인다고 한다.

 

 

 

 

해결방법

 

1. 카카오 디벨로퍼에 접속

https://developers.kakao.com/

Kakao Developers

 

2.  로그인 후  -  도구 - 디버거 도구

 

 

 

3.  사이트 URL 입력 후 캐시 초기화

 

 

 

운영 중인 소스에 이미지도 바꿔보고 소스도 이것저것 만져봤지만 아는 사람이 없어서 오랜 시간을 헤매었다..

결국 외부 지인에게 물어서 힌트를 얻고  시도해 본 결과  초기화 후 거의 바로 카카오톡 링크 미리 보기가 바뀌었다.

같은 상황에서 막힌 분들에게 도움 되기를~~