레이블이 Open Graph인 게시물을 표시합니다. 모든 게시물 표시
레이블이 Open Graph인 게시물을 표시합니다. 모든 게시물 표시

2018년 8월 5일 일요일

Google Plus Open Graph 지원내용 테스트내용

페이스북이나 Google Plus에 링크주소를 붙이면 해당 대표 이미지나 나타납니다. 이것은 Open Graph 프로토콜을 이용하여 메타태그의 데이타를 보여주는 방법입니다. 당연히 해당 소스의 사이트에서 지원해야 합니다.

Open Graph Protocol(http://ogp.me/)


다음과 같은 Meta tag를 해당 웹페이지에 추가합니다. CMS나 Wordpress에서는 자동으로 선택해주는 기능을 제공합니다.
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>


해당 뉴스의 주소는 다음과 같습니다. http://www.etnews.com/20180806000145
아래 그림처럼 해당 뉴스에는 여러개의 그림이 포함이 되어 있고, 광고 그림도 있습니다.


Open Graph Preview 크롬 add-on을 설치하여 어떤 메타태그를 지원하는지 확인합니다.
 주소 : https://chrome.google.com/webstore/detail/open-graph-preview/ehaigphokkgebnmdiicabhjhddkaekgh?hl=ko


실제로 해당 URL을 facebook에 붙여넣기를 하시면 다음과 같이 나타납니다.

Google Plus에서는 다음과 같이 표시됩니다.