【2022年】Twitterカード｜WordPressとの連携方法と表示確認

Twitterカードとは、TwitterとWebサイトを連携させることで、ブログなどのURLを画像付きでTwitterに投稿できる機能です。

↓↓↓こんなヤツ。

本記事ではWordpressをTwitterカードに連携させる方法を紹介しています。

2022年版としたのは、少しずつツイッター側の仕組みが変ってきており、古い記事を参照すると部分的に流れが噛み合わないことがあるためです。
※本記事は2021年投稿ですが2022年6月時点で変更がないことを検証済

↓↓↓こちらの記事ではこんなお悩みを解消！！

Twitterカードの効果と種類

Twitterカードでできることとその効果

［カードの種類］に飛ぶ

URLリンクに好きな写真や画像を付与できる

Twitterカードとはツイート時に「画像付きURL」を添付する機能です。

自分のブログやwebメディアをTwitterで紹介するときに、URL（文字列）ではなく「アイキャッチ画像」＋「ディスクリプション」付きで投稿できます。


↓↓↓こんなの↓↓↓

効果

１．視覚で訴求できる

２．紹介文を入力する必要がなく、プラスαの情報を添えられる

視覚で訴求できる＝目をとめてもらいやすい

次の広告が同時に貼られていたらどちらに興味をそそられますか？

多くの人は例２の広告にひかれるのではないでしょうか？

■文字情報は読まないと伝わらない

人が一瞬で識別できる文字数は9－13文字と言われています。例１では「季節限定」「苺」「ムースケーキ」くらいですね。
たまたま「ケーキ食べたいな」とでも思っていない限り、それ以上読んでもらえない可能性が高いです。

■視覚情報は直接脳を刺激する

一方、絵や写真は見た瞬間に「イチゴ」「ケーキ」などの情報に加え、見た目から「美味しそう」なイメージまで受け取ります。

特に「美味しそう」という情報は食欲を刺激するため、広告の詳細に興味を持たせる強い力を持っています。


Twitterでもまず画像で目を引き、「面白そう」「役立ちそう」などの直感から紹介文に関心を引き、直感の通り興味を持てる内容であればフォローやブログ誘導へと繋がります(≧▽≦)

基本情報の入力を省きプチ情報を追加できる

Twitterカードにはディスクリプションが表示できます。
ツイート本文に一から紹介文を入力する手間が省け、さらに興味を引くための情報などを加えることができます。

Twitterカードの種類

ブログで使用するのは2種類

Twitterカードは4種類あります。

ブログなどwebサイトと連携して使用するのは下表の（１）と（２）の2種類で、あとはアプリ配布用と動画サイト用です。

（１）（２）はどちらが良いということはありません。最初は自分の好みで設定し、実際の反応を検証して設定を変えていくと良いと思います。

種類	表示例
（１） Summary Card ブログ（webサイト）用
（２） Summary Card with Large Image ブログ（webサイト）用
（３） App Card アプリ配布用
（４） Player Card 動画埋め込み用

★★★　ご参考　★★★
Webサイト用Twitterカードの適正な画像サイズ（縦横比とpx）についてはこちらの記事（↓）で解説しています。

Twitterカードの設定方法の種類と対応プラグイン

WordPress、HTMLの初心者はプラグインを使おう

設定はHTMLまたはプラグイン

Twitterカードの設定はHTMLでタグ付けをする方法とプラグインを使う方法があります。

本記事ではプラグインを利用したTwitterカードの設定方法を紹介します。

対応プラグイン

以下がTwitterカード設定対応プラグインです。
※他にもあるかも知れませんが見当たらなかったので気になる人は検索してみてください。

No	名称	用途
１	SEO SIMPLE PACK	SEO設定・管理プラグイン
２	All in One SEO （旧名称：All in One SEO Pack）	SEO設定・管理プラグイン
３	Twitter Cards Meta	Twitterカード専用プラグイン

初心者にプラグインを勧める理由

［WordpressとTwitterカードの連携］にスキップ

１．　HTML初心者（知識ゼロの人）がHTMLを触るのはハードルが高い

２．　設定変更も簡単なので用途に合わせて気軽に設定を変更できる

３．　既にインストール済のプラグインが対応している場合がある

WordPress・HTML超初心者にはハードルが高い

私自身HTMLを勉強したこともなく「初心者向け」の記事をいくつか参照してHTMLで設定しようと試みましたが、

「で？　そもそもヘッダータグってどこから触れるの？　(# ﾟДﾟ)」と撃沈。

知識０で挑戦した私が悪いのかも知れませんが、HTMLは苦手という人は素直にプラグインに頼りましょう！！

プラグインなら気軽に設定変更できる

記事や企画に合わせてカードの種類を変えたり外したりするには都度設定変更が必要です。

毎度HTMLを書き換えるより、クリック操作で変更できるプラグインの方がミスもなく効率良く対応できますね。

インストール済のプラグインが対応している場合も

プラグインを敬遠する理由の多くは「余計なプラグインを増やしてサイトを重くしたくない」というものです。

既にインストール済のプラグインがTwitterカードに対応していれば使わない理由はありません。

また、SNSからの流入は収益を左右することもありますので決して余計なプラグインではないと思います。

SEO SIMPLE PACKによるWordpressとTwitterカードの連携

設定環境・使用プラグイン

本記事で解説する設定環境は以下の通りです。

・ブログ環境：Wordpress
・使用テーマ：SWELL
・プラグイン：SEO SIMPLE PACK（SWELLの推奨SEOプラグインであり製作者が同じ）

プラグインのインストール

［カードの設定手順］へスキップ
または
［カードの表示確認］へスキップ

SEO SIMPLE PACKによるTwitterカードの設定手順

OGP設定

ここまでの設定で、TwitterカードとWordpressの連携は完了です(≧▽≦)

Twitterへの申請・承認が必要という記事を見かけますが、現在はこの工程はありません。

次の項目で紹介するCard Validatorへの入力作業を現在の申請と捉えていることもありますが、しなくてもTwitterカードは表示されます。ではCard Validatorとは何なのか。詳細は次の項目でご確認ください。

Twitterカードの表示確認

いよいよTwitterカードの投稿です！

ですが、初めての投稿や設定を変更したときは

と不安ですよね。
これらの不安を解消するには、ツイート前にCard Validatorで表示確認をしてみましょう。

Card Validatorの機能と表示確認

Card Validatorとは

Twitterカードの設定が適正であるかを判定し、不適正な場合はエラーを返してくれる機能です。
キャッシュを更新する役割もあるため表示不具合などの解消にも使います。

＜＜　どんな時に使う？　＞＞

・ツイート前に実際の表示を確認したいとき

・OGP設定をした直後にTwitterカードを投稿したいとき
（反映までに時間を要しうまく表示されないことがあるため）

・OGP設定変更後カードに変更が反映しないとき
（キャッシュに前の設定が残っていることが原因の場合があるため）

Card Validatorの使い方

１．Card Validatorを開く

↓↓↓クリックしてCard Validatorを開きます。

　Card Validator

２．Twitterカードで紹介したい記事のURLを入力する

３．右側に表示されるTwitterカードを確認する

下段のLogを確認し、INFOにエラーがでているときはその項目の設定を確認・修正してください。

エラーが無く、表示されたカードが設定通りであればOKです！

★★★　ご参考　★★★
画像が見切れてる！表示文章を変更したい！という時は以下の記事をご参照ください。

Twitterカードの投稿方法と注意点

カードの投稿方法は、通常のツイート作成画面で記事のURLを入力するだけ♪

注意点
Twitterカードと通常の画像添付は同時には利用できません。
画像を追加すると、画像の下にURL（文字列）が貼りついただけの状態になります。

まとめ

●Twitterカードとは、WordpressとTwitterを連携しURLを画像付きでツイートする機能

●画像の視覚効果で、タイムライン上で目を引きやすく読んでもらうのに有効な手段

●設定はプラグインの利用が簡単便利

●Card Validatorを使って表示確認やキャッシュの更新ができる

●Twitterカードと通常の画像添付は同時利用できないので注意！

お疲れ様でした💕　ヾ(o´∀｀o)ﾉ