ジョジョの奇妙な冒険のスタンド一覧、キングダムといった漫画の名言集をまとめています。 また仕事や生活で役に立つ情報も発信しています。
Twitter Cardについて

Twitterカードの設定と表示されない時の対応

Twitter Cardについて

どうもmasakiです。

今回はTHE THORのテーマでブログをやっていて、Twitterをやっている人に向けての記事です。

ブログを更新したらTwitterで「ブログを更新しました」なんて拡散することありますよね。

Twitterにリンクを貼ると自動的に画像付きのリンクが追加されます。

これがTwitterカードと言われるものです。

Twitterカードを設定することで、クリック率をあげることができます。

通常のURLだけのリンクよりも、画像付きだと記事の内容がより伝わりますよね。

THE THORでどのように設定するか見ていきましょう。

Twitterカードの設定

「外観」 > 「カスタマイズ」 > 「SNS設定[THE]」 > 「OGP設定」で設定します。

OGPとは

「Open Graph Protocol」の略。
ページを共有するときに、そのページのタイトル、URL、概要、画像を表示させる仕組みのこと。

ここの下部に「Twitter Cardの種類を選択」という項目があります。

こちらで2種類の表示方法を選択できます。

「Summaryカード」と「Summary with Large Imageカード」です。

実際に比較してみましょう。

Summaryカード
Twitter Cardの設定
Twitter Cardの表示
横長にリンクが表示されます。
アイキャッチ画像は正方形に近い形ですね。
Summary with Large Imageカード
Twitter Cardの設定
Twitter Cardの表示
大きいリンクが表示されます。
アイキャッチ画像が綺麗に表示されていますね。

このような表示の違いがあります。

どちらが良いのかは皆さんのブログの性質に合わせて選ぶと良いでしょう。

僕の場合は、アイキャッチを綺麗に見せたいので、「Summary with Large Imageカード」に設定しています。

Card Validatorで設定のチェックをしよう

Twitterの公式サービスで「Card Validator」があります。

ここでできることは、Twitterカードが「うまく設定できているか」を確認することができます。

Card ValidatorでTwitter Cardの確認をする

使い方は以下の通りです。

Card Validatorの使い方
画像:Card Validator公式サイトより

「Card URL」に記事のURLを入力して、「Preview card」をクリックしましょう。

すると現在の設定でTwitterにどう反映されるのかがプレビューとして表示されます。

Card Validatorの使い方
画像:Card Validator公式サイトより

ここでしっかりと確認して確実に設定通りの表示ができるようにしましょう。

Twitterカードの反映がおかしい場合

Twitterカードがうまく表示されないことありませんか。

記事のアイキャッチを変更したのに、Twitterカードでは反映されていない。

これはあるあるネタだと思っています。

先程の「Card Validator」で確認したらうまく反映されているのに、なぜTwitterでは反映されないんだろう。

本当にあるあるネタです。

これの解決方法はキャッシュを削除することです。

URLの情報や、アイキャッチ画像の情報はTwitterで保存されています。

Twitterのキャッシュを削除すれば保存情報が削除されるので、新しい情報が反映されます。

Twitterカードがうまく表示されないときは、Twitterのキャッシュを削除してみましょう。

さいごに

いかがでしたでしょうか。

Twitterカードの設定をしておくことで、ブログへの集客率を上げることができます。

視覚的に興味を持って、クリックしてもらえるように、設定をしてみましょう。

それではこのへんで。

Twitter Cardについて
最新情報をチェックしよう!