페이스북, 트위터, 카카오스토리, 라인 등 SNS할때 URL만 입력 해도 이미지가 미리 보여지는걸 볼 수 있는데
플랫폼마다 각자 기준이 따로 있어서 이에 대해 알아 봅시다.
페이스북
네이버블로그를 링크해보았습니다.
블로터의 기사를 링크해보았습니다.
소스코드의 헤더부분을 봅시다.
<head> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="-1"> <meta name="robots" content="noindex,follow"> <meta http-equiv="content-type" content="text/html;charset=ks_c_5601-1987"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?2"> <link rel="alternate" type="application/rss+xml" href="https://rss.blog.naver.com/skyvvv624.xml" title="RSS feed for skyvvv624 Blog"> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://blog.naver.com/NBlogWlwLayout.nhn?blogId=skyvvv624"> <script> ..... </script> </head>
네이버의 헤더 영역입니다.
다음은 블로터의 헤더 영역을 봅시다.
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <meta charset="UTF-8"> <title>‘스타크래프트2’ 무료로 즐긴다</title> <meta name="description" content="‘스타크래프트2’ 무료로 즐긴다"> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="mobile-web-app-capable" content="yes"> <link rel="amphtml" href="http://www.bloter.net/archives/294996/amp"> <meta itemscope="" itemtype="http://schema.org/Article"> <meta itemprop="headline" content="‘스타크래프트2’ 무료로 즐긴다"> <meta itemprop="description" content="'스타크래프트2'를 이제 무료로 즐길 수 있다. 블리자드 엔터테인먼트는 11월16일 '스타크래프트2'를 무료로 공개했다. 무료화된 콘텐츠는 자유의 날개 캠페인과 멀티플레이어 래더, 협동 사령관 게임 모드 등이다. '스타크래프트2'는 총 3부작으로 구성돼 있다. 자유의 날개, 군단의 심장, 공허의 유산 등 총 70개가 넘는 싱글 플레이를 통해 시나리오를 즐길 수 있는데 이번에 무료로 공개된 건 첫 번째 캠페인인 자유의 날개다. 나머지 이야기를 체험하려면 따로 구매해야 한다. 캠페인 합본은 현재 온라인 블리자드 샵에서 3만6천원에 판매되고 있다. 기존에 자유의 날개를 구매한 이용자는 12월8일까지 군단의 심장 캠페인을 무료로 받을 수 있다. 이용자 간 온라인 대전을 할 수 있는 멀티플레이어 래더의 경우 최신 유닛 밸런스 업데이트가 된 버전이 무료로 제공된다. 단, 이번에 무료로 '스타크래프트2'를 즐기는 이용자는 일반전 또는 인공지능전 게임을 하루에 1승씩 총 10번을 달성해야 멀티플레이어 래더의 락이 해제된다. 최소 열흘은 게임을 해야 온라인 대전을 할 수 있다는 얘기다. 협동전 모드는 레이너, 케리건, 아르타니스 사령관을 무료로 사용할 수 있으며 나머지 사령관은 다른 사령관은 5레벨까지만 무료다. https://youtu.be/2UyG7xM-WMI '스타크래프트2' 무료화 계획은 지난 11월3일(현지시간) 블리자드의 커뮤니티 축제 '블리즈컨 2017'에서 공개됐다. 애초 무료화 일정은 11월14일로 발표됐지만 시차 문제와..."> <meta itemprop="image" content="http://www.bloter.net/wp-content/uploads/2017/11/starcraft2-free2.jpg"><meta property="fb:admins" content="1057801483"> <meta property="fb:pages" content="150348298315385"><meta name="generator" content="WordPress 4.7.5"> <meta property="article:publisher" content="http://www.bloter.net/archives/author/spirittiger"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@bloter_news"><meta name="twitter:title" content="'스타크래프트2' 무료로 즐긴다"><meta name="twitter:description" content="'스타크래프트2'를 이제 무료로 즐길 수 있다. 블리자드 엔터테인먼트는 11월16일 '스타크래프트2'를 무료로 공개했다. 무료화된 콘텐츠는 자유의 날개 캠페인과 멀티플레이어 래더, 협동 사령관 게임 모드 등이다. '스타크래프트2'는 총 3부작으로 구성돼 있다. 자유의 날개, 군단의 심장, 공허의 유산 등 총 70개가 넘는 싱글 플레이를 통해 시나리오를 즐길 수 있는데 이번에 무료로 공개된 건 첫 번째 캠페인인 자유의 날개다. 나머지 이야기를 체험하려면 따로 구매해야 한다. 캠페인 합본은 현재 온라인 블리자드 샵에서 3만6천원에 판매되고 있다. 기존에 자유의 날개를 구매한 이용자는 12월8일까지 군단의 심장 캠페인을 무료로 받을 수 있다. 이용자 간 온라인 대전을 할 수 있는 멀티플레이어 래더의 경우 최신 유닛 밸런스 업데이트가 된 버전이 무료로 제공된다. 단, 이번에 무료로 '스타크래프트2'를 즐기는 이용자는 일반전 또는 인공지능전 게임을 하루에 1승씩 총 10번을 달성해야 멀티플레이어 래더의 락이 해제된다. 최소 열흘은 게임을 해야 온라인 대전을 할 수 있다는 얘기다. 협동전 모드는 레이너, 케리건, 아르타니스 사령관을 무료로 사용할 수 있으며 나머지 사령관은 다른 사령관은 5레벨까지만 무료다. https://youtu.be/2UyG7xM-WMI '스타크래프트2' 무료화 계획은 지난 11월3일(현지시간) 블리자드의 커뮤니티 축제 '블리즈컨 2017'에서 공개됐다. 애초 무료화 일정은 11월14일로 발표됐지만 시차 문제와..."><meta property="twitter:image:src" content="http://www.bloter.net/wp-content/uploads/2017/11/starcraft2-free2.jpg"><meta property="twitter:image:width" content="1330"><meta property="twitter:image:height" content="589"><meta property="dable:item_id" content="BloterNews294996"> <meta property="dable:author" content="이기범"> <meta property="og:site_name" content="Bloter.net"> <meta property="og:type" content="article"> <meta property="og:locale" content="ko_KR"> <meta property="fb:app_id" content="428034320550759"><meta property="og:url" content="http://www.bloter.net/archives/294996"> <meta property="og:title" content="‘스타크래프트2’ 무료로 즐긴다"> <meta property="og:description" content="자유의 날개 캠페인과 멀티플레이, 협동전이 무료다."> <meta property="og:image" content="http://www.bloter.net/wp-content/uploads/2017/11/starcraft2-free2.jpg"> <meta property="og:image:width" content="1330"> <meta property="og:image:height" content="589"> <meta property="og:image" content="http://www.bloter.net/wp-content/uploads/2017/11/starcraft2-free.jpg"> <meta property="og:image:width" content="780"> <meta property="og:image:height" content="438"><meta property="article:published_time" content="2017-11-16T12:03:15+09:00"> <meta property="article:modified_time" content="2017-11-16T12:03:15+09:00"> <meta property="article:author" content="http://www.bloter.net/archives/author/spirittiger"> <meta property="article:section" content="디지털라이프"> <meta property="article:tag" content="마이크 모하임"> <meta property="article:tag" content="무료화"> <meta property="article:tag" content="블리자드"> <meta property="article:tag" content="블리자드 엔터테인먼트"> <meta property="article:tag" content="스타크래프트"> <meta property="article:tag" content="스타크래프트2"> <meta name="twitter:widgets:link-color" content="#000000"><meta name="twitter:widgets:border-color" content="#000000"><meta name="twitter:partner" content="tfwp"><style type="text/css" id="syntaxhighlighteranchor"></style> <meta name="twitter:card" content="summary"><meta name="twitter:title" content="‘스타크래프트2’ 무료로 즐긴다"><meta name="twitter:site" content="@bloter_news"><meta name="twitter:description" content="자유의 날개 캠페인과 멀티플레이, 협동전이 무료다."><meta name="twitter:image" content="http://www.bloter.net/wp-content/uploads/2017/11/starcraft2-free2.jpg"> </head>
블로터의 헤더영역은 스크립트와 css를 제외하고도 메타태그가 저렇게 많습니다.
그 중에 페이스북 미리보기 이미지 등과 관련된 부분은 아래 빨간색을 이루는 태그들입니다.
페이스북은 og(Open Graph)태그를 우선으로 합니다.
그래서 미리보기와 직접적으로 연관되는 태그들은
og:title
og:description
og:image
태그입니다.
저 태그를 토대로 미리보기 영역에 이미지, 타이틀, 설명글을 간략하게 보여줄 수 있습니다.
페이지 등록시 헤더에 저런 정보가 있으면 자신이 가지고 있는 페이지도 저런식으로 미리보기 페이지를 만들 수 있습니다.
저런식으로 페이지를 작성하는게 SEO에도 도움이 많이 된다고 하더군요.
다음번에는 트위터의 미리보기에대해 써보겠습니다.
'인터넷 기술' 카테고리의 다른 글
| 테스트 장비에 도메인 설정하기(hosts파일 적용) (0) | 2017.12.02 |
|---|---|
| [우분투] 명령어 몇가지 (0) | 2017.11.30 |
| [트위터]공유버튼 만들기 (0) | 2017.11.28 |
| 트위터 주소 등록시 미리보기에 대해... (0) | 2017.11.19 |
| 엑셀에서 줄바꿈 문자열 치환하기 (0) | 2017.11.17 |