[HTML] - SNS URL 공유 시 미리보기(Open Graph)

SNS에서 URL을 공유할때 뜨는 이미지와 설명글을 어떻게 수정해야하는지를 알아보고 적용해보았다. 

 

 

 

카카오톡이나 디스코드 등 SNS에 URL을 공유하게 되면 위와 같이 이미지와 설명이 뜨게된다. 

만일 이러한 설정을 하지 않는다면 아래와 같이 밋밋한 것을 알 수 있다.

 

 

이것을 수정하기 위해서는 Open Graph라는것을 알아야 한다.

 

Open Graph란?

- 페이스북에서 처음 만든 메타 데이터 프로토콜

- 웹페이지 링크를 SNS에 공유할 때 어떤 "이미지, 제목, 설명"을 보여줄지 미리 약속하는 규칙!

 

→ 단순히 URL텍스트를 보여주는게 아니라, 썸네일 이미지와 요약 설명을 제공하여 클릭률을 높일 수 있다.

 

핵심 태그로는 아래와같다.

태그 이름	역할	적용 내용
og:title	카드에 표시될 제목	티스토리
og:description	제목 아래 표시될 상세 설명	좀 아는 블로거들의 유용한 이야기 ......
og:image	썸네일 이미지	/static/이미지이름.png
og:url	클릭 시 이동할 실제 주소	https://www.tistory.com

 

    <meta name="viewport" content="width=device-width,initial-scale=1">
	
    
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://~~~~">
    <meta property="og:title" content="제목을 적어주시면됩니다">
    <meta property="og:description" content="간단한 설명">
    <meta property="og:image" content="https://~~~~/static/og_image.png">

이 때, 썸네일 이미지로 사용할 og_image.png는 파일 내의 static폴더 내에 존재해야한다.

 

 

추가적으로 알아둘 점 !

나의 경우에는 바로 적용이 되었지만,

서버에 배포하고 HTML을 수정했는데도 카카오톡 미리보기가 바뀌지 않을 수 있다.

 

원인으로는 카카오톡, 페이스북 등의 스크랩 서버가 한번 가져간 정보를 일정 기간 저장하고 있기 때문이다! 이런 경우에는 아래 링크를 들어가서 기존 정보를 삭제해주면 된다.

 

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

카카오계정