Twitter Cards(ツイッターカード)を設置する方法

2016

11.4

icatch117

本日はTwitter Cards(ツイッターカード)を設置する方法をご紹介いたします。知っていながらまだ設定されていない方も多いのではないでしょうか?実は以外と簡単に設定できますので今回の記事を参考に設定してみてください。

「Twitter Cards」とは

Twitter Cardsとは、TwitterでのOGP設定を指します。OGPとは、FacebookやTwitterなどのSNSでURLが投稿された際、自動的にURLのページ情報を表示する機能のことです。詳しくはこちらの記事を確認ください。

FacebookのOGP設定に必要なfb:admins IDの確認方法

また、今回の記事の設定にあたり、こちらのOGPの設定は必須になっています。Twitterの場合、ツイートに記載されているURLの「サムネイル画像」「タイトル」「meta description」が自動的に表示されます。

「Twitter Cards」の設定方法

それでは「Twitter Cards」の設定方法を説明致します。さきほども伝えましたが、OGPの設定がされていることを前提に解説いたしますので、まずは、設定をお願いいたします。

「Twitter Cards」の設定

OGPの設定が完了しましたら、下記のコードを <head> </head>内に挿入下さい。

<meta name="twitter:site" content="@Twitterのユーザー名">
<meta name="twitter:card" content="summary">

※Twitterのユーザー名はご自身のTwitter名をご記入ください。

「Twitter Cards」の確認

設定が出来ましたら、「Twitter Cards」の設定が出来ているか確認します。
まずは、こちらのサイトにいってください。
Card validator

続いて、Twitterにログインしてください、
twitter02

すると下記の画面が表示されます。
twittercards

ここで、①に自分のサイトURLを入力します。URLを表示しましたら、②のプレビューボタンを押し、表示を確認します。

twitter03

実際に「*ドメイン名 is whitelisted for summary card」と表示され、下記の用な画面になると成功です。
twitter04

図のように、右側にプレビュー画面が表示されます。サムネイル画像や説明文が入っていれば設定ができています。
以前は更に申請などありましたが、2016年11月01日現在は申請等は不要となっています。

実際のTwitter画面はこのように表示されます。
twitter05

TCDテーマのOGP設定画面

OGP設定を手動で行おうと思うと結構な労力です。TCDテーマのFacebook OGP/Twitter Cards設定機能(※一部テーマで実装、順次実装アップデート予定)では、テーマオプションから「fb:admins ID」、Twitterアカウント名を設定するだけでOGP設定ができるようになっています。
facebook06

※TCDのTwitter CardsはOGPの設定がされていなければ、表示されない仕様となっております。ご利用の際は必ずOGPの設定もお願い致します。

まとめ

「Twitter Cards」の設定方法についてカスタマイズでの設定方法を紹介いたしました。Twitterカードの設定をすることで、各種SNSにおいて、視覚的なわかりやすさでユーザーにインパクトを与えることができます。そのため、SNS上で拡散される場合には、OGP設定と合わせてTwitterカードの設定も必須でしょう。

関連記事

Wordpress使い方大全集

過去アーカイブ