[meta tag] 카카오톡 링크 공유, 이미지 메타 태그

이번 프로젝트 홍보겸!

그린나우 배포 후, 카카오톡 링크 공유 시 이미지 메타 태그에 관련해서 쓴다.

 

그린나우 프로젝트를 마무리 단계에 접어 들면서 index.html 에 메타 태그를 집어 넣어보았다.

카카오톡에 링크로 보낼 때,

 

 

이렇게 보내지기 때문에, 없어보인다.

이미지를 추가하자

1. title
2. description
3. url

순서대로

• 그린나우_grinnow
• 나무의 발견 그린나우
• https://www.grinnow.com

이렇게 적용이 됐다.

1. 이미지를 준비하자^
2. og:image 에는 링크로 적용해야한다.
   1. src/assets/img/… 이렇게 하면, 현재 react-vite 프로젝트이기 때문에, SPA 라 브라우저에서 빈 html을 인식해서 값을 읽지 못한다.
3. 배포한 AWS 의 S3 에 이미지를 올려 링크를 걸어 두는게? 프로젝트 관리에 좋아보인다.
4. 이게 힘들경우에는? 무료이미지 업로드 사이트가 있다

https://postimages.org/ << 라는 사이트가 있다.

 

 

 

>>

적용할 이미지 캡쳐

 

 

 

우선 이미지를 업로드 하자!

이미지를 업로드 하고 나면 링크 화면이 나온다!

 

 

 

직접 링크 를 og:image 태그에 넣어주자

<meta property="og:image" content="<https://ㅇㅇㅇㅇㅇ/og-Image.png>" />

 

그리고 카카오 디버거 페이지로 가보자

https://developers.kakao.com/tool/debugger/sharing

배포한 URL 을 입력하고 아래 순서처럼 클릭하여 확인 해보자!

1. 캐시초기화
2. 디버그

→

 

마지막으로 카카오톡으로 확인! (링크 복붙 해보자)