こんにちは、のた（@Nor21011）です。
ブログ記事のURLをXに投稿したのに、アイキャッチ画像が表示されず、URLの文字列だけがぽつんと置かれた投稿になっていませんか。
私はまさにこの状態で、URLだけのポストを何本も続けていました。そしてようやく、原因が判明して解決できました。
結論から言うと、原因はSWELLの仕様によるものでした。SWELLはテーマ単体ではOGPタグ（SNSカードの元になる情報）を出力しません。無料プラグイン「SEO SIMPLE PACK」を導入して設定したら、表示されるようになりました。
ただ、私はこの原因に辿り着くまで、かなり遠回りをしました。この記事では、私の迷走の記録と、すぐできる解決手順をまとめます。
※この記事は「Xでカードが表示されない」話です。ブログの記事ページ上でアイキャッチが表示されない場合は原因が別なので、この記事では扱いません。
※また、この記事が対象にするのは「OGPを出力するプラグインをまだ入れていない・設定していない」ケースです。SEO SIMPLE PACKを設定済みなのに表示されない場合は、アイキャッチの設定やX側のキャッシュなど、別の確認が必要です。
疑ったのはXだった。テーマは1ミリも疑わなかった
私は以前、Cocoonというテーマでブログを運営していました。当時はURLをX（当時はTwitter）に貼るだけで、何もしなくてもアイキャッチ付きのカードが表示されていました。あとから調べて分かったことですが、CocoonはOGPタグをテーマ標準で出力する仕様です。つまり私は「アイキャッチは勝手に出るもの」と思い込んだまま、その仕組みを一度も意識したことがありませんでした。
だから今回カードが出なかったとき、真っ先に疑ったのはX側でした。「Premiumじゃないから出ないのかなー」と軽く考えていました。
ところが、いざPremiumにアップグレードしても出ません。さらに、noteの更新を発信している方の投稿には、普通にアイキャッチのカードが表示されています。ここで初めて「あれ？ Xの問題じゃないのか」と気づきました。
気づくまでに投稿した記事は18本。18記事分、URLだけの投稿を続けていたことになります。URLだけのリンクは正直怪しくて、私がフォロワーの立場でもまず踏みません。アイキャッチが出るだけで「ブログの更新なんだな」と伝わるのに、それができていない。読んでもらう以前の問題でした。
では、何が原因なのか。私はAIに聞くことにしました。
原因：SWELLはOGPタグを出力しない仕様だった
私はClaudeに記事のURLを渡して、「このページに何が設定されているか確認して」と頼みました。私が使っていた環境のClaudeはURLの内容を直接確認できるので、この調査をそのまま任せられました。返ってきた診断結果がこちらです。
Xカードの表示に使われるog:image、og:title、twitter:cardといったタグが、ページから見つかりませんでした。
ここで少しだけ用語の説明をします。Xは、URLが投稿されるとそのページの「OGPタグ」という情報を読み取って、画像やタイトル付きのカードを組み立てます。逆に言えば、OGPタグがなければ、アイキャッチをどれだけ正しく設定していてもカードは作られません。
「アイキャッチはちゃんと設定している。他に設定があるの？」と聞き返したところで、原因が確定しました。
SWELLは、テーマ標準ではOGPタグを出力しない仕様でした。
すぐに直したい方は、次の「解決手順」まで飛ばしてもらって大丈夫です。
これはバグでも欠陥でもなく、意図的な設計です。SEOやOGPの機能はテーマに持たせず、専用プラグインに分離する。既存のSEOプラグインとの競合を避け、テーマ本体を軽く保つための設計思想です。だから対処も、SWELLと同じ開発元が用意している無料プラグインを導入して設定すれば完結します。
ちなみに、本格的に「おかしい」と気づいてから解決までは1時間ほどでした。同じ症状で悩んでいる方は、AIに「このURLのOGPタグを確認して」と頼むと、自分のサイトの状態をすぐ診断できます。
原因が分かれば、解決は簡単です。
解決手順：SEO SIMPLE PACKを入れて設定する
手順は3ステップ
SEO SIMPLE PACKは、SWELLと同じ開発元（LOOS）が提供している無料プラグインです。
- 「プラグイン」→「新規追加」で「SEO SIMPLE PACK」を検索し、インストールして有効化する
- 管理画面に追加された「SEO PACK」→「OGP設定」→「Twitter」タブを開く。「Twitter用のメタタグを使用する」を「はい」にし、Twitterアカウント名（@は不要）を入力、カードタイプを選ぶ
- 「設定を保存する」をクリックする
設定作業はこれだけです。数分で終わります。
なお私は、このあと念のため「SWELL設定」→「リセット」タブからブログカードのキャッシュもクリアしました。ただ、これがXカードの表示に必須だったかは確認できていません。
カードタイプは「summary_large_image」を選んでください
実は私は最初、カードタイプを「summary」にしていました。summaryを選ぶと、小さい正方形のサムネイル付きカードになります。
「summary_large_image」に変更すると、タイムラインの幅いっぱいにアイキャッチが大きく表示されます。
並べると差は一目瞭然です。ブログのアイキャッチは横長で作ることが多いので、summaryでは正方形に切り抜かれて見切れてしまいます。特別な理由がなければ、summary_large_imageを選んでください。
デフォルトOGP画像も設定しておくと安心
「OGP設定」の基本設定タブに、”og:image”の画像という項目があります。実はここは、通常の記事カードを表示するための必須設定ではありません。通常の記事ページでは、設定したアイキャッチがOGP画像として使われます。実際、私の環境ではここが未設定のままでも記事カードは表示されました。
ではいつ使われるのかというと、アイキャッチを持たないページがシェアされたときです。代表例はトップページです。誰かがブログのトップページのURLを貼ってくれたとき、ここが未設定だと画像なしのカードになってしまいます。
設定するなら、推奨サイズは1200×630px。ブログ名やロゴが入っていて、パッと見で「どのブログか」分かる画像がおすすめです。私も記事のアイキャッチと同じ世界観で1枚作って設定しました。
注意：過去の投稿はすぐには直らない
設定を終えてすぐ、既存のX投稿を見に行くと、カードが出ないままのことがあります。ここで「設定に失敗した」と判断するのは早いです。
Xには、一度シェアされたURLのカード情報がしばらく残ります。設定を修正しても、投稿済みのURLにはすぐ反映されないことがあります。
以前はCard Validatorというツールでプレビューやキャッシュ更新ができましたが、プレビュー機能は2022年に廃止されており、現在は確実な手段とは言えません。
確認するときは、まず新しい投稿の作成画面に記事URLを貼ってみてください。私の場合は、URLの末尾に「?v=2」を付けると別のURLとして読み込まれ、最新のカードが表示されました。表示を確認したあとは、投稿せずに画面を閉じています。
まとめ：原因を知っていれば、解決は簡単
- Xにアイキャッチが出ないのは、あなたのミスとは限らない。SWELLがOGPタグを出力しない仕様（＝プラグイン未設定）が原因かもしれない
- 解決はSEO SIMPLE PACKを入れてTwitter設定をするだけ。カードタイプはsummary_large_image
- 過去の投稿はキャッシュの関係ですぐには直らない。確認は新しい投稿で
私はこの原因に気づかないまま、18記事分、URLだけの投稿を続けていました。この記事が、同じところで困っている方や、これからSWELLで記事を書いていく方のヒントになればうれしいです。
WordPressブログをSWELLで始めた経緯や構成は、こちらの記事にまとめています。
SEO SIMPLE PACKの設定で解決
原因を知っていれば、解決は数分で終わります。
