WordPressでTwitter Cardsを設定する方法

自分のブログがTwitterでツイートされた時の表示をいい感じにするために「Twitter Cards」を設定しました。

その際のメモ。

設定方法

以前紹介した「WordPressでFacebook用のOGPを設置する方法」が終わっている前提で、「head」タグ内に

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@自分のTwitter ID">

を追加するだけで。

僕の場合は

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@iTotuo">

となる。

Twitter:cardについて

上記表示の仕方で「summary」部分はコンテンツの内容で変える必要がある。設定は、

summary：標準のカードです。タイトル、ディスクリプション、サムネイル、サイトのTwitterアカウントを含みます。
summary_large_image：Summaryカードに似ていますが、画像が目立つようになっています。
photo：写真を表示するためのカードです。
gallery：写真の収集を目立たせるカードです。
app：アプリケーションを紹介するためのカードです。
playerカード：動画や音声プレーヤーカードです。
product：商品を見せるためのカードです。

詳しい説明は「Twitterカード | Twitter Developers」で。

Twitterに申請

設定が完了したらTwitterに利用申請する。
「Card Validator | Twitter Developers」へアクセスし、TwitterIDでログイン。左メニュータブの「Validate & Apply」をクリックし、確認したいURLを入力して「GO!」をクリック。

正しく設定できていれば思い通りの表示になっている。

わからないことは人に聞こう

プログラミングをする上で、わからないことはネットなどを使い自分で調べる技術が必要ですよね。

時間がかかっても、ある程度のことは解決できます。

しかし、どうしても答えにたどり着けなかったり、探す時間が惜しいときもあります。

そこでオススメなのが無料登録でプログラミングに関する質問ができるテラテイルです。

質問の投稿にコードも投稿できるので、自分のコードを投稿して問題のある箇所を指摘してもらうことができます。

プログラマーには、自分で探す技術も必要ですが、人に聞く技術は更に重要です。

登録無料で質問できますので、テラテイルで質問する力を磨いてみましょう！

今すぐテラテイルで質問する

おわりに

SNSからの流入はアクセスアップにつながるので、SNSでの見栄えを良くし、アクセスアップに繋げたいですね。