반응형
오픈그래프(Open Graph)란?
오픈 그래프 프로토콜은 특정 HTML 문서의 정보(제목, 설명, 문서 타입, 대표 URL 등)를 통일해서 사용할 수 있도록 페이스북이 개발한 프로토콜이다.
아래와 같이 SNS에서 링크를 공유할 때 뜨는 이미지와 제목 및 설명 등을 오픈그래프를 통해 설정할 수 있다.
오픈그래프 설정 방법
기본적으로 많이 쓰이는 오픈 그래프 요소
// 사이트 제목
<meta property="og:title" content="기록하는 삶📚" />
// Type
<meta property="og:type" content="website" />
// 대표 url
<meta property="og:url" content="https://jiineeee.tistory.com/" />
// 이미지. 이미지 사이즈는 410x200px 을 권장한다.
<meta property="og:image" content="https://i1.daumcdn.net/thumb/C264x200/?fname=https://tistory2.daumcdn.net/tistory/3454287/skinCover/199033df9674456f9121c367ba463d76" />
추가적인 요소들에 대해 알아보고 싶은 경우, 아래 사이트를 확인해보면 된다.
https://ogp.me/#optional
카카오톡에서 반영이 안되는 경우
1. Kakao Developers 에서 캐시 삭제
테스트를 위해 이미 카카오톡으로 링크를 전송한 경우, 해당 정보가 카카오톡 서버에 캐싱되어 다시 테스트를 하기 위해 링크를 전송해도 반영이 안된다. 캐시를 삭제하기 위해서는 Kakao Developers 사이트에 방문해야 한다.
- 회원가입이 되어 있지 않은 경우, 회원가입이 필요하다.
- URL을 입력한 후, 초기화 버튼을 클릭한다.
- 입력한 URL에 대해 'ㅇㅇ개의 스크랩 정보가 삭제되었습니다.' 라는 문구가 보인다면, 캐시 삭제가 완료된 것!
2. 해당 URL을 전송한 카카오톡 채팅방 나오기
반응형
'💻 Programming' 카테고리의 다른 글
[Nuxt.js] Nuxt.js에서 KakaoMap API 사용하기 💻 🗺 (1) | 2021.09.17 |
---|---|
[MongoDB] Atlas에서 MongoDB 외부 접속 허용하는 방법 (0) | 2021.06.20 |
프론트엔드 개발자를 위한 Visual Studio Code 확장 프로그램(Extension) 설치 방법 및 추천 (1) | 2021.01.19 |