OpenGraph Protocol
- 페이스북에서 정의된 Meta Tag Protocol, URL로 Facebook에 공유될 때 콘텐츠가 표시되는 방식을 관리하기 위한 Markup
- 표준안은 오픈소스로 http://ogp.me/ 에 공개되어 있음
- 현재 naver의 검색 결과와 Kakao Talk의 URL 미리보기에 이용되고 있음
Twitter Card
- 트위터에서 정의된 Meta Tag, Open Graph 대비 많은 옵션을 제공한다.
- 표준안은 https://dev.twitter.com/cards/overview 에 공개되어 있음
<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/article/article1_featured_image.jpg” />
<meta property="og:image:width“ content=“이미지 가로폭“ />
<meta property="og:image:height“ content=“이미지 가로폭“ />
<meta property="og:locale" content="ko" />
<meta property="og:url" content="http://www.mysite.com/article/article1.html" />
<meta property="og:site_name" content=＂사이트 명" />
...
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="페이지 제목">
<meta name="twitter:description" content="페이지 설명">
<meta name="twitter:image" content="http://www.mysite.com/article/article1.html">
<meta name="twitter:domain" content="사이트 명">
...
</head>
주의사항
- title에는 사이트 명을 쓰면 안된다. <title> 태그에는 사이트 명이 사용 가능하다.
- 페이스북은 https://developers.facebook.com/tools/debug/og/object/ 에서 확인 가능하다.
- 동일 주소에 대해서는 페이스북에서 캐슁되기 때문에 https://developers.facebook.com/tools/debug/og/object/ 를 통해 캐쉬를 갱신하여야 한다.