[Spring] 오픈그래프[open graph] 태그 - 링크의 미리보기 제목, 설명, 이미지를 설정해보자!

yohoi 2019. 4. 22. 16:41

안녕하세요

오늘은 open graph 태그와 관련해서 알아보고자 합니다.

Open Graph란?

기존의 웹사이트를 소셜네트워크 서비스와 연동하여 사업자와 고객들과의 관계를 강화하고 마케팅 플랫폼으로 활용하는 기법. 신규고객 확보나 차별화된 사용자경험(UX)을 고객에게 제공할 수 있으며 외부 유입 트래픽을 증대하거나, 입소문(구전) 효과, 마케팅 홍보 채널의 활용, 고객과의 관계 강화나 신뢰도 증가, 고객에게 차별화된 쇼핑경험을 제공할 수 있는 기법이다.

[네이버 지식백과] 오픈 그래프 [Open Graph] (IT용어사전, 한국정보통신기술협회)

정리하자면,오픈 그래프[open graph] 태그는 사이트가 소셜 미디어로 공유될 때 우선적으로 활용되는 정보

og:type: 개체의 유형, 전달되는 데이터의 video나 website, image 등의 타입
og:title: 개체의 제목
og:description: 개체의 설명
og:image: 개체의 이미지
og:url: 개체의 표시 URL

작성방법은 아래와 같이 head 태그 안에 꼭 넣어 주셔야 합니다!!

<head>
  <meta property="og:type" content="website">
  <meta property="og:title" content="페이지 제목">
  <meta property="og:description" content="페이지 설명">
  <meta property="og:image" content="http://www.mysite.com/myimage.jpg">
  <meta property="og:url" content="http://www.mysite.com">
</head>

마지막으로 확인하는 방법은 아래의 사진과 같습니다.

현재 제 게시글의 오픈 그래프 정보 입니다. 이를 카카오PC에서 공유하는 사진인데요.

위에 표시된것과 같이 맵핑이 됩니다.

이상입니다 감사합니다~