MENU
おすすめの記事
WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!!

2024年4月にリニューアルしました!絞り込み検索やお気に入り機能もあります。ぜひ見ていってください!

さとしん
WordPressとSWELLが好きなブロガー。
ブロックエディターに出会ってWordPressが楽しくなりました。
WordPressのこと、SWELLのこと、ブロックエディターのことを熱く語るブログです。
【2024/9/22】SWELLサイト事例集を更新しました!→【20240922】SWELLサイト集更新!→クリックタップ

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

当ページのリンクには広告が含まれています。
SWELLでTwitterカードを表示する方法|うまく表示されない時の対処方も紹介
  • URLをコピーしました!

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

この記事の内容

  • SWELLでTwitterカードを表示する方法
  • Twitterカードが適切に表示されないときの対処法

Twitterカードの表示方法

  1. SEO SIMPLE PACKプラグインで設定
  2. 管理画面→「SEO PACK」→「OGP設定」

※詳しくは「SWELLでTwitterカードを表示する方法」で解説

Twitterカードが表示されない場合

  1. Card validatorを使用する
  2. キャッシュクリアする

※詳しくは「Twitterカードが適切に表示されないときの対処法」で解説

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

さとしん

簡単にできるのでぜひ設定しておきましょう…!


SWELLの使い方ガイド

SWELLの使い方や設定など、便利な機能をまとめた使い方ガイドを作りました。

目次

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

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

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

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

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

さとしん

SWELLユーザーさんならSEO SIMPLE PACKは既にインストールしている人が多いと思います…!

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

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

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

SEO SIMPLE PACKプラグインは事前にインストール&有効化しておいてください。

参考SEO SIMPLE PACKの導入方法

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

STEP
WordPress管理画面→「SEO PACK」→「OGP設定」をクリック
SWELLのOGP設定-1
STEP
「Twitter」をクリックし、各項目を設定、入力する
SWELLのOGP設定-2
メタタグ

「はい」を選択

X(旧Twitter)アカウント名

@以降のIDを入力

カードタイプを選択

シェアしたときのカードサイズが変わる。
※サイズの違いは後述。

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

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

summary

Twitterカードのsummaryサイズ
Card validatorから引用

summary_large_image

Twitterカードのsummary_large_imageサイズ
Card validatorから引用

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

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

XのOGP仕様変更

2023年10月5日ころに、XのOGP仕様に変更があり、“summary_large_image”でカードを表示する際に、記事のタイトルが表示されなくなりました。※画像参照

“summary”形式で表示する場合には、これまで通り記事のアイキャッチ画像と記事タイトルが表示されます。

個人的には、アイキャッチに記事タイトルを含めるなど工夫をするか、“summary”形式で表示するように設定するか、対策が必要になるかなと感じています。

XのOGP仕様が変更されてタイトルなどが表示されなくなった
仕様変更で記事タイトルは表示されなくなった

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

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

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

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

STEP
WordPress管理画面→「SEO PACK」→「OGP設定」をクリック
SWELLのOGP設定-1
STEP
「基本設定」をクリック、「OGPタグの基本設定」で任意の画像を選択する
SWELLのOGP設定-3

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

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

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

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

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

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

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

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

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

Card validatorの使い方-1

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

Card validatorの使い方-2

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

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

SWELLのコンテンツキャッシュのクリア

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

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

Twitterカードの表示方法

  1. SEO SIMPLE PACKプラグインで設定
  2. 管理画面→「SEO PACK」→「OGP設定」

※詳しくは「SWELLでTwitterカードを表示する方法」で解説

Twitterカードが表示されない場合

  1. Card validatorを使用する
  2. キャッシュクリアする

※詳しくは「Twitterカードが適切に表示されないときの対処法」で解説

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

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

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


はこちらからどうぞ…!

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

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

SWELL全般の関連記事

SWELLでTwitterカードを表示する方法|うまく表示されない時の対処方も紹介

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次