Twitterカード表示方法
ブログ運営していたら検索エンジンだけではなくTwitterからユーザーを流入させたいという願いもあることでしょう。

しかし、Twitterに記事へのリンクを貼ってもURLだけが虚しく表示されてスルーされてしまった経験はありませんか?

Twitterカード表示方法
しょ・・・しょぼい・・・笑

それ対して大手のニュースサイトは大きな画像付きのリンクが表示されていて、記事へのアピール力が全然違いますよね?

Twitter表示方法
この画像付きのリンクは『Twitterカード』と呼ばれるモノであり、実は簡単に設定することが可能なので本記事を参考にしていただきアピール力のあるツイートをしていきましょう!

大手ニュースサイトのような大きな画像のTwitterカード表示方法


Twitterカードの表示設定をするのにプラグインの『All in One SEO Pack』を使用します。まだインストールしていない場合は別の記事を参考にインストールを完了させましょう。

All in One SEO Packのインストール方法とオススメ設定について

機能管理→ソーシャルメディアをアクティブに


All in One SEO Packの機能管理画面に移動し、ソーシャルメディアをアクティブにします。
※もしかたしたら英語表記の人もいるかもしれません。(僕のはなぜか日本語表記なのです)

Twitterカード表示方法
↓↓↓
Twitterカード表示方法

「ソーシャルメディア」ボタン出現


All in one SEO packのソーシャルメディアをアクティブにすると、メニューに「ソーシャルメディア」が出現しますのでクリックしてください。

Twitterカード表示方法
すると、ソーシャルメディア関連の設定画面になるのですが、今回はTwitterカードのための設定だけをしていきますね。

画像設定


画像設定は以下のように設定をしましょう。

Twitterカード表示方法

  • OG:Image
  • ここは「アイキャッチ画像」を選択します。

  • 画像が見つからない場合はデフォルトを使用
  • ここはチェックを入れておきましょう。

  • デフォルトの OG:Image
  • ここは必須ではありませんが、アイキャッチ画像を設定していない記事のリンクをTwitterに貼った時に表示される画像を選択します。

これで画像設定は完了です。

Twitter設定


お次は少し下にスクロールしてTwitter設定をしていきます。

Twitterカード表示方法

  • デフォルト Twitter カード
  • ここは大きな画像で表示させたいので『要約の大きい画像』を選択(英語表記だと”Summary Large Image”)

  • Twitter サイト
  • 自分のアカウントを入力します。僕の場合は「@yuukivp」(任意)

  • Twitter 投稿者を表示
  • ここはチェックを入れておきましょう。

  • Twitter ドメイン
  • 自分のTwitterアカウントのURLで、https://twitter.com/◯◯の◯◯部分を入力。僕の場合は「yuuki」(任意)

はい!

ここまで完了したら一番下までスクロールして『設定を更新』をクリックしましょう。(忘れないように)

Twitterカードの表示確認方法


設定が無事に完了したかを確認する場合は、Card validatorに移動します。

カードURLの入力欄にあなたの記事URLを貼り付けてください。そして「プレビューカード」ボタンを押します。

Twitterカード表示方法

すると、右のプレビュー表示画面にTwitterカードが映し出されます。

Twitterカード表示方法
こんなかんじに表示されることがこれで分かるわけですね!

実際にツイートしてみよう


とは言え、本当にTwitterでそうなるの??

と、疑い半分でテストツイートをしてみたところ。


Twitterカード表示方法
↓↓↓

Twitterカード表示方法
きましたね!

このようにツイート記入欄に記事のURLを貼るだけでTwitterカードが出現するようになります。

あとがき


今回は大手ニュースサイトのような大きな画像でTwitterカードを表示させる方法について説明しました。

ALL in one SEO packを使用すると非常に簡単なので是非導入してみてくださいね!