페이스북이나 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에서는 다음과 같이 표시됩니다.
