ツイートボタンに画像と要約を追加する方法(ツイッターカード)

公開日: 

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

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

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

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

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

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

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

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

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

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

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

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

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

2.次に「このURLはツイッターカードを使いますよ!」という申請を行います。

この2つだけです!

  • ブログ記事内にツイッターカード用のmetaタグを追加する
  •  ⇒「All in One SEO」というプラグインを使います。

  • ツイッターカードを使う記事のURLを申請する
  •  ⇒記事を公開後に申請が必要となります。

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

ツイッター(Twitter)
photo credit: Tom Raftery via photopin cc

手順を説明します

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

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

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

「All in One SEO」の設定

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

ツイッターカード設定手順1

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

ツイッターカード設定手順2

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

ツイッターカード設定手順3

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

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

ツイッターカード設定手順4

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

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

ツイッターカード設定手順5

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

ツイッターカード設定手順6

URLを申請する

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

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

ツイッターカード設定手順7

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

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

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

参考にしてみて下さい。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • このエントリーをはてなブックマークに追加
馬を見る私
このブログを書いている@tanesho42です。
「FreeLife(フリーライフ)自由な人生」を目指しています。
詳しくはプロフィールを参考に興味あればフォローお願い致します。