ZAPAnet総合情報局 > [Z]ZAPAブロ〜グ2.0 > お知らせ > Twitterカードに対応させました!

Twitterカードに対応させました!

このエントリーをはてなブックマークに追加
2017年05月23日 カテゴリ:お知らせ
TwitterにURL付きのツイートを投稿したとき、画像とタイトルが含まれるウェブサイトがあります。あの画像とタイトルは、Twitterカードと呼ばれています。
Twitterカードを使用すると、写真や動画などのリッチメディアをツイートに添付してウェブサイトへのトラフィックを促進できます。ウェブページに数行のHTMLを追加するだけで、そのコンテンツへのリンクが含まれるツイートにカードが追加されるようになり、そのツイートを投稿したユーザーのすべてのフォロワーにカードが表示されます。

大手メディアなどは、すでにTwitterカードに対応しているサイトが多くなっています。個人ブログではまだそれほど多くなく、最近になって少しずつ増えてきたような印象を受けています。「Twitterカードを設置するのは難しいのかな?」と思って、確認してみたら、今はとても簡単だったので、設置することにしました。

Twitterカードはたった4ステップで設置できる!

ツイッターの開発ドキュメントには、「簡単な5つの手順で始める」と書かれています…
Twitterカード
1.実装するカードタイプを選択
2.適切なメタタグをページに追加
3.検証ツールでURLを実行して申請
4.承認を受けたら、URLをツイートしてツイートの下に表示されるカードを確認
今はたった4ステップです。

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を入力してプレビューを確認すれば完了です。

思ったよりも簡単でした。これならブログに限らず、どんなウェブサイトにもツイッターカードを設置可能です。

動作確認

検証ツールで正常に動作していることを確認できたら、あとはツイッターでつぶやくだけです。
Twitterカード

このように、ツイート内にツイッターカードが表示されるようになりました。