카카오톡을 통해서 어떠한 정보를 공유하기 위해서 URL을 공유하는 일이 많이 있다.
카카오톡에 URL을 공유하게 되면 위의 그림과 같이 썸네일 이미지와 제목, 내용 등을 보여주게 되는데, 이는 어떻게 보여주게 되는지 확인해보고자 한다.
1. OG(Open Graph), 오픈그래프
- 오픈그래프는 페이스북이 기존의 메타 데이터 표기방법을 참조하여 만들었습니다.
- 어떠한 HTML 파일의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 이미지 등 다양한 요소들을 통일해서 사용할 수 있도록 정의해놓은 프로토콜 입니다.
- 오픈그래프 기본 태그
- og:title - 사이트의 제목
- og:type - 사이트의 종류 예) website
- og:image - 사이트를 나타낼 대표 이미지(미리보기 이미지)
- og:url - 사이트의 대표 url
- 카카오홈페이지의 메타정보는 아래 그림과 같습니다.
- 위의 메타 정보를 토대로 카카오톡에서 읽어들여 공유시 아래 그림처럼 보이게 됩니다.
2. 프로젝트에 적용해보기
- 오픈그래프를 적용하기 위해서는 웹 서비스가 필요하다.(즉, 로컬개발에서는 확인이 어렵다.)
- 웹서비스에서 등록된 html 파일에서 <head></head> 태그 안에 아래와 같이 meta 정보를 추가한다.
<head>
<!-- meta -->
<meta property="og:url" content="공유시 이동 url">
<meta property="og:title" content="공유시 보여질 제목">
<meta property="og:type" content="website">
<meta property="og:image" content="공유시 보여질 이미지 경로">
<meta property="og:description" content="공유시 보여질 설명">
</head>
- meta 정보를 작성하였으면, 서비스에 반영하여 공유하면 확인이 가능하다.
- meta 정보를 반영하였음에도, 공유시 이미지나 기타 정보가 변경이 안되었다면, 이는 카카오 서버에 페이지의 정보가 아직 캐싱되지 못한 것입니다. (카카오에서는 빠르면 1시간 이내 최대 24시간 이내에 적용 시간이 걸린다고 합니다.)
- 만약, 캐싱 삭제를 진행하고 싶으면, 카카오 개발자 사이트에서 캐싱 삭제가 가능합니다. (페이스북 캐싱 삭제)
참고!!!
만약, 웹 서비스가 포트 80, 443을 제공하지 않으면, 카카오톡에서는 오픈그래프 기능 사용이 어렵습니다.
카카오톡에서는 보안문제로 80,443으로 접근이 가능해야만 메타 정보를 읽어와서 보여줄 수 있다고 합니다.
카카오톡 개발자 사이트 참고
3. 테스트
참고
- https://blog.ab180.co/posts/open-graph-as-a-website-preview
'FrontEnd > HTML|JSP' 카테고리의 다른 글
| [HTML, CSS] div 안에 텍스트가 범위 밖으로 나가는 현상 해결(자동 줄바끔 처리) (0) | 2022.03.30 |
|---|---|
| [JSP] include 사용하기 (0) | 2022.01.15 |
| [HTML, CSS] 백그라운드 이미지 가운데 정렬 후 반응형 만들기 (0) | 2021.06.04 |
