지난번에 이어서 이번에도 SNS에 URL 등록시 미리보기에 대해  알아봅시다.


지난번 페이스북에 이어서 오늘은 트위터에 대해서 쓰도록 하겠습니다.



이번에도 트위터에 네이버블로그의 url을 링크해보았습니다.



그냥 URL주소 링크만 등록되고 미리보기 이미지는 볼 수 없습니다.


다음은 블로터 기사를 링크해 보겠습니다.



이미지뿐만 아니라 글 내용도 약간 보여짐니다.


블로터의 헤더부분에서 다른부분은 제외하고 트위터의 관련된 메타태그만 나열해보면 다음과 같습니다.



<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="사용자 참여로 번역 품질 높이자, ‘파파고 짐’">
<meta name="twitter:site" content="@bloter_news">
<meta name="twitter:description" content="네이버의 인공신경망 번역 서비스 '파파고'가 11월15일부터 '파파고 짐(Papago Gym)' 서비스를 시작한다고 알렸다. 사용자의 참여로 파파고의 번역 품질을 높이는 서비스다. 인공신경망 번역 서비스에서 가장 중요한 요소는 품질 높은 번역 데이터다. 번역 품질은 얼마나 좋은 데이터를 얼마나 많이 확보하느냐에 달렸다. 번역기는 제대로 된 번역 문장의 쌍을 바탕으로 학습하고, 학습을 바탕으로 더 나은 서비스를 제공할 수 있다. 파파고…">
<meta name="twitter:image" content="http://www.bloter.net/wp-content/uploads/2017/11/papago-gym-2.png">



시작은 twitter:card 태그로 시작합니다. 

content 속성의 값은 "summary", "summary_large_image", "app", "player"를 지정할 수 있습니다.


twitter:site의 content속성 값은 현재 페이지의 소유 트위터 계정을 적습니다.


twitter:title과 twitter:description에는 미리보기에 보여질 제목과 설명을 적습니다.


twitter:image에는 미리보기에 보여질 이미지를 적어주면 됩니다.



위에 있는 내용을 다 적고도 이미지가 제대로 안나온다면 다음 페이지에서 안나오는 이유에 대해서 확인할 수 있습니다.


https://cards-dev.twitter.com/validator



안나오는 중요한 이유 중 몇가지는 링크 URL의 도메인이 트위터의 whitelist로 등록이 안되어있는경우...


트위터에서 웹페이지를 크롤링 하는 트윗봇을 웹서버에서 allow안 했을경우...


정도 있습니다.





페이스북, 트위터, 카카오스토리, 라인 등 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천원에 판매되고 있다. 기존에 자유의 날개를 구매한 이용자는&nbsp;12월8일까지 군단의 심장 캠페인을 무료로 받을 수 있다. 이용자 간 온라인 대전을 할 수 있는 멀티플레이어 래더의 경우 최신 유닛 밸런스 업데이트가 된 버전이 무료로 제공된다. 단, 이번에 무료로 '스타크래프트2'를 즐기는 이용자는 일반전 또는 인공지능전 게임을 하루에 1승씩 총 10번을 달성해야 멀티플레이어 래더의 락이 해제된다. 최소 열흘은 게임을 해야 온라인 대전을 할 수 있다는 얘기다. 협동전 모드는&nbsp;레이너,&nbsp;케리건,&nbsp;아르타니스 사령관을 무료로 사용할 수 있으며 나머지 사령관은&nbsp;다른 사령관은 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천원에 판매되고 있다. 기존에 자유의 날개를 구매한 이용자는&nbsp;12월8일까지 군단의 심장 캠페인을 무료로 받을 수 있다. 이용자 간 온라인 대전을 할 수 있는 멀티플레이어 래더의 경우 최신 유닛 밸런스 업데이트가 된 버전이 무료로 제공된다. 단, 이번에 무료로 '스타크래프트2'를 즐기는 이용자는 일반전 또는 인공지능전 게임을 하루에 1승씩 총 10번을 달성해야 멀티플레이어 래더의 락이 해제된다. 최소 열흘은 게임을 해야 온라인 대전을 할 수 있다는 얘기다. 협동전 모드는&nbsp;레이너,&nbsp;케리건,&nbsp;아르타니스 사령관을 무료로 사용할 수 있으며 나머지 사령관은&nbsp;다른 사령관은 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에도 도움이 많이 된다고 하더군요.


다음번에는 트위터의 미리보기에대해 써보겠습니다.  

+ Recent posts