昨日、ようやく「ウェブシュフ」にもTwitter Cardsを導入しました。他サイトで導入のお手伝いをしたこともあり、都合3通りの方法で導入を経験したので、メモとして残します。
そもそもTwitter Cardsとはなにか
Twitter Cardsは、URLを含むツイートの下に、サムネイル画像付きでそのURLの概要を付け加えるシステムです。
そのURLが属するドメインが、TwitterからTwitter Cardsの利用を承認されると、利用できるようになります。
具体的にどう変化するかというと…
Twitter Cards未導入の場合
Twitter Cardsを利用していないサイトのURLを含むツイートを行うと以下のように表示されます。
「開く」クリックしても、URLのサムネイル画像や説明は表示されません。
Tweetをサイトに埋め込む場合も同じことです。
[#wordpress][#高速化] / “Wordpressで読み込み速度1秒台を実現するために実施した5つの施策 | gori.me” htn.to/dxeMzp
— ウェブシュフさん (@web_shufu) 2013年3月26日
なお、Tweet表示をセンタリングしたい場合は、以下の記事を参照してください。
WordPressにTwitterのTweetを埋め込んで、左寄せ、中央揃え、右寄せする手順まとめ |ウェブシュフ
Twitter Cards導入後
しかし、Twitter Cardsを導入済みのサイトのURLを含むツイートを行うと以下のように表示されます。「開く」が「概要を表示」に変わります。
さらに、「概要を表示」をクリックすると、URLのサムネイル画像や簡単な説明が表示されます。
サイトに埋め込む場合は、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>— ウェブシュフさん (@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>
「本日更新記事」 ビタミンDが不足すると癌や自己免疫疾患にもかかりやすくなる dlvr.it/38KYCY
— ウェブシュフさん (@web_shufu) 2013年3月28日
一方、サムネイル画像や簡単な説明を表示しない場合はこんな感じです。
<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>— ウェブシュフさん (@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>
「本日更新記事」 ビタミンDが不足すると癌や自己免疫疾患にもかかりやすくなる dlvr.it/38KYCY
— ウェブシュフさん (@web_shufu) 2013年3月28日
コードにおける違いは、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」タブを選択。
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」というリンクが出ますので、クリック。
以下のようなTwitter Cards設定画面になるのですが、赤枠のSite’s Main Twitter Accountに自分のユーザーネームを入力すれば設定完了です。
他の項目もありますが、デフォルトのままで問題ありません。
もちろんこの後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」ボタンを押してください。
以下のような感じで、サムネイルもページタイトルも説明文も表示されたなら、問題無しです。
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の利用が承認されました。
[#twitter]プラグイン無しでWordpressに埋め込むぞ。おー。 / “Twitter Cards | Twitter Developers” htn.to/FH5QZdV
— ウェブシュフさん (@web_shufu) 2013年3月30日
と日本時間2013年3月31日午前0時10分頃につぶやいて作業に取り掛かり、同日午前1時42分にTwitter Cardsの利用承認メールをいただきました。
このようにTwitter Cardsは実に手軽に導入できます。
ただ、設定→チェック→申請→承認のサイクルはドメイン単位で行う必要があります。複数ドメインでサイトを管理する場合はTwitter Cardsの導入は少し面倒かもしれません。
「【超お手軽】WordPressにTwitter Cardを導入する3つの方法」への4件の返信
[…] 【超お手軽】WordPressにTwitter Cardを導入する3つの方法 […]
[…] 今回参考にさせていただいたのがこちらのサイト様です。 解かりやすく助かりました。感謝です♪ […]
[…] 【超お手軽】WordPressにTwitter Cardを導入する3つの方法 |ウェブシュフ […]
[…] https://webshufu.com/twitter-card/ […]