Twitter Card (OGP) トラブルシューティングガイド
問題: TwitterでOGP画像が表示されない
解決手順
1. 実際の画像ファイルを生成・配置
# 開発サーバーを起動
bundle exec jekyll serve
# ブラウザで画像生成ツールを開く
http://localhost:4000/generate-ogp-simple.html
- ページ上の「画像をダウンロード (JPG)」ボタンをクリック
- ダウンロードした
og-default.jpgを/assets/images/フォルダに配置 - 既存のテキストファイルを置き換える
2. Jekyllを再ビルド
# Jekyllを停止 (Ctrl+C)
# キャッシュをクリア
rm -rf _site/.jekyll-cache
# 再ビルド
bundle exec jekyll build
# サーバーを起動
bundle exec jekyll serve
3. 本番環境へデプロイ
GitHubへプッシュして、本番環境に反映：
git add assets/images/og-default.jpg
git commit -m "Add actual OGP image for Twitter Card"
git push origin main
4. Twitter Card Validatorで検証
- https://cards-dev.twitter.com/validator にアクセス
- URLを入力（例:
https://navi.thewaggle.dev/blog/2025/08/30/business-core/） - 「Preview card」をクリック
Twitterの要件
画像要件
- 形式: JPG, PNG, WEBP, GIF（SVGは非対応）
- 最小サイズ: 144×144px
- 推奨サイズ: 1200×630px（summary_large_image）
- 最大ファイルサイズ: 5MB
- アスペクト比: 1.91:1（summary_large_image）
メタタグ要件
必須タグ：
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="ページタイトル">
<meta name="twitter:description" content="説明文">
<meta name="twitter:image" content="https://example.com/image.jpg">
チェックリスト
- 画像ファイルが実際のJPG/PNG形式である
- 画像URLが絶対URL（https://で始まる）である
- 画像が公開されており、アクセス可能である
- robots.txtで画像がブロックされていない
- Cloudflareなどのキャッシュが古い画像を返していない
- Twitter Card Validatorでキャッシュをクリアした
キャッシュのクリア方法
Twitter側のキャッシュ
- Twitter Card Validatorで「Preview card」を複数回クリック
- しばらく時間を置く（15-30分）
- 再度検証
Cloudflare（使用している場合）
- Cloudflareダッシュボードにログイン
- Caching > Configuration
- 「Purge Everything」または特定URLをパージ
よくある原因と対策
| 原因 | 症状 | 対策 |
|---|---|---|
| 画像が存在しない | Card preview shows no image | 実際のJPG画像をアップロード |
| URLが相対パス | Image could not be fetched | 絶対URLに変更 |
| ファイルサイズが大きすぎる | Image load timeout | 画像を圧縮（1MB以下推奨） |
| SVG形式を使用 | Image format not supported | JPG/PNGに変換 |
| HTTPSでない | Security warning | HTTPSを使用 |
デバッグコマンド
# 画像が存在するか確認
ls -la assets/images/og-default.jpg
# ファイルタイプを確認
file assets/images/og-default.jpg
# ファイルサイズを確認
du -h assets/images/og-default.jpg
# 本番URLで画像にアクセスできるか確認
curl -I https://navi.thewaggle.dev/assets/images/og-default.jpg
それでも解決しない場合
- 新しい画像ファイル名を使用
og-default-v2.jpgなど別名で保存- front matterとconfig.ymlを更新
- CDNやオブジェクトストレージを使用
- AWS S3やCloudinary等に画像をアップロード
- 絶対URLで参照
- 最小限のテストページを作成
--- layout: post title: "OGPテスト" description: "これはOGPテスト用の記事です" image: /assets/images/og-default.jpg --- テスト内容
参考リンク
最終更新: 2025年8月30日