カテゴリー
WordPress運営日誌»WP関連古記事»

【超お手軽】WordPressにTwitter Cardを導入する3つの方法

  • 作成者: 中川 勉
  • 2013-04-01公開 2019-04-06更新

2013-04-01_0902
昨日、ようやく「ウェブシュフ」にもTwitter Cardsを導入しました。他サイトで導入のお手伝いをしたこともあり、都合3通りの方法で導入を経験したので、メモとして残します。

そもそもTwitter Cardsとはなにか

Twitter Cardsは、URLを含むツイートの下に、サムネイル画像付きでそのURLの概要を付け加えるシステムです。

そのURLが属するドメインが、TwitterからTwitter Cardsの利用を承認されると、利用できるようになります。

具体的にどう変化するかというと…

Twitter Cards未導入の場合

Twitter Cardsを利用していないサイトのURLを含むツイートを行うと以下のように表示されます。

2013-03-31_1732-no-twitter-card

「開く」クリックしても、URLのサムネイル画像や説明は表示されません。
2013-03-31_1733-no-twitter-card-open

Tweetをサイトに埋め込む場合も同じことです。

なお、Tweet表示をセンタリングしたい場合は、以下の記事を参照してください。

WordPressにTwitterのTweetを埋め込んで、左寄せ、中央揃え、右寄せする手順まとめ ｜ウェブシュフ

Twitter Cards導入後

しかし、Twitter Cardsを導入済みのサイトのURLを含むツイートを行うと以下のように表示されます。「開く」が「概要を表示」に変わります。

2013-03-31_1734-twitter-card

さらに、「概要を表示」をクリックすると、URLのサムネイル画像や簡単な説明が表示されます。
2013-03-31_1740-twitter-card-open

サイトに埋め込む場合は、URLのサムネイル画像や簡単な説明を表示するかどうかを選ぶことが出来ます。

表示する場合のコードと実際に埋め込んだ様子は下記の通りです。

<blockquote class="twitter-tweet" lang="ja"><p>「本日更新記事」 ビタミンDが不足すると癌や自己免疫疾患にもかかりやすくなる <a href="https://t.co/ZHu6Mws1Bj" title="https://dlvr.it/38KYCY">dlvr.it/38KYCY</a></p>&mdash; ウェブシュフさん (@web_shufu) <a href="https://twitter.com/web_shufu/status/317263697162665984">2013年3月28日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

一方、サムネイル画像や簡単な説明を表示しない場合はこんな感じです。

<blockquote class="twitter-tweet" data-cards="hidden" lang="ja"><p>「本日更新記事」 ビタミンDが不足すると癌や自己免疫疾患にもかかりやすくなる <a href="https://t.co/ZHu6Mws1Bj" title="https://dlvr.it/38KYCY">dlvr.it/38KYCY</a></p>&mdash; ウェブシュフさん (@web_shufu) <a href="https://twitter.com/web_shufu/status/317263697162665984">2013年3月28日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

コードにおける違いは、data-cards=”hidden”という記述の有無だけです。

これで、サムネイル画像や簡単な説明を表示するかしないかを決めています。

導入するに越したことは無い

以上のように、Twitter Cardsを導入すると、自分の投稿をより魅力的に見せる効果が期待できます。

導入するに越したことは無いですよね。

導入するには、必要な設定をした後、TwitterにTwitter Cardsの利用申請をして承認を得ないといけません。

プラグインWordPress SEO by Yoastで設定

設定の方法として一番簡単なのは、最強のSEOプラグインWordPress SEO by Yoastをインストールして、その「Social」タブで行う方法です。

まず、管理画面左サイドバーの「プラグイン」→「新規追加」でWordpress SEO by Yoastをインストールして有効化。

管理画面左サイドバーに「SEO」タブが出来るので「SEO」→「Social」の順にクリックして「Twitter」タブを選択。

2014-03-23_2035

Add Twitter card meta dataのチェックボックスにチェックを入れ、Site Twitter Usernameにユーザーネームから@を除いた部分を入力します。（@web_shufuの場合はweb_shufuと入力します。）

これで、Save Settingを押せばTwitter Cardsの設定は完了ですが、TwitterにTwitter Cardsの利用申請をして承認を得ないといけませんので忘れずに！！

プラグインTwitter Cards Metaで設定

とはいっても、「余計な機能はいらないからtwitter cardの設定だけをやってくれるプラグインは無いのか、という声もあろうかと思います。

そんな肩にオススメなのが、Twitter Cards Metaプラグインです。

設定の仕方はとても簡単です。

まず、管理画面左サイドバーの「プラグイン」→「新規追加」でTwitter Cards Metaをインストールして有効化。

すると、「プラグイン」ページの「Twitter Cards Meta」の下に「Settings」というリンクが出ますので、クリック。
2013-03-31_1952

以下のようなTwitter Cards設定画面になるのですが、赤枠のSite’s Main Twitter Accountに自分のユーザーネームを入力すれば設定完了です。
2013-03-31_1952_001

他の項目もありますが、デフォルトのままで問題ありません。

もちろんこの後TwitterにTwitter Cardsの利用申請をして承認を得ないといけません。

プラグインを使わずに設定

ここまで、プラグインを使ってTwitter Cardsの設定を行う方法を書きましたが、もちろんプラグイン無しで設定できます。

ただし、この方法は、OGPの設定をプラグインに頼らず自力で済ませていることが前提になっています。

プラグインに頼らないOGP設定

この機会にプラグインに頼らないOGP設定に挑戦したい方は、以下のエントリを参考にしてください。

【10分で終了】facebook投稿時にサムネイルを表示するためのOGP設定-WordPressカスタマイズ ｜ウェブシュフ

上記エントリを見てもよくわからない場合は、WP SEO by YOASTで設定する方法がオススメです。

OGP設定が済んだら後は簡単

プラグインに頼らずOGPの設定が出来たら、後は以下の2行を<head>～</head>に追加するだけで、Twitter Cardsの設定は完了です。

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

プレビューでチェック

上記3つのいずれの方法にしろ、設定が終わったら、Preview your Twitter Cards | Twitter Developers でプレビューを確認して正しく設定できたかチェックしましょう。

「Media URL:」に任意のページのURLを打ち込んで、画面の最下部にある「Preview Card」ボタンを押してください。

以下のような感じで、サムネイルもページタイトルも説明文も表示されたなら、問題無しです。

2013-03-31_2206

Twitterへの申し込み

チェックが済んだら、TwitterにTwitter Cardsの利用申請をしないといけません。

申請ページはParticipate in Twitter Cards | Twitter Developers です。

入力欄がいっぱいあるのですが、赤い*が付いてる項目と「Example Summary Card URL」のみ入力すればいいです。

以下のように入力して、最下部にあるsubmitボタンを押せばOK。

Contact Information

Name:サイト名。日本語でOK

Email:Twitterに登録したメアド

Twitter Username:@○○○○○○○○

Website Information

Website domain:「http:」と「/」は省略。当サイトの場合は「https://webshufu.com/」ではなく「webshufu.com」

Website description: 適宜入力。日本語でOK

Twitter Username associated with that domain:@○○○○○○○○

Example Summary Card URL:サイト内のTwitter Cardsの設定が有効などれか1ページのURL

1時間半で審査にパス

submitボタンを押したときに「審査に数週間かかる場合もある」みたいなことが書かれていますが、私の場合ほんの数時間でTwitter Cardsの利用が承認されました。

と日本時間2013年3月31日午前0時10分頃につぶやいて作業に取り掛かり、同日午前1時42分にTwitter Cardsの利用承認メールをいただきました。
2013-03-31_2239

このようにTwitter Cardsは実に手軽に導入できます。

ただ、設定→チェック→申請→承認のサイクルはドメイン単位で行う必要があります。複数ドメインでサイトを管理する場合はTwitter Cardsの導入は少し面倒かもしれません。



「【超お手軽】WordPressにTwitter Cardを導入する3つの方法」への4件の返信

[…] 【超お手軽】WordPressにTwitter Cardを導入する3つの方法 […]

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です