오픈그래프로 소셜 공유 미리보기 만들기

SNS에 미리보기를 제공하는 meta 태그.

이를 잘 활용하면 예쁘게 보이도록 할 수 있음!

 

그중 페이스북이 만든 '오픈그래프'가 소셜 미리보기 기능을 제공함.

property의 'og:' 값이 오픈그래프를 의미함.

 

아래 코드를 html 문서의 head 부분에 입력

<meta name="description" content="금용일에 만나는 코딩 한 스푼">
<meta property="og:title" content="Weekley Code">
<meta property="og:url" content="https://weekly-codeit.co.kr">
<meta property="og:type" content="website">
<meta property="og:image" content="https://weekly-codeit.co.kr">
<meta property="og:description" content="이번에는 어떤 걸 다뤄볼까">

 

 

* 참고1

"og:image" 태그 사용 시, 프로젝트 내에 이미지를 업로드하여 해당 이미지의 주소를 사용하면 표시되지 않음.

이유 - 

react는 CRS기 때문에 미리보기 제공 시에는 실제 이미지 로딩이 되기 전 빈 html만 있는 상태기 때문임.

 

해결 방안 - 

온라인 웹상에 업로드된 이미지의 주소를 사용함.

 

 

* 참고2

간혹 카톡 서버 URL 캐시로 인해 새로 적용한 og image가 보이지 않을 수 있음

 

해결 -

카카오 디버거 툴을 이용하여 url캐시를 삭제할 수 있음

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

 

 

https://ogp.me/

Open Graph protocol

https://developers.facebook.com/tools/debug/