Post View

카카오톡 링크 전송 시 정보 변경하기

카카오톡에서는 링크를 전송 시 위와같은 썸네일과 제목이 함께 나오게 됩니다.
카카오톡에서 정상적으로 나오는지 확인을 하기 위해서 테스트를 해봤는데...

링크가 다르니 각 페이지의 제목이 다르게 출력되어야 하는데, 동일한 제목으로 출력되는 현상이 있었습니다.
meta 정보를 보니 title 부분은 페이지에 따라 정상적으로 바뀌고 있었는데, "<meta property="og:url" content="https://www.kurien.net">"의 content 부분이 항상 https://www.kurien.net으로 되어있던게 문제였습니다.
해당 값이 메인을 가리키고 있어서인지 항상 메인에 대한 제목과 description이 나타나더라구요?

meta 태그를 입력하는 방법은 네이버 서치어드바이저(https://searchadvisor.naver.com/guide/markup-content)를 보고 따라서 사이트 URL을 입력했는데,
찾아보니 각 페이지별로 URL이 변경되어야 한다고 하네요.

<c:set var="requestURI" value="${requestScope['javax.servlet.forward.request_uri']}" scope="request"/>

<!-- opengraph -->
<meta property="og:type" content="website">
<meta property="og:title" content="${template.title}">
<meta property="og:description" content="${template.description}">
<meta property="og:image" content="https://www.kurien.net/img/favicon/android-chrome-384x384.png">
<meta property="og:url" content="https://www.kurien.net${requestURI}">

제 블로그에서는 위와같이 수정되었습니다.

링크를 전송하기 전 카카오 측에 저장된 소셜 정보를 삭제해야합니다.
카카오톡 채팅장이나 카카오스토리에 공유된 소셜 정보를 OG(Open Graph) 프로토콜을 통해 파싱하고 캐시하고 있기 때문에,
해당 정보를 지우지 않은채 다시 테스트를 해도 기존과 같은 결과가 나타나게 됩니다.


https://developers.kakao.com/tool/clear/og로 이동해서 캐시를 삭제한 뒤 테스트를 해보니 정상적으로 나타나네요.

여기까지 수정했던 내용의 키워드는 "Open Graph 프로토콜"입니다.
페이스북에서 만들었으며 소셜 미디어에서 각 웹페이지의 정보를 제공할 때 충분한 정보를 제공받을 수 있게 하기 위하여 만들어졌다고 하네요.

소셜 미디어에 제공하기 위한 필수적인 태그는 og:type, og:title, og:image, og:url이라고 하니 참고하시구요,
더 많은 정보는 https://ogp.me/에서 확인하실 수 있습니다.

Comments