SWELLの始め方ガイド|これからSWELLを使い始める方はこちら→SWELLの始め方ガイド→クリックタップ

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

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カードが適切に表示されないときの対処法」で解説

さとしん

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


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プラグインは事前にインストール&有効化しておいてください。

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

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

「はい」を選択

Twitterアカウント名

@以降のIDを入力

カードタイプを選択

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

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

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

summary

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

summary_large_image

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

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

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

トップページを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をコピーしました!
目次