動画のTwitterカード × S3にアップしている静的サイト

4318 ワード
Twitter S3 TwitterCards AWS AWS テキストリンク

ツイッターカードとは？


こうツイートすると、自動で

こんな感じになるやつですね。

ツイートにサイトのURLを載っけるだけで、画像とタイトルと説明文のカードリンクを自動で作ってくれるツイッターのサービスです。
ツイートするときはただURLを載せるだけで、必要なのはリンク側のHTMLの編集です。

これは画像が小さいVerですが、画像が大きいVerや動画Verもあります。今回はその動画Verの解説です。

S3とは？

Amazonがやっているストレージサービスです。
ストレージサービスとはファイルをネット上に保管するサービスです。
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を入れてみればこんな感じになります。

反映に時間かかることがあるのでダメだったら時間をおいて試しましょう。

参考

実際のツイート