SWELLでTwitterカード(現：X)を表示する方法｜うまく表示されない時の対処方も紹介

SWELLテーマを利用している方向けに、TwitterなどのSNSで投稿をシェアした時にアイキャッチ画像やタイトルをカード形式で表示する方法を紹介します。

2023年10月5日ころから、Ｘ(旧Twitter)の仕様変更により、URLをシェアした際の表示方法が変更されました。その内容は記事内の「XのOGP仕様の変更」に追記しています。

---

SWELLでTwitterカードを表示する方法

Twitterで記事URLを付けてツイートする時に、URLだけでなく以下のようにカード形式で記事をシェアすることができます。

これはTwitterカードと呼ばれます。

WordPressテーマ「SWELL」を使っている方でTwitterカードを表示させたい場合はプラグインを活用します。

おすすめのプラグインは「SEO SIMPLE PACK」です。

これから、SEO SIMPLE PACKでTwitterカードを表示する方法を紹介していきます。

SEO SIMPLE PACKプラグインで設定する

SEO SIMPLE PACKプラグインの機能で、SNSに記事をシェアしたときの表示設定をしていきましょう。

以下の手順で設定していきましょう。

上記手順でTwitterでシェアしたときにTwitterカードが表示されるようになります。

カードタイプについて補足します。カードタイプは以下の2種類から選択できます。

僕は大きく表示される「summary_large_image」が好きですが、お好みで2種類から選択してください。

次は、トップページをシェアしたときに表示される画像の設定を紹介します。

トップページをSNSでシェアするときに表示する画像の設定

トップページをシェアするときに表示される画像や、アイキャッチが設定されていない記事をシェアするときに表示されるデフォルトの画像を設定しておきましょう。

アイキャッチが設定されている記事は、アイキャッチが優先して表示されます。

以下の手順で設定できます。

これでサイト全体のデフォルトのOGP画像が設定できました。

最後に、Twitterカードが適切に表示されない場合の対処方を紹介します。

Twitterカードが適切に表示されないときの対処法

Twitterに投稿をシェアしようとしたときに、適切に表示されないことがあります。

• アイキャッチを設定しているのに画像が表示されない
• アイキャッチを変更したのに変更前のアイキャッチが表示される

Twitterでカードがどのように表示されるか確認できる「Card validator」というツールがあります。

適切に表示されない場合は、Card validatorで表示を確認してみましょう。

また、一度Twitterで記事を投稿したあとにアイキャッチを変更した場合も、「Card validator」でTwitterカードの表示を更新すると変更が反映されます。

Card validatorの使い方は簡単で、「Card URL」に対象記事のURLを入力して「Preview card」をクリックするだけです。

その後、画面の右側にプレビューが表示されるので、正しく表示されるか確認しましょう。

正しく表示されれば、Twitterカードに適切なアイキャッチが表示されているはずです。

上記で適切な画像が表示されない場合は、「SWELL設定」のキャッシュクリアなども試してみてください。

SWELLでツイートにTwitterカードを表示する方法まとめ

SWELLでTwitterカードを表示する方法と、適切に表示されない場合の対処法を紹介しました。

URLだけが表示されるツイートよりもアイキャッチが表示されたTwitterカードの方がクリック率にも良い影響があるかもしれません。

ブロガーさんで、TwitterなどのSNSアカウントを運用されている方は、SNSでシェアするときのためにOGP設定をしておきましょう。

最後まで読んでいただきありがとうございました。

---

SWELL公式サイトはこちらからどうぞ…！

SWELLの使い方や設定に関する記事

SWELLの便利機能を使いこなすためのSWELL使い方ガイド↓↓

SWELL全般の関連記事