3월10일 - og 태그 (링크 미리보기)

개요

카톡에 어떤 링크를 공유하면

이렇게 자동으로 미리보기가 나오는 걸 경험해봤을 것이다.

 

'og'태그는 웹 사이트가 다른 웹 사이트에 공유될 때 

대표 이미지, 제목 및 설명과 같은 메타 데이터를 제공하는 Open Graph 프로토콜의 일부라고 한다.

 

이게 자동으로 되는게 아니고 따로 설정해줘야 하는건데 어떻게 설정할 수 있는지 알아보자

 

코드

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />

HTML의 head 부분에 이렇게 작성하면 끝이다.