Twitterカードに対応させました！
2017年05月23日 お知らせ
TwitterにURL付きのツイートを投稿したとき、画像とタイトルが含まれるウェブサイトがあります。あの画像とタイトルは、Twitterカードと呼ばれています。
大手メディアなどは、すでにTwitterカードに対応しているサイトが多くなっています。個人ブログではまだそれほど多くなく、最近になって少しずつ増えてきたような印象を受けています。「Twitterカードを設置するのは難しいのかな？」と思って、確認してみたら、今はとても簡単だったので、設置することにしました。
1の「実装するカードタイプを選択」は、深く考えずに、標準の「Summaryカード」を選んでしまえば手っ取り早いです。残りは3ステップです。
2の「適切なメタタグをページに追加」は、ページのheadタグ内に、ルールに沿ってコピペして編集するだけです。
3の「検証ツールでURLを実行して申請」は、以下ValidatorページにURLを入力してプレビューを確認するだけです。
4は、実際にツイッターに投稿して確認してみましょうということです。
この4ステップだけなので、実はTwitterカードの設置はとても簡単でした。唯一頭を使うのは、2の「適切なメタタグをページに追加」だけです。
Twitterカードを使用すると、写真や動画などのリッチメディアをツイートに添付してウェブサイトへのトラフィックを促進できます。ウェブページに数行のHTMLを追加するだけで、そのコンテンツへのリンクが含まれるツイートにカードが追加されるようになり、そのツイートを投稿したユーザーのすべてのフォロワーにカードが表示されます。
大手メディアなどは、すでにTwitterカードに対応しているサイトが多くなっています。個人ブログではまだそれほど多くなく、最近になって少しずつ増えてきたような印象を受けています。「Twitterカードを設置するのは難しいのかな？」と思って、確認してみたら、今はとても簡単だったので、設置することにしました。
Twitterカードはたった4ステップで設置できる！
ツイッターの開発ドキュメントには、「簡単な5つの手順で始める」と書かれています…
1.実装するカードタイプを選択今はたった4ステップです。
2.適切なメタタグをページに追加
3.検証ツールでURLを実行して申請
4.承認を受けたら、URLをツイートしてツイートの下に表示されるカードを確認
1の「実装するカードタイプを選択」は、深く考えずに、標準の「Summaryカード」を選んでしまえば手っ取り早いです。残りは3ステップです。
2の「適切なメタタグをページに追加」は、ページのheadタグ内に、ルールに沿ってコピペして編集するだけです。
3の「検証ツールでURLを実行して申請」は、以下ValidatorページにURLを入力してプレビューを確認するだけです。
4は、実際にツイッターに投稿して確認してみましょうということです。
この4ステップだけなので、実はTwitterカードの設置はとても簡単でした。唯一頭を使うのは、2の「適切なメタタグをページに追加」だけです。
適切なメタタグをページに追加
「適切なメタタグをページに追加」は、サマリーカードタイプを選んでいるので、下記ページに詳細が載っています。<meta name="twitter:card" content="summary" />自分で変更する必要がある場所を、赤字にしてみました。
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
twitter:siteの@〜〜のところは、自分のTwitter IDに変えます。
twitter:titleは、ページのタイトルに変えます（Twitterカードに表示されます）。
twitter:descriptionは、ページの概要に変えます（Twitterカードに表示されます）。
twitter:imageは、Twitterカードに表示する画像URLを指定します。
これでOKです。
このブログの画像URLについては、ブログの本文からJPEG画像のURLを抽出して、それを自動的に設定するようにプログラムを作り替えました。
あとは、ValidatorページにURLを入力してプレビューを確認すれば完了です。
思ったよりも簡単でした。これならブログに限らず、どんなウェブサイトにもツイッターカードを設置可能です。
動作確認
検証ツールで正常に動作していることを確認できたら、あとはツイッターでつぶやくだけです。
このように、ツイート内にツイッターカードが表示されるようになりました。