RECOMEND
You are here: HomeSocial MediaTwitterあなたのサイトをTwitterで目立たせる!Twitter Cards設定方法

あなたのサイトをTwitterで目立たせる!Twitter Cards設定方法


みなさん、こんにちは。

APIのバージョンアップなどいろいろと仕様変更や新機能追加が目立つTwitterですが、本日はその新機能の一つであるTwitterCardsの設定方法をご紹介いたします。

これを設定したサイトはURLがツイートされた場合、ツイート文とは別に詳細が表示されるようになります。

もちろん開発者用サイトには詳細が記載されているのですが、英文しか用意されていないため、
簡単にではありますが、体験談を踏まえ、設定までの流れを説明させていただきます。

まずは表示させたいサイトにメタタグを設置する必要があります。

ヘッダー部分に以下を記述します。

<meta name="twitter:site" content="TwitterID">
<meta name="twitter:url" content="ページのURL">
<meta name="twitter:title" content="タイトル">
<meta name="twitter:description" content="概要文">
<meta name="twitter:image" content="画像URL">

上記のタグは最もポピュラーな”Summary”を表示させる場合となりますが、”Photo”や”Player”を設定したい場合は開発者サイトを参照ください。

また、WordPressをご利用の方は専用のプラグインも登場していますので、
こちらを使うと自動でメタタグが設定できます。

WPプラグイン「Twitter Cards」

メタタグの準備が整いましたら、こちらのタグを機能させるために、
Twitterに申請を行う必要があります。

Participate in Twitter Cards

なお、申請する前にこちらのページでタグが正常に機能しているかテストすると確実です。

Preview your Twitter Card

該当のURLを入力すると、TwitterCardsでの見え方がプレビューされます。

表示に問題がなければいよいよ申請を行います。

申請ページは英語で表示されていますが、必要な入力項目は以下になります。

Contact Information(連絡先情報)

  • Name: 申請者の名前
  • Email: 連絡先メールアドレス
  • Twitter Username: 申請者のTwitterID

Website Information(ウェブサイト情報)

  • Website domain: ウェブサイトのドメイン
  • Website description: サイトの概要
  • Twitter Username associated with that domain: サイトに関連しているTwitterID
  • Example Summary Card URL:
  • Example Photo Card URL:
  • Example Player Card URL:
    上記3項目はどれか一つに記入します。
    今回は”Summary”で設定しているのでそちらに設定したページのURLを入力します。

以上、入力が完了しましたら「Submit」を押して申請完了です。

申請が承認されるまでは数日かかります。
筆者の場合は5日ほどで以下のメールが届き申請が承認されました。

 

早速URLをツイートしてみると以下のように詳細が表示されるようになりました。

ちゃんとモバイルにも対応しています。

 

現在、これが表示されるのはサイトと公式アプリのみで、まだクライアントアプリでは非対応となっていますが、FacebookのOGPのように今後普及していくと思われますので、早いうちに設定しておいて損はないかと思います。

以上、Twitter Cardsの設定方法でした。


Comments are closed.