최대 1 분 소요

오픈 그래프 ( The Open Graph protocol )

오픈 그래프란, 웹 페이지가 소셜 미디어에 공유될 때 우선적으로 보여지는 이미지, 정보 등을 지정하는 것

Slack Open Graph example

KakaoTalk Open Graph example

<meta property="og:type" content="website" />
<meta property="og:site_name" content="Starbucks" />
<meta property="og:title" content="Starbucks Coffee Korea" />
<meta property="og:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
<meta property="og:image" content="./images/starbucks_seo.jpg" />
<meta property="og:url" content="https://starbucks.co.kr" />

다음과 같이 meta 태그 안에 서술되며 og는 Open Graph의 약어 이다.

  • og:type : 페이지의 유형을 나타냄 ex) website,video.movie
  • og:site_name : 사이트의 이름
  • og:title : 페이지의 이름
  • og:description : 페이지의 간단한 설명 ( 내용이 너무 많으면 카카오톡의 경우 불건전 정보로 인식 )
  • og:image : 페이지의 대표 이미지 주소
  • og:url : 페이지의 주소

트위터 카드 ( Twitter Cards)

트위터 카드는 웹 페이지가 트위터로 공유될 때 우선적으로 보여지는 이미지와 정보를 지정하는 것

사용법은 오픈 그래프의 약어인 optwitter로 바꾸면 된다.

카테고리:

업데이트: