공유할때 보이는 썸네일인 og:image 를 변경했는데 카카오톡에서 링크를 공유할때 변경이 안됐다는 문의가 들어왔다!
이미지가 캐싱이 된것같아서 구글링을 해보니까
카카오에서는 같은 url에 대해 1시간동안 캐싱을 한다고 한다.
카카오 공유 디버거
여기에서 캐시 초기화를 하면 카카오톡 서버에서 캐시를 지워서 바로 변경된 이미지가 반영이 된다고 했다.
공유 디버거에서 우리 서비스의 링크를 입력하고 디버그를 누르니까, 이 사이트에서는 변경된 이미지로 잘 보였다.🥲
아무튼, 캐시초기화를 하고 카카오톡에 다시 공유를 해보니, 변경된 이미지가 아니라 원래의 이미지로 보였다.
이미 내 디바이스에서 캐싱을 한 것 같았다.
그래서 다시 구글링해서 발견한 방법!
- 이미지 url에 쿼리로
?v=를 붙혀서 버전 힌트를 명시하면 다른 이미지로 인식해서 바로 변경이 된다. - 버전이 바뀔때마다 배포하는 것은 너무 번거롭다고 생각해서
?v=${new Date().getTime()}로 사용자가 웹사이트에 진입한 날짜와 시간으로 명시하여 동적으로 변경되게 했다. - 그리고 og:image를 800*400 으로 했었는데 계속 이미지가 이상하게 확대가 되게 나와서 왜그런가 검색을 해봤는데, 이런 글을 발견했다. (참고자료 2번 링크)
- 왠지 지금 og:image가 흰 배경으로 되어있어서 그런가 하고 검정색 배경 이미지로 개발기에서 테스트해보니 검정은 비율대로 잘 나오는것을 확인했다.
- 흰배경 og image로 여러번 테스트 해봤는데 1200*630 크기여야 제대로 나왔다!
- 그리고 og:image 와 og:url이 다르면 og:url을 파싱하여 메타 이미지를 받아온다고 한다.
- 갑자기 메타이미지가 뜬금없는게 나오면 og:url이 현재의 서비스와 다른지 확인해보면 될 것 같다.
간단하다고 생각했는데 의외로 테스트하고 배포하는데 2시간 넘게 걸렸던것같다.
나중에 참고하려고 작성해둔다!
꿀팁 ㄳ