[2021年版] WordPress/twitter カードの設定方法について

副業・ブログ

[2021年版] WordPress/Twitterカードの設定方法について

こんにちは!まったりです。

Twitterを見ていると、記事が画像つきで表示されているツイートがあります。

せっかく自分でブログ記事を書いたんだから目立つようにしたい!

と思う方も多いと思います。

今回は、そんな方に向けて

「ツイートに画像や説明文付きのURLを載せる方法」

について、私が実際に行った方法を詳しく紹介します。

について、実際の経験をもとに紹介します。

本記事で学べること
  • Twitterカードとは
  • WordPressにおけるTwitterカードの設定方法
記事の執筆者

理系大学院生ブロガー

まったりさんブログ運営中

情報・ネットワーク関係の研究中

本ブログではTwitterのタイムラインをブログに表示させる方法を投稿しています。

▼Twitterのタイムラインをブログに表示させる方法はこちら▼

スポンサーリンク

1. Twitterカードとは

Twitterカードとは、ツイートに貼り付けられた記事へのリンクを魅力的に見せる機能のことです。

具体的にはツイートの中にブログ記事の

  • 「アイキャッチ画像」
  • 「タイトル」
  • 「要訳文」

などを表示することができるようになる機能のことです。

Twitterカードの使用例
まったり
まったり

WordPressでは、Twitterカードの設定をプラグインを用いて簡単に行うことができます。

以下では、プラグイン

『All in One SEO Pack』

を用いたTwitterカードの設定方法を、順を追ってを説明しています。

まったり
まったり

この手順通りに行えば必ず設定できるので、是非試してみてください。

スポンサーリンク

2. Twitterカードの設定方法

ここでは順番に

  1. All in One SEO Packのインストール方法
  2. All in One SEO Packの設定方法
  3. Twitterカードの確認方法

について説明していきます。

1) プラグインのインストール方法

プラグインのインストールはWordPressのサイドバーの「プラグイン項目」から行います。

サイドバーのプラグイン項目内の「新規追加」から追加するプラグインを検索・インストールします。

今回使用するプラグインは

『All in One SEO Pack』

です。

プラグインを検索する場合は、以下の画像の場所にキーワードを入力することで可能です。

プラグイン検索画面



検索すると下の画像のように関連プラグインが出てくるので、その中の

『All in One SEO Pack』

をインストールしてください。

プラグインインストール画面

プラグインのインストールが終了したら、「All in One SEO Pack」を有効化してください。

まったり
まったり

有効化ができていれば、サイドバーに以下のように「All in One SEO」の項目が追加されています。

プラグイン有効化成功時のサイドバー

以上で、Twitterカードの設定に必要なプラグイン「All in One SEO Pack」の事前準備が完了です。

次の項目では「All in One SEO Pack」の設定について説明します。

2) All in One SEO Pack の設定方法

「All in One SEO Pack」のインストールと有効化ができたら、次に

「All in One SEO Pack」内の設定

を行います。

サイドバーの「All in One SEO」の項目内の「機能管理」をクリックして以下の画像のように、ソーシャルメディアの項目を「Active化」します。

まったり
まったり

Active化できると、以下の画像のように項目のイラストに色がつきます。

All in One SEO/機能管理画面

ソーシャルメディアの項目がActiveになると、サイドバーの「All in One SEO」 内に

『ソーシャルメディア』

の項目が新しく追加されています。

次はこの「ソーシャルメディア」を選択し詳細設定を行います。

サイドバーに「ソーシャルメディア」項目が追加された状態

ここからは、ソーシャルメディア項目内の「Twitter設定」を行います。

下の画像の様に、Twitter設定の項目があるのでそちらを設定していきます。

All in One SEO/ソーシャルメディア画面

(1) デフォルトTwitterカード

デフォルトTwitterカードでは

  • 「要約」
  • 「要約の大きい画像」

の2種類が選択できます。

簡単に言えば、アイキャッチ画像のサイズが小さいか大きいかの違いです。

まったり
まったり

本記事に載せている Twitterカードの例は、サイズが大きい「要約の大きい画像」になります。

要約の大きい画像を選択した方がアイキャッチ画像のインパクトがあります。

(2) Twitter サイト

この項目には Twitterアカウントの

『Twitter ID』

を入力します。

まったり
まったり

Twitter IDとは「@○○○」の部分のことです。

(3) Twitter ドメイン

この項目には文字通り、自分の

『Twitter アカウントのドメイン』

を入力します。

ドメイン名には 「https://」の部分は必要ありません。

まったり
まったり

「Twitter ID (@なし).com」で問題ありません。

最後に、以下の図の様に一番下にある「設定を更新」をクリックして終了です。

以上で「All in One SEO Pack」の設定は完了です。

次からはTwitter側の設定を行います。

3) Twitterカードの確認方法

最後に、Twitterカードの設定がしっかりできているか確認する方法を説明します。

Twitterカードの表示状態を確認するためには

Card validator

を使用します。

Card validator では以下の様な画面になっており、Twitterカードを表示したい記事のURLを入力することでツイートにTwitterカードが表示可能か確認することができます。

Card validator画面

URLを入力した後に

「Preview Card」

をクリックすることで、Twitterカードの利用申請を行ったことになります。

「Preview Card」をクリックすると、画面右下にログが表示されます。

このログに

『INFO: Card loaded successfully』

が出力されていたら問題なくTwitterカードが登録されたことになります。

Card validator/ログ出力画面

後はツイートする際に、記事のURLを記載すれば自動的にTwitterカードが表示されます。

アイキャッチ画像に関して、Card validatorにしっかり表示されていない場合はTwitterのツイート画面でも表示されない可能性があります。

まったり
まったり

自分が書いた記事をTwitterカードにして早くツイートしたい気持ちも分かりますが、必ずCard validatorにアイキャッチ画像が表示されているか確認することをお勧めします。

Card validator/Twitterカード表示画面
スポンサーリンク

4. 最後に

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

今回は Twitter カードの設定方法について解説しました。

Twitterカードを登録することでSNSからのアクセス数が増える可能性があるので是非設定して欲しいところです。

また、プラグインを用いて簡単に設定できるため、やって損はないかと思います。

まったり
まったり

最後までご覧いただきありがとうございました!

にほんブログ村 にほんブログ村へ
にほんブログ村

コメント

タイトルとURLをコピーしました