https://velog.velcdn.com/images/hoho_0815/post/b387207b-c461-4520-ace9-c79013326c2a/image.webp

Open Graph

배포한 프로젝트를 카카오톡이나 SNS로 공유 했을 때 상대방에게 보여지는 썸네일

카카오톡 말고도, 페이스북이나 티스토리 등 링크를 공유 했을 때 Open Graph 를 가져오는플랫폼에 전송을 했을 때도 보여집니다.

index.html

프로젝트 썸네일 ( og:image )

<meta property="og:image" content="%PUBLIC_URL%/thumbnail.png"/> // content 경로는 React 프로젝트 예시

웹 이름 ( og:site_name )

• 링크 공유 시 사이트 이름이 어떻게 보일 지

<meta property="og:site_name" content='사이트 이름 입력'/>

웹 이름 아래에 보여지는 설명 글 ( og:description )

<meta property="og:description" content="설명 글 입력"/>

만약 Open Graph 적용이 보이지 않을 경우

• Open Graph 의 데이터들을 링크가 공유 될 때 마다 가져오는 것이 아니라 한 번 가져오면 캐시 처럼 보관해놓고 사용하기 때문에, Open Graph 설정을 변경 했을 때 바로 적용이 되지 않습니다.
• 하지만 가만히 두면 아예 적용이 안될 수 있기 때문에 아래의 방법을 따라 합니다.

1. https://developers.kakao.com/ 접속
2. 도구 항목 클릭 -> 초기화 도구 ( 회원가입이 필요하면 하고 )
3. URL 입력 후 초기화

1. 다시 링크를 보내면 정상적으로 Open Graph 가 보여집니다.

참고

• https://developers.kakao.com/
• 인프런