미리보기(preview) 이미지 변경 - 오픈 그래프 프로토콜(open-graph-protocol)
Gatsby 와 Netlify 를 통해 간단하게 블로그를 생성/배포하고, 이것저것 세팅을 계속 만지고 있었다. 거의 다 세팅을 했다고 생각했는데, 카카오와 facebook 에서 링크를 게시할 경우 블로그의 미리보기 이미지가 현재 이미지와 다르고 변경되지 않는 상황이 발생했다.
얼추 캐싱의 문제이지 않을까 추측하고 있다. 그러나 기존 배포저장소를 여러번 정리하고, 소스에서도 캐싱된 부분을 몇번이나 정리했는데 결국 아직 해결되지 않았다. 그렇다면 나는 다른 문제이겠지만, 궁금하니까 찾아보고 정리해야겠다.
그림을 클릭하면 페이지로 이동합니다
-
오픈 그래프 프로토콜(open-graph-protocol)이란
메타 태그의 정보를 정의한 규약인데, 설명하자면 게시한 정보를 정리해서 사이트를 간단하게 요약해서 특정하는 것이다. 요약은 게시자에게도 중요하지만 접하는 사람에게 특히 중요하다. 이 태그만 보고도 ’이 정보에는 어떤 것들이 포함되어있겠구나‘할 수 있으니까.
예로 형식은 아래와 같다.
<head>
<meta property="og:title" content="제목" />
<meta property="og:type" content="website" />
<meta property="og:url" content="siteurl" />
<meta property="og:image" content="이미지" />
</head>-
미리보기 이미지를 변경했는데 변경되지 않는 이유?
최초 스크랩이 이루어지면 미리보기가 생성되고, 성능 향상을 위해 일정기간동안 정보들을 캐싱한다. 그렇기 때문에 일정 시간이 지날때까지 기다려야한…다가 아니라 나같은 사람을 위해서 페이스북, 카카오톡 등 에서 이런 캐싱된 정보를 삭제 할 수 있는 기능을 추가해 놓았다.
미리보기 캐싱 삭제 url
카카오 : https://developers.kakao.com/tool/clear/og - Last updated: May 28, 2020
facebook : https://developers.facebook.com/tools/debug/sharing/batch/
twitter : https://cards-dev.twitter.com/validator
카카오 업데이트 전 : https://developers.kakao.com/docs/cache