Twitter Cardsの申請をしてみたよというお話。


Twitter Cardsというのをご存知でしょうか?
昨年の6月からスタートしているけど、あまり浸透してない感じですが、こんなヤツです。

nanapiのTwitter Cards

nanapiのTwitter Cards

通常のツイートが拡張されて、上記のようにリッチスニペット的に表示が行われます。
先日上記nanapiのTwitter Cardを設定した折に、okaoka.netにもあわせて設定してみました。
 

設定方法

設定は大変簡単で、大まかに2工程で完了です。

  1. サイトに専用のmetaタグを配置する
  2. Twitterに申請する

だけです。簡単ですね。
とは言えFacebookなんかのogpに比べると申請ってステップが多いのもあんまり浸透してない理由ですかね…
 

metaタグの設定(ブログや記事の場合)

以下のmetaタグを設定します。

<meta name="twitter:card" content="summary"> <!--OGPでURLを設定済みなら不要-->
<meta name="twitter:site" content="@Twitterのユーザー名">
<meta name="twitter:url" content="Twitter上で表示したいサイト(記事ページ)のURL" /> <!--OGPでURLを設定済みなら不要-->
<meta name="twitter:title" content="Twitter上で表示したいサイト(記事ページ)のタイトル" /> <!--OGPでtitleを設定済みなら不要-->
<meta name="twitter:description" content="Twitter上で表示したいコンテンツの説明文" /> <!--OGPでdescriptionを設定済みなら不要-->
<meta name="twitter:image" content="Twitter上で表示したい画像のURL" /> <!--OGPでimageを設定済みなら不要-->

Facebook用などにogpタグを設定している場合は、上の2つ、twitter:cardとtwitter:siteを追加するだけです。簡単ですね。
ogpはかなり一般的になっているので、ほとんどの方は上2つで済むかと思われます。
 
その他動画コンテンツ用や写真用の、twitter:cardのcontentにplayerやphotoなんかも設定出来ます。
通常は不要ですが細かな設定が知りたい場合は、公式のドキュメント(英語)を参照してください。
 
設定が済んだら公式のプレビューページでちゃんと出るか確認します。
Preview your Twitter Card → https://dev.twitter.com/docs/cards/preview
上記ページのMedia URL欄に設定したサイトや記事ページのURLを入力して確認します。
上手く設定できていると以下のように

canvas

リッチスニペットが!

問題無さそうですね!
 

Twitterに申請する

最後にTwitterに使いはじめるぞと申請します。
Participate in Twitter Cards → https://dev.twitter.com/form/participate-twitter-cards
Twitterアカウントでログインすると以下の様な画面が出るので必要項目を入力します。


 
良い感じに設定したら申請です!
完了すると、こんな画面が出て完了です。

簡単ですね!
書いてある通り、反映までは結構かかるみたいです。
nanapiはすぐ反映されましたがokaoka.netはまだ反映されてません…うーむ。
 
とまあ本当に簡単ですが、正直クライアントアプリも対応しないと見られないし、公式でもリッチスニペット表示はTweetを選択しないと見られないなど、結構イケてない仕様ですが使ってるアカウントも少ないので、大量のフォロワーを抱えてる方は設定しておくと良いんじゃないでしょうか。

Leave a Reply

*

*