동영상의 Twitter 카드 × S3에 업하고 있는 정적 사이트

트위터 카드란?

이렇게 트윗하면 자동으로

이런 느낌이 되는 녀석이네요.

트윗에 사이트의 URL을 올리는 것만으로, 이미지와 타이틀과 설명문의 카드 링크를 자동으로 만들어 주는 트위터의 서비스입니다.
트윗을 할 때는 URL을 올려 놓고 필요한 것은 링크 측 HTML 편집입니다.

이것은 이미지가 작은 Ver이지만 이미지가 큰 Ver와 동영상 Ver도 있습니다. 이번은 그 동영상 Ver의 해설입니다.

S3이란?

아마존이 하고 있는 스토리지 서비스입니다.
스토리지 서비스는 파일을 그물에 저장하는 서비스입니다.
HTML, CSS, JS 파일을 업로드하여 공개 설정으로 정적 사이트를 게시할 수 있습니다.
이번은 이 업이 완료되고 있는 전제입니다.

구체적인 절차

(1) 동영상을 S3에 넣기

정적 사이트가 업되어 있기 때문에 간단하네요.
화상을 재생할 수 없는 기기로 트윗을 본 사람을 위해서 화상도 일단 탑재할 것 같기 때문에 그것도 두어 주세요. (아래 이미지는 동영상 전용)

예 OK.

(2) HTML을 편집합니다.

다음을 <head> 안에 복사하여 ①~⑤를 메워 갑니다.

  <meta name="twitter:card" content="player" />
  <meta name="twitter:title" content="　①　" />
  <meta name="twitter:site" content="　②　" />
  <meta name="twitter:description" content="　③　" />
  <meta name="twitter:player" content="　④　" />
  <meta name="twitter:player:width" content="360" />
  <meta name="twitter:player:height" content="200" />
  <meta name="twitter:image" content="  ⑤　" />

①~③은 아래의 화상과 대응시켜 적당하게 메워 주세요.

④, ⑤는 물론 방금전의 (1)로 올라간 녀석이군요.
업 파일을 선택하고 아래의 개체 URL입니다.

다른 수단도 있습니다만, https 가 아니게 됩니다. http 그러면 안 됩니다.

이 작업이 완료되면 HTML 파일을 S3에서 업데이트합니다.

(3) 트위터 측에서 체크합니다

실제로 트윗하고 보지 않아도 어떻게 될지 아래에서 볼 수 있습니다.

트위터 카드 유효성 검사기: https://cards-dev.twitter.com/validator

URL을 넣어 보면 이런 느낌이 듭니다.

반영에 시간이 걸릴 수 있으므로 좋지 않다면 시간을두고 시도합시다.

참고

실제 트윗

Reference

이 문제에 관하여(동영상의 Twitter 카드 × S3에 업하고 있는 정적 사이트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/annaPanda8170/items/b0f4aa96da03df5ae3d7

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다