Open Graph タグでよくある間違い
OG タグに間違いがないか確認してください
Proovd を使用します — URL を貼り付けると、X、LinkedIn、Slack、Discord、WhatsApp、Reddit でどのように表示されるかをすぐに確認できます。
簡単な回答
og:imageに相対 URL を使用する — プラットフォームはそれらを取得できませんtwitter:cardタグがありません — X はカードをレンダリングしません- 画像がプラットフォームに対して小さすぎます — LinkedIn には少なくとも 1200×627 が必要です
- 更新後にキャッシュがクリアされない — プラットフォームは OG タグを数日間キャッシュします
間違い 1: og:image に相対 URL を使用する
これは最も一般的な間違いです。開発者は次のように書いています。
✗ 間違っています
<meta property="og:image" content="/images/preview.jpg" />
プラットフォームのクローラーは相対 URL を解決できません。絶対 URL が必要です。
✓ 正しい
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
og:image URL では常に https:// を使用してください。これは、X、LinkedIn、Discord、Slack、WhatsApp、Reddit のすべてのプラットフォームに影響します。
間違い 2: twitter:card タグがありません
多くの開発者は、Open Graph タグのみを設定し、Twitter Card タグをスキップします。 X/Twitter は twitter:card を優先しており、それがないとカードが正しくレンダリングされない可能性があります。
✗ 不完全
<meta property="og:image" content="https://yoursite.com/image.jpg" />
✓ 完了
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />
完全にカバーするには、og:image と twitter:image の両方を設定します。詳細については、Open Graph 対 Twitter Card ガイド をご覧ください。
間違い 3: 画像がプラットフォームに対して小さすぎる
プラットフォームごとに最小画像サイズが異なります。 Discord (最小 300×300) で動作する画像は、LinkedIn (最小 1200×627) では動作しない場合があります。
| Platform | Minimum | Recommended |
|---|---|---|
| X / Twitter | 800 × 418 | 1200 × 628 |
| 1200 × 627 | 1200 × 627 | |
| Discord | 300 × 300 | 1200 × 630 |
| 300 × 157 | 1200 × 630 | |
| 120 × 120 | 1200 × 628 |
1200 × 630 を標準サイズとして使用すると、すべてのプラットフォームに対応します。完全な内訳については、Open Graph 画像サイズガイド をご覧ください。
間違い 4: アップデート後にキャッシュをクリアしない
OG タグを更新します。プラットフォームには依然として古いプレビューが表示されます。問題: プラットフォームは OG タグをキャッシュし、自動的に再取得しません。
タグを更新した後、各プラットフォームのキャッシュをクリアする必要があります。
- Facebook: Sharing Debugger → 「もう一度削る」
- LinkedIn: Post Inspector → 「検査」
- X/Twitter: Card Validator → 「プレビューカード」
- Discord/Slack: 古いメッセージを削除し、URL を再投稿します
- WhatsApp:
?v=2クエリパラメータを追加します
プラットフォームごとの完全なウォークスルーについては、「Open Graphキャッシュをクリアする方法」ガイドを参照してください。
間違い 5: og:description が欠落している、またはテキストが切り詰められている
一部の開発者は、og:title と og:image を設定しますが、og:description はスキップします。説明が長すぎて切り捨てられてしまう人もいます。
ベストプラクティス:
- og:title: 50～60文字（SEOのタイトルタグと同じ）
- og:description: 150～160文字（メタディスクリプションと同じ）
- 最も重要な情報を最初に配置します — プラットフォームはさまざまな箇所で切り捨てられます
間違い 6: og:url を設定していない
og:url がないと、プラットフォームはプレビューで間違った URL (トラッキング パラメーターを含む URL など) を使用する可能性があります。常に正規 URL を設定します。
✓ 正しい
<meta property="og:url" content="https://yoursite.com/your-page" />
間違い 7: 間違った画像 MIME タイプを使用する
サーバーが画像に対して間違った Content-Type ヘッダーを返した場合 (例: image/jpeg で PNG を提供する)、一部のプラットフォームはそれを拒否します。画像サーバーが正しい MIME タイプを返すことを確認してください。
- JPG/JPEG →
画像/jpeg - PNG →
画像/png - WebP →
画像/WebP - GIF →
画像/gif
LinkedIn は、MIME タイプの検証に関して特に厳密です。
間違い 8: 固有の OG タグのない動的ページ
すべてのページが同じ OG タグ (通常はホームページ タグ) を共有する SPA サイトまたは動的サイトがある場合、プラットフォームはすべてのページに同じプレビューを表示します。各ページには独自のタイトル、説明、画像が必要です。
Next.jsでは、generateMetadata()を使用します。 WordPress では、ページごとの Yoast/RankMath 設定を使用します。プレーン HTML では、各ページに個別にタグを設定します。
クイックフィックスチェックリスト
- 絶対 URL を使用します (すべての og:image パスには https://...))
og:とtwitter:の両方のタグを設定します- 汎用互換性を確保するには 1200×630 ピクセルの画像を使用してください
- タグを更新した後にプラットフォームのキャッシュをクリアする
- ページごとに一意の OG タグを設定する
- og:description (150 ～ 160 文字) を含める
- og:url を正規 URL に設定します
- MIME タイプが実際の画像形式と一致することを確認します
- Proovd でテストして、すべての間違いを一度に見つけます
よくある質問
最も一般的な Open Graph の間違いは何ですか?
https://. で始まる絶対 URL の代わりに og:image に相対 URL を使用すると、プラットフォームは相対 URL を取得できないため、画像はプレビューに表示されません。
私の OG イメージがあるプラットフォームでは機能するのに、別のプラットフォームでは機能しないのはなぜですか?
各プラットフォームには異なる画像サイズ要件があります。 LinkedIn は最小 1200x627 を必要とし、X は 800x418 を必要とし、Discord は最小 300x300 を受け入れます。あるプラットフォームで動作するイメージが、別のプラットフォームでは小さすぎる場合があります。
OG タグに間違いがあるかどうかを確認するにはどうすればよいですか?
Proovd を使用して URL を貼り付け、6 つのプラットフォームすべてで一度に URL がどのようにレンダリングされるかを正確に確認します。
関連記事
OG タグに間違いがないか確認してください
Proovd を使用します — URL を貼り付けると、X、LinkedIn、Slack、Discord、WhatsApp、Reddit でプレビューが表示されます。