ブログの記事などでツイートボタンを押してツイートした時に、ツイート内容の中に「画像」と「要約（数文字程度）」が追加されている時があります。

このようなツイートですね。

ブロガーは生産性を上げたいならHIKAKINさんを見習うべき https://t.co/RIoBHGMxFs @tanesho42

— ショウ (@tanesho42) 2017年5月6日

このツイートはブログ記事のツイートボタンが押されると、自動的にツイートボタン内容の中に画像と要約が追加されるように設定しています。

この機能のことを「ツイッターカード」と言います。

ツイッターやフェイスブックなど、ＳＮＳに記事がシェアされた時にツイッターカードで表示される方が目に留まりやすく、タイムラインを見ている人に読んでもらえる可能性も高くなります。

私も以前からツイッターカードを実装してみたいと思いながらも、調べてみると難しそうだったので後回しにしていましたが、今回頑張って実装をしてみました！

いざ実装しようとやってみると、やっぱり分からなかったり思うように動かず悩みましたが、最終的には実装できました。

ツイッターカード実装してみたいなぁ～って思っているブロガーさんへ、私が学んだことを分かりやすく説明書きますので参考にして下さい。

ツイッターカードの仕組み！

まずはツイッターカードの仕組みを書きます。

「とにかく実装したいんだ！」って人は読み飛ばして下さいね。

ツイッターカードの仕組みを簡単に書くと、

１．まずツイッターカードを表示させるための情報としてmetaタグというのを「All in One SEO」というプラグインを使って設定します。

２．次に「このＵＲＬはツイッターカードを使いますよ！」という申請を行います。

この２つだけです！

私はてっきりツイートボタンに何か処理を追加するかと思っていたので、プログラミング的なことが必要なのかもしれないと思っていたのですが違いました。

photo credit: Tom Raftery via photopin cc

手順を説明します

まずはブログ記事内にツイッターカード用のmetaタグを追加しますが、その方法は調べてみると色々あります。

今回、私は「All in One SEO」というプラグインを使う方法で実装しました。

もし、「All in One SEO」というプラグインを使うのが嫌だという方は申し訳ありませんが他の方法を調べてみて下さい。

「All in One SEO」の設定

１．ワードプレス管理画面の左メニュー内から、「All in One SEO」⇒「ソーシャルメディア」を選択します。

２．ソーシャルボタンの右下に青い「Activate」ボタンをクリックして下さい。クリックするとボタンは「Deactivate」になります。

３．ワードプレス管理画面の左メニュー内から、「All in One SEO」⇒「ソーシャルメディア」を選択します。

４．画像設定の中にある「OG:Image ソースを選択」という項目で「アイキャッチ画像」を選びます。

※私の場合、全ての記事に必ずアイキャッチ画像を設定していますので「アイキャッチ画像」を選びましたが、選択肢は他にもあります。

５．Twitter設定の中にある項目を次の通り設定します。

「Twitterサイト」と「Twitterドメイン」は私の場合、tanesho42ですが自分のTwitterの内容を設定してくださいね。

６．設定が終わりましたら、下の方にある「設定を更新」ボタンを押して下さい。

ＵＲＬを申請する

７．Card validatorにアクセスをして、「Card URL」に申請をしたい記事のURLを入力して、「Preview card」ボタンをクリックして下さい。

右の方にプレビューが表示されますので、正しく表示されることを確認したら、実際に記事内のツイートボタンからツイートを試してみて下さい。

※Card validatorについて調べてみると、プレビューを表示してから申請内容を登録するとありますが、プレビューを表示すれば、それで申請となるのかツイッターカードとして機能します。

以上、ここまでが苦戦しながらもツイッターカードを使えるように私の手順です。

この手順はあくまでツイッターカードが使えるようになる流れなので、設定内容をもっと細かく確認すれば、理想のデザインで表示することも可能です。

参考にしてみて下さい。