【WordPress版】Twitterへブログ記事をツイートしても画像付きで表示されない時の設定方法【Twitterカードを投稿する】

Twitterへブログ記事をツイートしたけど画像付きにならない

ツイッターへ画像付きで配信する方法を知りたい

WordPressを使っているけど簡単にTwitterカードを設定したい

 

こんな悩みに答えます。

 

3分ほどで読めますので、Twitterに力を入れてフォロワーを増やしたいと考えている人は、ぜひどうぞ。

※この記事はブログにWordPressを使用している方向けとなります。

 

Twitter(ツイッター)へ投稿して表示される画像付きツイートを確認

 

Twitterへブログ記事を投稿する場合は、ブログ記事のURLをコピーしてツイートすればよいのですが、これから説明する対応策を講じていないと、ツイートに画像が表示されず、見てもらえない、クリックされないツイートになってしまいます。

 

おそらくあなたは以下のような画像付きでブログ記事をツイート(=Twitterカードと言います)したいと思ってこの記事を読んでいると思います。

 

このようにツイートに画像付きでブログ記事を表示するためには「OGP設定」というものをブログ側に設定しなければなりません。

 

通常ならば、ツイートする記事ごとに以下のようなタグを「headタグ」内に設定するのが原則なのですが、

<meta name="twitter:card" content="カード種類" /> /*①*/
<meta name="twitter:site" content="@ユーザー名" /> /*②*/
<meta property="
og:url" content="記事のURL" /> /*③*/
<meta property="
og:title" content="記事のタイトル" /> /*④*/
<meta property="
og:description" content="記事の要約(ディスクリプション)" /> /*⑤*/
<meta property="
og:image" content="画像のURL" /> /*⑥*/

正直、ツイートする記事毎にそんなことをやってられないので、プラグインを使って設定します。

 

プラグイン「All in One SEO Pack」でTwitterカードを一発設定

 

Twitterカードを画像付きで表示するには、WordPressを利用している方ならお馴染みの「All in One SEO Pack」を使います。大まかな手順は以下の通り。

 

1)プラグイン「All in One SEO Pack」をインストールする

2)「All in One SEO Pack」のソーシャルメディアの設定をする

3)「Card validator」で表示をチェックする

 

この3つの作業を行うと、画像付きのツイート(Twitterカード)ができるようになります。

 

1)プラグイン「All in One SEO Pack」をインストールする

 

まずは、「All in One SEO Pack」をインストール&有効化します。

1)WordPress管理画面の左のメニューから「プラグイン」をクリック

2)「新規追加」をクリック

3)検索窓に「All in One SEO Pack」と入力

4)「All in One SEO Pack」を探して「今すぐインストール」→「有効化」をクリック
※画面では私のブログではすでに「All in One SEO Pack」が入っているためボタンが「今すぐ更新」になってます。

これでインストールは完了です。

 

2)「All in One SEO Pack」のソーシャルメディアの設定をする

 

次に「All in One SEO Pack」のソーシャルメディア設定を行います。

1)WordPress管理画面の左のメニューの上の方の「All in One SEO Pack」をクリック→「ソーシャルメディア」をクリック

 

2)「画像設定」の項目までスクロールして「OG:Imageソースを選択」のところで「Featured Image」を選択
(日本語表示ならアイキャッチ画像)

 

3)「Twitter設定」までスクロールして、上記の通り入力(Twitterサイト、Twitterドメインはあなたのものを入力)

 

4)一番下の「設定を更新」をクリック

 

これで設定は完了です。

 

3)「Card validator」で表示をチェックする

 

最後に実際にTwitterできちんと表示されるかをチェックします。

 

まずは「Card Validator」へアクセスします。

 

左側のCard URLに表示させたい記事のURLを入力→「Preview card」をクリックすると、右側に実際にTwitterでどのように表示されるか、がわかります。

 

その下に「Log」というところがありますので、

  • INFO: Page fetched successfully
  • INFO: card loaded successfully

と表示されていればOKです。

 

Twitterカード設定後の注意点とツイート後に正しく表示させる方法

 

Twitterカードを設定が完了しても、すぐには反映されないことがあります。その時は焦らずしばらく待ってから、表示の確認をしてみてください。

 

記事をいち早くTwitterカードで表示させたい場合や、記事を更新した際に先にツイートした内容を変更したい場合などは、先ほど表示チェックに使った「Card Validator」でURLを入力すると、内容が更新されます。

 

これはカード情報(タイトルや画像)はTwitter全体で保存されているからです。その保存情報へアクセスする窓口が「Card Validator」ということになります。

 

以上となります。素敵なTwitterライフを!

 

Twitterでも情報配信しています。よければフォローをお願いします。