Meta Tag, OG(오픈그래프) 사용하기

오픈그래프(Open Graph)

콘텐츠의 요약내용이 SNS에 게시되는데 최적화된 데이터를 가지고 갈 수 있도록 설정하는 것

• 원리
  • 링크라는 것이 인식되면 크롤러가 해당 웹사이트의 HTML head의 메타 데이터를 크롤링하여 미리보기 화면을 생성
• 프로토콜
  • 비교적 통일된 방법으로 페이스북의 open graph 프로토콜을 사용한다.
  • 페이스북, 네이버블로그, 카카오톡 등에서 사용하고 있는 프로토콜
  • open graph 문서

태그 사용법

800 X 800 또는 600 x 315 또는 1200 x 630

대다수 카톡으로 많이 url을 보내므로 800x800으로 맞추었다.

기본적으로 웹에 설정해줘야 하는 og 메타태그

<meta property="og:url" content="웹페이지 URL">
<meta property="og:type" content="웹페이지 타입(blog, website 등)">
<meta property="og:image" content="이미지 URL">
<meta property="og:title" content="콘텐츠 제목">
<meta property="og:description" content="설명">
<!-- 다음 태그는 필수는 아니지만 포함하는 것을 추천 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="800">

네이버블로그, 카카오톡 미리보기 설정

<meta property="og:title" content="콘텐츠 제목">
<meta property="og:url" content="웹페이지 URL">
<meta property="og:type" content="웹페이지 타입(blog, website 등)">
<meta property="og:image" content="이미지 URL">
<meta property="og:title" content="웹사이트 이름">
<meta property="og:description" content="웹페이지 설명">

트위터 미리보기 설정

<meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)">
<meta name="twitter:title" content="콘텐츠 제목">
<meta name="twitter:description" content="웹페이지 설명">
<meta name="twitter:image" content="이미지 URL">

---

Reference

Meta Tag, OG(오픈그래프)사용하기

카톡 오픈그래프 메타태그 및 이미지 사이즈 & 캐시삭제

URL 공유시 미리보기 이미지&내용 : open Graph