【有料テーマSWELL】Twitterカードが表示されないときはプラグインのOGP設定を確認

無料テーマCocoonから有料テーマのSWELLに移行して1ヵ月が経ちました。

移行していく上で私がつまずいたポイントの解決方法をこれからSWELLを導入する方のために記録しています。

Twitterカードとは？

TwitterでURL付きのツイートを投稿すると、↓画像のようなアイキャッチ画像、タイトル、リード文が一体となったTwitterカードが表示されます。

Cocoonを使っていた時は問題なく表示されていたのですが、SWELLにしてから表示されずにURLだけ投稿される状態となってしまいました。

調べたところ、とても簡単な方法で設定できたのでご紹介します。

SWELLでTwitterカードが表示されない原因

原因はとてもシンプルで、SWELLでTwitterカードの設定をしていないからでした。

ただ「Twitterカード SWELL 設定」で検索しても、なかなか明確な答えが見つからず戸惑いました。

解決方法はプラグイン「SEO SIMPLE PACK」をインストールしてTwiiter項目を設定することです。

「SEO SIMPLE PACK」はSWELLの開発者である了さんが作成・提供しているプラグインです。これをインストールしてTwitterに関係する部分を設定すれば解決。非常に簡単で使いやすいプラグインです。

「SEO SIMPLE PACK」のインストール方法

インストール方法は通常のプラグインと同じです。

プラグインの新規追加画面で「SEO SIMPLE PACK」と検索すると出てくるので、インストール後に有効化しましょう。

「SEO SIMPLE PACK」 の設定方法

インストールが完了したら、SEO PACK＞OGP設定＞Twitterと進みましょう。

Twitterカードはこの画面の項目を設定するだけで完了します。

各設定項目は下記のとおりです。

• Twitter用のメタタグを使用する：はい
• Twitterアカウント名：アカウント名を入力（@は不要）
• カードタイプ：summary_large_image

Card validatorで設定の結果を確認

ここまでの設定を終えたら、Twitterカードが無事に表示ができるようになったか「Card validator」というサイトで確認しましょう。

英語だけのサイトなので戸惑うかもしれませんが、Card validatorはTwitter公式のサイトなのでご安心ください。

Card URLにブログ記事のURLをコピペして「Preview card」をクリックしましょう。

まとめ

今回はSWELLのTwitterカードについて解説しました。

了さんが提供しているプラグインのおかげでとても簡単に設定できましたね。

これからもSWELLを使っていく上で気になったポイントを解説していきたいと思います。