[HTML] Open Graph Protocol
반응형
개인적으로 공부하면서 기록하는 공간으로
잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-)
▪ ▪ ▪ ▪ ▪
카카오톡 또는 SNS에서 링크를 공유할 때,
해당 사이트에 관한 미리보기 썸네일을 본 경험이 한번 쯤은 있을거에요.
개발을 할 때 놓치기 쉬운 부분이기도 하고, 설정할 때마다 태그가 헷갈리기도 하죠.
원하는 썸네일을 설정하려면 어떻게 해야하는지 알아볼게요.
Open Graph
SNS를 통해 공유될 때 웹페이지에 대한 메타 정보를 보여주기 위한 태그로, HTML 문서 내의 og:로 시작하는 메타태그를 찾아내어 보여주는 프로토콜이다.
<head>
<meta charset="utf-8" />
<link rel="icon" href="브라우저 아이콘 url" />
<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>오픈 그래프는 플랫폼에 URL을 붙여 넣는 순간 해당 플랫폼에서 일하는 크롤러가 빠르게 해당 URL을 먼저 방문해서 웹페이지에 있는 오픈그래프 데이터를 수집해 미리 보기 형식으로 구성해주는 방식이다.
OG 태그를 설정하지 않은 경우, 시스템에서 알아서 대표 정보를 각출해오므로 원하지 않는 정보가 노출 될 수도 있다.
Reference
✔ https://6u2ni.tistory.com/22
댓글