OGPチェックの小技

この記事はこういう人におすすめ: （for） この記事で得られること: （benefits）

この記事はこんな人向け: SNS 共有で「画像が出ない／違う」をすぐ直したい編集者・運用担当・開発者 この記事でわかること: まず見る 3 点（絶対 URL／200/302／キャッシュ）と、最短の切り分け手順（所要 1〜3 分）

プロダクトで「画像が出ない / タイトルが違う」が発生したときに、まず見るべき最短ルートをメモしておきます。すべて自サイト内で完結するチェックです。

• OG 生成 API（例: /api/og/hello.png）が 200 か 302 を返すかを確認します。
  • 例: curl -I https://migakiexplorer.jp/api/og/hello.png
  • 200 は生成成功、302 はフォールバック（/og-default.png など）。どちらもリンクプレビューが空白になる状態ではないことを確認できます。

2) ページの og:*/twitter:* メタを素早く確認

• ブラウザの「ページのソースを表示」で og:title / og:description / og:image を検索。
• 迷ったらタイトルと画像だけまず直す。これで 8 割は解消します。
• og:image の URL は 絶対 URL を推奨。サイズは 1200×630 以上が無難。

「OGP 画像やタグの即時確認を最短で済ませたい…」「開発中に OGP トラブルが多い！」そんな悩みはありませんか？ この記事では、OGP チェックの小技とよくある落とし穴・対策、最短の切り分け手順を短時間で解説します。 まずは関連ツール「OG チェック」で自分の URL を確認してみましょう。

1. 基本の確認（生成 API とメタタグ）

OG 生成 API（例: /api/og/hello.png）が 200 か 302 を返すか確認しましょう。 ページのソースでog:title、og:description、og:imageを検索し、まずタイトルと画像を直すと 8 割は解消します。 og:imageの URL は絶対 URL 推奨、サイズは 1200×630 以上が無難です。

2. 実例（キャッシュと再確認）

配信 CDN のキャッシュを疑う前に、自前の OG チェックで最新が出ているか確認します。 画像 URL の末尾に?v=timestampを付けるとキャッシュ回避できます（多用は NG）。 内部ツール「OG チェック」でタグと画像の状態を即時確認できます。

3. 落とし穴（❌ 失敗 →✅ 対策）

• ❌ 画像パスが相対 URL になっている
• ✅ 必ず絶対 URL で指定しましょう
• ❌ meta タグを SPA 側だけで差し替えて SSR 時に空
• ✅ 静的 HTML にも meta タグが出るようにしましょう
• ❌ 画像の MIME/拡張子が不一致
• ✅ 拡張子と MIME を統一しましょう
• ❌ ページが noindex,nofollow になっている
• ✅ 意図せずブロックされていないか確認しましょう

4. クイズ

1. OGP 画像の URL は絶対 URL で指定すべき理由は？
2. キャッシュ回避の簡単な方法は？
3. meta タグが SSR 時に空だと何が起きる？

答え

1. 環境による解決失敗を防ぐため
2. 画像 URL 末尾に?v=timestampを付ける
3. SNS で OGP が正しく表示されない

5. まとめ

• OGP チェックは開発・運用で必須です
• 画像・タグは必ず絶対 URL・静的 HTML で出力しましょう
• キャッシュや MIME/拡張子にも注意しましょう
• 関連ツール「OG チェック」も活用してください

まずは「OG チェック」で自分の URL を確認してみましょう。