WordPressでTwitterカードを設定する方法

Twitterカードを設定すればツイートに画像や動画などを付けてツイートをアピールできます！

WordPressでも簡単に設定する事ができるので設定方法をご紹介したいと思います
WordPressでの設定方法が分からないという人は参考にしてみて下さい

この記事を見た人はこんな記事も見ています
■Twitterアナリティクスの使い方 ? 自分のツイートの反応・影響力を確認する方法
■iPhone、AndroidからTwitterのツイートを非公開にする方法【鍵】

WordPressのTwitterカード設定手順

OGP・Twitterカードの設定

WordPressで上記画像の様に記事毎にTwitterカードを表示したいのであれば、OGPの設定をしてください
簡単に設定できるのでコチラの記事を参考にして設定してください
■Open Graph Protocol（通称：OGP）の設定方法 【wordpressサンプルあり】

OGPの設定とかわからないし、読むのがめんどうという人は、とりあえず下記コードをヘッダーの中にある＜head＞～＜/head＞の間にコピーして下さい！

<meta property="og:type" content="website" />
<meta property="og:title" content="<?php echo trim(wp_title( '', false)); ?>" />
<meta property="og:description" content="<?php echo strip_tags( get_the_excerpt() ); ?>" />
<meta property="og:url" content="<?php echo("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>" />
<meta property="og:site_name" content="自分のサイト名に変更して下さい" /> 
<meta property="og:image" content="<?php echo wp_get_attachment_url( get_post_thumbnail_id() , 'full' ); ?>" /> 

OGPの設定が終わったら次に下記Twitterカードmetaタグを設定します
こちらもOGP同様＜head＞～＜/head＞の間に記載してください

<meta name="twitter:site" content="自分のサイトのTwitterアカウント「@〇〇〇」" />
<meta name="twitter:card" content="summary" />

この2行で大丈夫なのですが、Twitterカードのプロパティは沢山あるので自分の好みでカスタマイズしちゃって下さい

Twitterカードmetaタグの設定が終わったらどの様に表示されるのかプレビューしてみましょう！

プレビュー

OGP・Twitterカードを設定したら下記URLにアクセスしてください
URL：https://dev.twitter.com/docs/cards/validation/validator

アクセスしたら、Twitterのアカウントでログインできるので、「Username」と「Password」を入力してログインして下さい

ここではどの様に表示されるかプレビューする事ができます
どのように表示されるか試してみましょう

自分のサイトの記事のURLをコピーして下さい
コピーしたら「Card URL」のフォームに貼り付けてください

URLを入力したら青いボタンの「Preview card」をクリックしてください

こんな感じでプレビューが表示されていると思います
表示されなかったらOGPかTwitterカードの設定が間違っているので確認してください

Twitterカードの申請

Twitterカードの申請が完了していないと「Request Approval」と表示されるのでクリックして申請します

「Request Approval」をクリックすると申請のフォームが表示されます
「Description」以外デフォルトで入力されているので、サイトの概要を「Description」に入力し他も問題が無いかチェックしてください

「Mark my cards as containing sensitive content」にはチェックは不要です
自分のサイトに暴力的表現などのコンテンツが含まれている場合のみチェックを入れて下さい

全て入力が完了したら「Request Approval」をクリックしてください

クリックするとこの様に表示されれば申請は完了です

先程設定したメールアドレスに申請完了のメールが届きます
私はメールすぐに届きましたよ！

申請が完了したらどんな感じで表示されるか確認してみて下さい！
Twitterカードがあると無いとでは、見え方が全然違いますよね

Twitterカードの種類

表示方法の違う様々なデザインのTwitterカードがあるので自分のサイトにあったTwitterカードを設定してみて下さい

Summary Card with Large Image

<meta name="twitter:card" content="summary_large_image" />

Photo Card

<meta name="twitter:card" content="Photo Card" />

Gallery Card

<meta name="twitter:card" content="gallery" />

他にもまだまだあるのでコチラを参考にしてみて下さい
URL：https://dev.twitter.com/cards/types