こんにちは、阿久梨絵です!
WordPress でブログ記事をX(Twitter)にシェアしたとき、アイキャッチ画像が表示されないことがあります。これは特定のテーマ(Astraなど)に限らず、OGP設定や画像サイズ、X(Twitter)の仕様によるものです。今回はその原因と対処法を解説します。
Twitterカードに画像が出ない主な理由
1. OGP設定が不完全
・X(Twitter)はtwitter:imageタグを読み取って画像を表示します。
・WordPressテーマによってはOGPタグを自動出力しないため、SEOプラグインで補完が必要です。
・代表的なプラグイン:All in One SEO, Yoast SEO, Rank Math
2. 画像サイズが小さい
・Twitterカード(特に「Summary with Large Image」)では、最低300×300px以上が必要。
・実際には400×400px以上で安定表示されるケースが多いです。
3. キャッシュの問題
・X(Twitter)はURLごとにカード情報をキャッシュします。
・アイキャッチ画像を変更しても、古い情報が表示されることがある。
・対処法:X(Twitter)の[Card Validator]でキャッシュを更新
4. 画像のトリミング
・X(Twitter)は画像を中央トリミングするため、端に重要情報があると切れてしまう。
・正方形に近い画像、中心に要素を配置するのが安全。
よくある「うまくいかない」特徴
| 状況 | 原因 | 対処法 |
|---|---|---|
| アイキャッチ画像が表示されない | OGPタグがない / サイズ不足 | SEOプラグインでOGP設定+画像サイズ確認 |
| 画像を変更したのに反映されない | Twitterのキャッシュ | Card Validatorで再読み込み |
| 一部の記事だけ表示されない | 投稿URLが未登録 / 画像の形式 | 投稿URLをValidatorに登録、JPEG/PNG推奨 |
| 表示されるが画像が切れている | トリミング位置の問題 | 正方形画像+中心配置を意識 |
Astraテーマ利用者向け補足
AstraはOGPタグを自動出力しないため、SEOプラグインの導入がほぼ必須
OGP(Open Graph Protocol)タグは、SNSなどでページがシェアされた際に、タイトル・説明・画像などの情報を正しく表示するために必要です。Astraテーマは軽量設計を重視しているため、OGPタグを標準では出力しません。そのため、Yoast SEOやAll in One SEO PackなどのSEOプラグインを導入して、OGPタグを補完するのが一般的です。これにより、SNSでの視認性やクリック率の向上が期待できます。
アイキャッチ画像のサイズと配置に注意すれば、Astraでも問題なく表示可能
Astraはデザインの自由度が高い一方で、テーマ側でアイキャッチ画像の表示スタイルが固定されていない場合があります。特にOGP画像として使用される場合、推奨サイズ(例:1200×630px)を守ることで、SNS上でも美しく表示されます。また、画像の中央に重要な要素が配置されていると、トリミングされても視認性が保たれます。Astraでも適切なサイズと構図を意識すれば、OGP画像として十分に機能します。
なぜアイキャッチ画像が表示されないのか?
Twitterカード(ブログリンクのプレビュー)に画像が表示されない原因は複数あります。
twitter:imageタグがHTMLに含まれていない
→ Twitterはこのタグをもとに画像を取得するため、タグがないと画像が表示されません。
WordPressテーマがOGP設定に対応していない
→ Astraなど一部テーマではOGPタグが自動生成されないことがあります。SEO系プラグインで補完可能です。
画像のキャッシュが古い
→ Twitter側が古いキャッシュを保持していると、画像を変更しても反映されません。
画像サイズや形式が不適切
→ 推奨サイズ(1200×628px)や形式(JPG, PNG)でないと表示されないことがあります。
まとめ
WordPress でブログをX(Twitter)にシェアする際、アイキャッチ画像が表示されない原因は複数ありますが、基本的な対策を押さえれば安定して表示させることが可能です。
原因と対策のポイント
| 原因 | 対策 | 補足 |
|---|---|---|
| OGPタグがない | SEOプラグインでOGP設定を追加 | twitter:imageタグが必須 |
| 画像サイズが小さい | 400×400px以上を推奨 | SNS用には1200×630pxが理想 |
| Twitterのキャッシュ | Card Validatorで更新 | 反映されるまで時間がかかることも |
| 画像の構図が不適切 | 中央に重要要素を配置 | トリミング対策として有効 |
| Astraテーマ使用 | SEOプラグイン導入が必須 | 軽量設計のためOGP非対応 |
実践ステップチェックリスト
1. WordPress投稿にアイキャッチ画像を設定
・メディアライブラリから再設定すると反映されやすい
2. SEOプラグインでOGPタグを確認・設定
・twitter:imageタグが出力されているか確認
・All in One SEO / Yoast SEO / Rank Math などが有効
3. Twitter Card ValidatorでURLを検証
・「Card loaded successfully」が表示されればOK
・表示されない場合は数回試す
4. 画像の再アップロード(キャッシュ対策)
・ファイル名を変更して再アップロードすると効果的
・例:image79.jpg → image80.jpg
5. 画像サイズと構図の最適化
・推奨サイズ:1200×630px(横長)
・中央に重要な要素を配置してトリミング対策
応用ヒント
・複数のSNSに対応するなら:OGPタグだけでなく、TwitterカードとFacebook用の設定も併用すると効果的。
・JetpackのPublicize機能:Twitter連携を自動化できるので、投稿時の手間が減ります。
・画像の視認性を高めたいなら:テキスト入りのサムネイル画像を作成し、中央にタイトルを配置するのがおすすめ。
OGP設定と画像サイズ・構図をしっかり整えれば、Astraのような軽量テーマでもTwitterカードで美しく表示されます。SEOプラグインの力を借りて、SNSでの視認性とクリック率を最大化しましょう!
阿久梨絵でした!
