【THE THOR】 twitterカードの設定方法と確認方法(クリック率向上でブログ誘致)

ブログ運営をしていると、Twitterで投稿をシェアしたい!と思う方が多いと思います。

TwitterでURL付きのツイートをした時に記事のサムネイル画像と本文の抜粋が表示されるのですが、

これを「Twitterカード」といいます。

記事にはアイキャッチ画像を設定していても、トップページには設定されていなかったり、

表示方法によっては画像の内容が分かりにくいことがあります。

  • SNSからのブログアクセス数を増やしたい
  • Twitterカードの見た目にもこだわりたい

そう思っている方は、本記事が参考になります。

記事のクリック率は見た目で大きく左右されます。

まだ設定されていない方はぜひ確認してみてください。

それでは本編スタートです( ´∀` )

THE THORでのTwitterカードの設定方法

THE THORでのTwitterカードの設定方法
疑う人
Twitterカードの画像表示が
そんなに大事なんですか?

Twitterに限らずSNSからブログへ誘導したいなら、見た目にはこだわりたいです。

実際に、Twitterのリンクに画像があると、クリック率が1.6%から3%に改善されたというデータもあります。

 
つるさん
2倍も改善されるなら
やる価値があると
思いませんか?

フォロワーさんが多いほどその効果は絶大です。

まだブログを始めて間もない方は設定ができていないと思うので、

今のうちに設定しておきましょう。

Twitterカードは自動で表示される

実際にやってみると分かることですが、

Twitterカードはツイートの編集画面にURLを貼れば自動的に表示されます。

あれ?だったら何もすること
ないってことですか?

正しく記事のアイキャッチ画像と抜粋が設定されていればですけどね。

もしも設定されていなかったら、どのように表示されるのか?

また、見た目が気に入らない場合はどう対処したらいいのか?

順を追って説明していきますね。

もしアイキャッチ画像を設定していなかったら?

もしアイキャッチ画像を設定していなかったら?
正直な感想
…うわ…何ですかコレ?
色々と残念ですね
 
つるさん
これだとブログの雰囲気も
何も伝わらないから
クリックしようとは
思わないですよね!

せっかく読者さんがブログをTwitterでシェアをしてくれても、

何の設定もされていないと、上のように表示されてしまいます。

さすがにこれではクリックもされず、新しい読者がブログに訪れることはありません。

意図的にアイキャッチ画像を設定していない。という方もいるかもですが、

『OGP設定』をしておけばクリック率の低いTwitterカードの問題は解決できます。

なんだか分からない言葉が
出てきました…

言葉の意味は分からなくてOK。

設定はとてもカンタンなので、さっそく手順を見ていきましょう。

OGPの設定手順

OGPとは「Open Graph protocol」の略称です。

Facebook、TwitterなどのSNS上でシェアされた時やシェアされたい時に、
ページのタイトル、URL、概要、画像(サムネイル)を正しく伝えるために
HTMLソースに記述するタグ情報です。
 
つるさん
専門用語は別に
覚えなくてOKです

アイキャッチ画像を設定していない場合は

TwitterカードにOGP(Open Graph Protcol)画像が表示されるというわけです。

The THOR では【外観>カスタマイズ>SNS設定>OGP設定】の手順で
Twitter カードの設定をすることができます。


とてもカンタンなので 、手順通り設定しておきましょう。

表示させたい画像の設定をする

まずは、WordPressの管理画面から「外観」→「カスタマイズ」をクリック。

まずは、WordPressの管理画面から「外観」→「カスタマイズ」をクリック。

次に、「SNS設定」→「OGP設定」→「OGP用画像を登録」へと進みます。

この際に選択する画像のサイズは「縦630px 横1200px」 の画像サイズにしておくと良いです。

なぜなら、このサイズであれば Twitter Facebook のどちらにも対応しているから。

横長の画像にしておくと、キレイに表示させることができます。

Twitterカードの種類を選択する

Twitterカードは2種類のレイアウトから選択することができます。

  • Summaryカード(default)
  • Summary with Large Imageカード

これは先ほど同様【外観>カスタマイズ>SNS設定>OGP設定】へ進んでいきます。

Twitterカードの種類を選択する

と言っても、違いが分からないので選びようがないですよね。

次の項でTwitterカードの見え方について解説していきます。

Twitterカードの見え方の確認方法

Twitterカードの見え方の確認方法

自分のURLを入力することで、Twitterカードの設定がどうなっているか確認ができるサイトがあります。

こちらからアクセスしてください⇒Card Validator

Twitterカードの設定がどうなっているか確認ができるサイト

赤枠にTwitterカードを表示させたいページのURLを入力し、

「プレビューカード」をクリックするだけ。

記事を書いた直後だと表示されない場合があります。
少し時間を置いてから確認してみてください。

Summaryカード(default)で表示した場合

Summaryカード(default)で表示した場合

左にアイキャッチ画像、右に抜粋文がスッキリとした形で表示されます。

ただし、例のように画像の両端が切り取られるため、
アイキャッチ画像に書かれた文字が読めなくなってしまっています。


Summary with Large Imageカードで表示した場合

Summary with Large Imageカードで表示した場合

上にアイキャッチ画像、下に抜粋文が表示されます。

もちろん好みで設定していただいたら良いのですが、

当ブログはアイキャッチ画像を正確に表示させるためこちらの設定を採用しています。

これで、Twitterカードの設定方法、および表示の確認方法は以上です。

細かいことですが、これでクリック率が上がることは間違いありません!

あとはご自身のブログの魅力度を上げるのみですね( ´∀` )

「THE THOR(ザ・トール)」を使えば、僕のようなサイトがプログラミングの知識なしで作れます。

気になった方は公式サイトのリンクを貼っているので、確認してください。

今回はここまで。

この記事が参考になったらシェアしてもらえると嬉しいです( ´∀` )

WordPressテーマ『THE THOR』
圧倒的にSEOに強く・抜群に上位表示されやすい究極のSEO最適化テーマ『THE THOR(ザ・トール)』であなたもインターネットビジネスを本格的に始めてみませんか?