Twitter Cardの登録申請は簡易化されてほぼ無いので古い情報には注意してね!

ivke32 / Pixabay
IT・WEB

最近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

Summary Card with Large Image

Summary Card with Large Image

App Card

App Card

Player Card Example

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

承認が完了すると以下の画像の通りになります。

TwitterCard

以下の通りに表示されるとドメインレベルすべて許可されます。

*ドメイン名 is whitelisted for summary card

承認を受けたら、URLをツイートしてツイートの下に表示されるカードを確認

TwitterCardに対応しているページをツイートしてみます。
やり方は簡単。ページにあるシェアボタンでツイートするか、以下のようにツイートします。
もちろんURLや文章は変更してください。

LIFE-IDEAが提供している情報「Twitter Cardの登録申請は簡易化されてほぼ無いので古い情報には注意してね!」ページはすごく参考になったよ!
https://life-idea.com/7414

無事にTwitterCardが表示されていれば成功です。
TwitterCardがうまく表示されていない場合は少し時間を待つか、申請ページのログを見てみるとよいかもしれません。

以上!!