링크를 SNS를 통하여 URL을 공유할 때 링크 상단에 썸네일, 타이틀, 설명 등
다양한 정보가 노출됩니다.
어떠한 정보들이 노출되며, 어떻게 설정을 할 수 있는지 확인해보고자 합니다.
아래와 같이 카카오톡이나 다른 SNS에서 URL을 공유할 때 메타태그에 있는 오픈그래프 정보를 이용하여 사용자에게 노출하게 됩니다. 노출된 정보는 아래와 같이 카카오톡에서 보이게 되는 미리 보기 기능을 하게 됩니다.
오픈그래프(오픈그래프 프로토콜, Open Grapg, OG)란?
어떠한 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 타입, 대표 URL 등 다양한 요소들에 대하여 사람들이 통일하여 사용할 수 있도록 정의한 프로토콜입니다.
페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌습니다.
OG 데이터 작동 원리
URL 링크를 올렸을 때, 사이트의 크롤러가 URL을 미리 접속하여 정보를 수집할 경우, 메타데이터(메타태그)에 오픈그래프로 지정되어 있는 제목, 설명, 이미지 등의 정보를 수집해와 표시합니다.
기본적인 메타데이터
대표 적으로 제목, 설명, 이미지, 표준 링크(URL)가 있습니다. 여기서 표준 링크란, 같은 콘텐츠를 가리키는 여러 개의 URL 중 대표 URL을 말합니다. 원칙적으로 하나의 대상은 단 하나의 링크만으로 참조되어야 하기 때문입니다. 메타 데이터의 자세한 사항은 아래 링크에서 확인할 수 있습니다.
1. meta태그
HTML의 meta 태그 -문서에 대한 메타데이터(metadata)를 정의하는 요소 1. meta 태그란? 태그는 웹페이지의 보이지 않는 정보를 제공하는데 사용되는 태그입니다. 해당 문서에 대한 정보인 메타데이터(m
hajoung56.tistory.com
예시를 통해 살펴보기
위 이미지는 네이버 주소를 공유했을 때 나오는 화면입니다. 보통 메타태그는 HTML의 head태그 안쪽에 위치하고 있습니다.
<meta property="og:title" content="네이버">
위 이미지에서 파란색으로 표시된 부분으로, 제목을 나타냅니다.
<meta property="og:url" content="https://www.naver.com/">
위 이미지에서 빨간색으로 표시된 부분으로, 대표 URL을 나타냅니다.
<meta property="og:image" content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png">
위 이미지에서 초록색으로 표시된 부분으로, 미리보기에 나타낼 이미지를 나타냅니다.
<meta property="og:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
위 이미지에서 회색으로 표시된 부분으로, 미리보기에 대한 설명을 나타냅니다.
적용하기 위해서는
- 오픈그래프를 적용하기 위해서는 웹 서비스가 필요합니다.
- 웹서비스에 등록된 HTML 파일에서 <head></head> 태그 안에 위와 같이 meta 정보를 추가합니다.
- meta 정보를 반영하였음에도 불구하고 공유 시 이미지나 기타 정보가 변경되지 않는다면, 이는 공유시 사용하는 SNS 서버 페이지에 새로운 메타정보가 반영되지 않고 기존의 정보가 저장되어있기 때문입니다.
- 카카오톡은 빠르면 1시간 이내, 최대 24시간 이내에 새로운 정보가 적용된다고 합니다.
만약 빠르게 캐시를 지우고 싶다면, 카카오톡 카카오 개발자 사이트 에서 상단의 도구 -> 초기화 도구 -> OG(Open Graph) 캐시로 진입하여 기존 정보를 삭제할 수 있습니다. 아래의 링크를 클릭하여도 바로 진입할 수 있습니다.
카카오계정 로그인
여기를 눌러 링크를 확인하세요.
accounts.kakao.com
페이스북 캐시 초기화 또한 아래 링크를 통하여 가능합니다.
공유 디버거 - Facebook for Developers
공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요.
developers.facebook.com
적용해보기
<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>
'JavaScript & JQuery' 카테고리의 다른 글
| [JavaScript]자주 사용하는 정규식 (2) | 2022.04.12 |
|---|---|
| [JavaScript] 정규 표현식(RegExp)의 개념 (4) | 2022.04.12 |
| [JavaScript]checkbox, select, radio 활성화, 비활성화 / 선택 값 / 선택 변경 (8) | 2022.03.22 |
| [JavaScript] JavaScript 란? (4) | 2022.03.21 |
| [WEB] meta태그 (2) | 2021.07.21 |
댓글