【Word Press】Twitterにサムネイル画像付きツイートをする方法(Twitterカード)

2018年4月11日2021年2月12日SNS,WordPress,便利なプラグイン

• 2019年1月17日
  書き換え及び追記しました。

前回リンクをサムネイル画像付きにできるプラグインを紹介しました。

今日はTwitterにサムネイル画像付き(Twitterカード)でツイートをする方法(Twitterカード)を紹介します。

私はブログの更新情報をTwitterでツイートしています。
ブログを引越しする前からしているのですが…無料ブログでは何もしなくても、サムネイル画像付きでツイートできていたので、「Word Pressで作ったブログでも出来るだろう」と思っていまいた。
ですが、実際WordPressで書いた記事URLをツイートしてみたら…URLだけの表示でした。

Twitterでの記事をツイートするとき、文字だけより画像がついていた方が目を引きますよね！？

サムネイル画像付き(Twitterカード)に対応させる方法はいくつかあるようですが、私のような初心者でも簡単にできたプラグインを使って表示させる方法を紹介します。

Twitterカードが表示されるか確認する

使うテーマによってはTwitterカードに対応しているものもあります。
なので、まずはTwitterカードが表示されるかを確認しましょう。

確認にはTwitterのアカウントが必要です。

Card Validatorで確認する

Card URLに表示したい記事のURLを入力して［Preview Card］をクリックしてください。

横にCard Previewが表示されたら対応されています。
「Unable to Card preview」と表示された場合は対応されていないことになります。

Twitterカードが表示されない場合は、対応しているテーマに変える、プラグインを使うなどすれば表示できるようになります。

ではここからはTwitterカードを表示させる方法を少しご紹介します。

プラグインを使う

Twitterカードを表示させる方法はいくつかありますが、プラグインを使うのが一番楽です。

ではTwitterカードを表示させるプラグインを2つご紹介します。

プラグイン『Twitter』を使う

このプラグインはTwitter公式のプラグインです。
Twitterカードを表示させる以外にも、Twitterに関する機能があります。

今回はTwitterカードを表示させるためのインストール方法と基本的な設定を解説します。

プラグイン『Twitter』をインストール

Word Pressのァんり画面から［プラグイン］→［新規追加］→プラグインTwitterを検索。

インストールして有効化する。

設定

① Twitterウィジェットの設定
    Twitterウィジェットを使わなければ設定の必要はありません。
② Twitterアカウントの設定
   Twitterのアカウントを設定してください。
③ ツイートボタンの設定
   固定ページ／投稿記事にツイートボタンを入れたい場合は設定

サムネイル画像付きのツイートだけなら②のTwitterアカウントの設定だけでOKです。
設定が完了したら［保存］してください。

 
設定の保存をしたら再度Card Validator │ で確認してください。

JM Twitter Cards

こちらはTwitterカードを表示させるためのプラグインです。

このJM Twitter CardsではTwitterカードの画像を大きくすることもできます。

JM Twitter Cardspのインストール

WordPress管理画面から［プラグイン］［新規追加］『JM Twitter Cards』を検索［今すぐインストール］［有効化］してください。

設定

WordPress管理画面から［設定］［JM Twitter Cards］

Twitterアカウント、Twitterカードに表示するサイト名またはURL、Twitterカードタイプの設定をしてください。
※その他はそのままでOKです。

『Summary below Large Image』にするとTwitterカードの画像が大きく表示されます。

設定したら［保存してください。］

プラグイン無しで表示させる方法

プラグインを使わずにTwitterカードを表示させる方法もあります。

ただしこの方法はテーマファイルを編集するのでファイルのバックアップをしておく必要がありますし、初心者にはちょっと怖いかもしれません。

 
他にもプラグインを使わない方法を解説しているサイトがありますので参考にしてみてください。

Twitterカードに対応しているテーマを使う

Twitterカードに対応しているテーマを使えばプラグイン無しですぐに使うことができて簡単です。

私が知っているTwitterカードに対応している無料テーマは以下の三つです。

 
『STINGER PLUS2』は有料テーマ「Stinger PRO2」の無料版です。使える機能に一部制限があります。

『Luxeritas(ルクセリタス)』は、現在当ブログで使用しているテーマです。表示が早く、高機能な無料テーマです。

『Cocoon(コクーン)』は、私は使ったことはありませんが、シンプルで機能もいい無料テーマです。

各テーマTwitterカードの大きい画像(Summary Graph Large Image)に対応しています。

設定(導入)したら確認を！

各方法で設定(導入)したら再度Card ValidatorでTwitterカードが表示されるか確認してください。

最後に

Twitterでブログの更新情報などをお知らせしている人も多いと思います。

ブログの更新情報も文字だけではインパクトに欠けますよね。
画像も小さいものより大きいもの方がフォロワーさんの目をひきます。

Twitterでブログのお知らせをする場合はぜひ使ってみてください。