[다정다감] 프로그래밍Tips SNS에 링크할 때 보이는 프리뷰 만들기

프로그래밍 Tips
프로그래밍에 관한 Tip을 공유하는 곳입니다.

SNS에 링크할 때 보이는 프리뷰 만들기

이석종

2020-04-12 08:52:54, 조회 : 828, 추천 : 260

- Download #1 :

resize_tw_card_val.jpg (57.4 KB), Download : 24

카톡, 트위터, 페이스북에 어떤 페이지를 link하면 간단한 프리브가 보인다.

uril만 있으면 무슨 내용인지 알 수 없는데 이 preview가 있으면 무슨 내용인지 알 수 있기 때문에 신뢰감과 흥미를 동시에 끌어 올릴 수 있는 방법이다.

이걸 처음 만든 것은 페이스북이란다.

이걸 만드는 것은 의외로 간단하다. 아래와 같은 html의 앞부분에 meta태그를 추가하면 된다. 이미지와 url, description, title이런 것들을 설정해주면 된다. 트위터의 경우 자신들만의 태그를 하다 더 요구한다. 트위터는 이걸 카드라고 부른다. 그리고 트위터에서는 이 카드가 제대로 작동하는지 확인하는 기능을 제공한다. https://cards-dev.twitter.com/validator

  <meta property="og:image" content="http://gumifo.org/zeroboard/data/gujopenews/1580020952/2020.png"/>
  <meta property="og:url" content="유알엘"/>
  <meta property="og:description" content="디스크립션"/>
  <meta property="og:title" content="타이틀"/>
  <meta name="twitter:card" content="summary" />

이제 본인의 페이지의 품격을 한단계 높일 수 있다.

참고로 이 사이트는 zeroboard 4를 쓰고 있습니다.
이정도 썼으면 갈아엎고 새로운 걸 써야 하는데
그동안 여기 저기 소스를 수정해놔서 아까워서 갈아엎질 못하고 있네요.
어제는 파비콘을 추가했고 오늘은 preview를 추가해보려고 합니다.

아참. 홈페이지에 새로운 글과 새로운 댓글을 주요 게시판만 대상으로 했는데 어제 수정해서 모든 게시판과 댓글에 대해서 작동하도록 했습니다.

디자인을 좀 바꿔야 하는데... 시간이...ㅠㅠ

이석종

페이스북에도 같은 기능이 있습니다.
페이스북 https://developers.facebook.com/tools/debug/
트위터 https://cards-dev.twitter.com/validator

2020-04-12
18:42:29

추천하기

목록보기