내가 만들고 있는 모바일 청첩장을 카톡에 보내보았다.
너무 단출하게 나오고 Summary도 마음에 들지 않았다.
그래서 어떻게 하면 저걸 이쁘게 꾸밀 수 있을 지 찾아보았다.
답은 오픈 그래프(Open Graph)였다. SEO 관련한 자료에서 많이 보이던 놈인데 이게 여기서 쓰이는 건지 이번에 처음 알게 되었다. 갈 길이 멀다.
오픈 그래프는 카톡과 같은 SNS에서 웹 사이트의 컨텐츠를 요약해서 표시하는 정보이다. SNS에서 링크를 공유하게 되면 해당 링크에 포함된 오픈 그래프를 나타내 준다.
심지어 오픈 그래프 형식도 플랫폼마다 달라서 본인이 원하는 곳에 적용하려면 이곳저곳 찾아봐야 한다.
아무튼 나는 카톡에 링크를 넣었을 떄 미리보기가 제대로 나오길 원했기에 관련해서 조금 알아보았다.
적용은 아주 간단하다. html head 태그에 메타 정보를 남겨주기만 하면 된다.
정해진 형식은 다음과 같다.
<head>
...
<meta property="og:title" content="제목" />
<meta property="og:description" content="설명" />
<meta property="og:image" content="이미지 URL" />
<meta property="og:url" content="웹 URL" />
...
</head>meta property에 원하는 속성을 지정한 뒤 content에 값을 입력하면 끝이다.
재배포를 하면
내가 넣어준 값이 들어가게 된다.
트위터 같은 곳은 트위터 카드 형태로 공유되기 때문에 여기에 맞춰 메타 정보를 담아주면 된다.
Getting started with Cards
Did someone say … cookies? X and its partners use cookies to provide you with a better, safer and faster service and to support our business. Some cookies are necessary to use our services, improve our services, and make sure they work properly. Show mor
developer.x.com
자주 공유할 곳을 확인하고 맞춰서 넣어주면 될 것 같다.
오픈 그래프 속성을 지정해주고 아래 디버거에서 카톡에서 공유되는 느낌을 대충 확인이 가능하다.
오픈 그래프 정보도 함께 알려준다.
https://developers.kakao.com/tool/debugger/sharing
url만 넣어주면 이렇게 보여준다.
근데 카카오톡에서 공유할거면 그냥 카카오톡 공유 API 쓰는 게 더 그럴 듯 하다.
'개발일기 > Web' 카테고리의 다른 글
| [React] react-helmet으로 페이지 별로 html head 채우기 (1) | 2024.11.23 |
|---|---|
| vercel에 한글 도메인 적용하기 (0) | 2024.11.18 |
| [React] 모바일 웹 모달 스크롤 동작 막기, 뒤로가기 동작 제어하기 (feat. 훅 만들기) (0) | 2024.11.18 |
| [React] 카카오 맵 커스텀을 해보았다. (feat. 마커 인포 꾸미기) (3) | 2024.11.13 |
| [React] vercel에 API KEY 등록하기 (feat. api key 숨기기) (0) | 2024.11.11 |