Twitterカードが表示されない!?ワードプレスでTwitterカードを設定する一番簡単な方法！

どうもこんにちは、kou(@souda_kou)です。

実は先日までサイトの引越し作業をしていたのですが、最後に一つ問題がありまして。

「Twitterカードの出し方忘れた…..。」

前のサイトでは何やら「メタタグ」などの設定をごちゃごちゃした記憶はあるのですが、思い出しながらやってもダメでした。

https://cards-dev.twitter.com/validatorで申請してみても、required meta tag missingっていうエラーがでちゃって。

でも僕は発見してしまいました！！
絶対に一番簡単で早い方法を。

1分は盛ったかもしれないですが、3分あればできるはずです（笑）

ちなみに今ではこんな感じにツイッター上で表示できてます♪

サイトお引っ越し…完了です✨
まだいじりたいとこはありますが、やっと記事に集中できそう！
ゆーちゅーぶろぐをよろしくお願い申し上げます。https://t.co/Vgep8H4B7l

— kou@ゆーちゅーぶろぐ (@youtublog_kou) October 10, 2017

ということで今回は、、、

ではやっていきますよっ！！

STEP.1 「Yoast SEO」プラグインをインストール・有効化

プラグインのインストールは皆さんお手の物ですよね？

ワードプレスのダッシュボードから、
【プラグイン】➡︎【新規追加】

からのこんなかんじで検索して、【今すぐインストール】➡︎【有効化】

※この時点で互換性のないワードプレスのテーマはうまく有効化できないはずなので、そしたら互換性のあるテーマを探してみてください…orz

STEP.2 このプラグインに自身のTwitterアカウントを入力

有効化できた方は、ワードプレスのダッシュボードの【設定】にこんな感じで追加されているはずです。

「Yoast SEO」のダッシュボードを開いて、【機能】タブをクリック。
するとこんな感じで、【詳細設定ページ】というのがあるはずです。

これを「無効」から「有効」にかえましょう。

そして画面下部の【変更を保存】を忘れずに。

すると「Yoast SEO」のダッシュボードに【ソーシャル】が追加されるのでこれをクリック。

まずは【アカウント】タブでTwitterアカウントを入力しましょう。
（IDっていうのかな？）

僕なら、＠souda_kouなんですが、ここで注意なのが、

「＠は入力しないでください！！」

そして忘れずに「変更を保存」。

次に【Twitter】タブを開き、【大きな画像付きのSummary】を選択します。
これを選択すると、冒頭の僕のような大きなアイキャッチ付きのツイートになりますし、
何も設定しない場合は、左に小さな正方形の画像、右にタイトルと説明文のツイッターカードになります。
お好みでどうぞ！！

で、「変更を保存」。

お疲れ様です！！
ここまできたらもう終わったも同然ですが一応最後に設定が反映されてうまく機能するかテストしてみましょう。

STEP.3 Card validatorでちゃんとTwitterカードがでるかチェック！

まず、Twitterに投稿したい自分の記事のURLをコピーします。

そしてこちらにアクセスしまして、下の画像の欄にそのURLをペーストします。

Preview cardを押して、プレビューを見てみましょう。

ちょっと反映に時間がかかるみたいで、最初はアイキャッチが読み込まれなかったり、大きい画像じゃなくて普通のサマリーカードになったりします。

一呼吸おいてもう一度「Preview card」を押してみましょう。

すると完璧にTwitterカードが読み込まれました！！

このプレビューが出れば、ご自身のTwitterアカウントで記事URLをツイートすればツイッターカードが出るはずです。

ただ、記事URLはたしかツイートを書いた最後に貼り付けないとうまく作動しなかったと思います…(うる覚え)

まとめ