코드조각모음

지난번에 이어서 이번에도 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안 했을경우...

정도 있습니다.