最近Twitter Cardに対応できるようにこのサイトでも実装をしてみました。
Google検索で出てくる情報は古いものばっかりで古い記事にはTwitterCardを利用するには申請が必要だと言われて申請ページを以下のURLの通りに開いてみたら404ページ、ページが存在しませんと表示されます。これには僕にも中々手こずりました。どうすればいいのか?
URLの変更をしたのかなと思い探してみましたが、古い記事のページ通りの画像と一緒のページを探してみましたが中々見つからず、Twitterのヘルプページを探してみるとなんと、簡易化されて申請はほぼないとのこと。
僕自身、あるはずのないTwitterCardの申請を探し出すために1日以上かかりました。他の人も同じ目にあわないように現在、2017年の8月1日、最新情報を掲載していきます。
目次
TwitterCardを利用するためには
TwitterCardの利用方法はTwitterの公式ページにかかれています。以下の通りです。
- 実装するカードタイプを選択
- 適切なメタタグをページに追加
- 検証ツールでURLを実行して申請
- 承認を受けたら、URLをツイートしてツイートの下に表示されるカードを確認
https://dev.twitter.com/web/sign-inhttps://dev.twitter.com/ja/cards/overview
過去とは違ってとてもシンプルです。
1、実装するカードタイプ
現在4種類用意されており、それぞれどのようなものかは以下の通り。
Summary Card

Summary Card with Large Image

App Card

Player Card Example

2、適切なメタタグをページに追加
Cards Markup Tag Reference — Twitter Developers
英語なので、英語はちょっと…という方は検索で他の方の記事を参考にしてみると良いかもしれません。
このサイトはWordPressを利用しておりTwitterCard専用のプラグインを利用しています。
検証ツールでURLを実行して申請
Card Validator | Twitter Developers
英語ですがこちらが申請ページとなります。
申請とはいえ面倒な手続きはなく、URLを入力するだけでできるもようです。
検索結果に出て来る古い記事を参考にしているとここでつまづく人が多いかと思われます。
古い記事はここで面倒な手入力があったそうですが、今はそんなものはございません。
古いページで紹介されている申請ページのURLはいかの通り。
https://cards-dev.twitter.com/validator
いまどきの申請ページは以下の通りです。
https://cards-dev.twitter.com/validator
承認が完了すると以下の画像の通りになります。

以下の通りに表示されるとドメインレベルすべて許可されます。
承認を受けたら、URLをツイートしてツイートの下に表示されるカードを確認
TwitterCardに対応しているページをツイートしてみます。
やり方は簡単。ページにあるシェアボタンでツイートするか、以下のようにツイートします。
もちろんURLや文章は変更してください。
https://life-idea.com/7414
無事にTwitterCardが表示されていれば成功です。
TwitterCardがうまく表示されていない場合は少し時間を待つか、申請ページのログを見てみるとよいかもしれません。
以上!!