01. 오픈그래프(OPEN GRAPH)
카카오톡, 페이스북 등의 여러 SNS에 웹사이트를 공유하면 미리보기로 간략한 웹사이트의 정보가 제공 됩니다. 이런 정보를 메타태그를 이용해 미리 설정해주면 원하는 미리보기를 전달할 수 있습니다.
이렇게 META 태그는 해더 안에 넣어주면 링크를 전송시 META안에 정보를 가지고 와서 보여주게 됩니다.
02. 오픈그래프 메타태그
<head>
<meta property="og:url" content="링크url" />
<meta property="og:type" content="website" />
<meta property="og:image" content="이미지 url" />
<meta property="og:title" content="타이틀" />
<meta property="og:description" content="설명 " />
</head>
03. 카카오톡 오픈그래프 이미지 사이즈
이미즈 사이즈를 다양한 사이즈를 실험해봤는데, 같은 사이즈, 같은 확장자를 해도 어떤 링크는 이미지가 짤리는 현상을 보였다. 카톡 가이드에 맞춰 만들었을때 오류가 적었다.
이미지 사이즈 800px * 800px
가이드 파일을 다운받으면 이미지 전체크기와 로고 위치와 크기가 설정되어 있어요!
04. 카카오톡 미리보기 캐시 삭제
카톡 오픈그라프를 설정하다보면 수정 후 여러번 확인하게 되는데, 한번 카톡으로 보내면 캐시에 저장되어 다시 보내도 새로 리셋되지 않는다 그럴 경우 캐시를 삭제하는 방법
https://developers.kakao.com/tool/clear/og
카카오톡 개발자 사이트에 접속 후, 로그인
URL에 캐시 삭제를 원하는 주소를 입력하고 '초기화' 버튼 클릭.
그리고 다시 카톡에 링크를 공유하면 새로설정한 오프그래프로 전송된다.
'퍼블리싱 > 기타정보' 카테고리의 다른 글
| 프론트엔드 테스트 사이트! codepen, jsfiddle, js bin (0) | 2020.05.07 |
|---|---|
| 웹페이지 전체를 한번에 캡쳐하기 (0) | 2020.04.07 |
| 번역하기 옵션 없애는 방법 및 코드 (1) | 2020.03.26 |
| 티스토리/네이버 블로그 복사시 자동 출처 표기방법 (4) | 2020.03.23 |
| 페이스북 로그인 #_=_ 제거하기 (1) | 2020.03.20 |
