フロントエンドで OGP の情報を取得する

• URL: https://zenn.dev/snowcait/articles/d0f609d6366ef9
• 日付: 2026-06-26
• Tier: Tier 3
• 要旨: フロントエンドから外部サイトの OGP 情報を取得する際は CORS の制約により直接 fetch できないため、CORS Proxy サービス（corsproxy.io 等）を経由して HTML を取得し、ブラウザ標準の DOMParser で meta タグを解析する方法が有効。サーバーサイドで DOM をパースする方法と比べ、実装が手軽で Node.js の jsdom が不要という利点がある。Twitter Card の取得も同じ方法で対応できる。

詳細

フロントエンドから OGP 情報を取得する実装パターン

• OGP の仕組み: ページの title・画像・説明等を HTML の タグで外部に公開する仕様
• CORS の制約: ブラウザは異なるオリジンへの fetch レスポンスを JavaScript からブロックする。Access-Control-Allow-Origin: * が設定されていないサイトが多い
• 解決策: CORS Proxy を経由して HTML を取得する
  • corsproxy.io などのプロキシサービスを使用
  • URL: https://corsproxy.io/?${encodeURIComponent(targetUrl)}
• パース手順:
  1. fetch で HTML テキストを取得
  2. new DOMParser().parseFromString(html, ’text/html’) で DOM 化
  3. dom.head.children を filter/map して og: プレフィックスの meta を抽出
• Twitter Card の取得: name 属性が “twitter:” で始まる meta タグを同様に抽出
• 注意点: キャッシュや文字コードの考慮が本番実装では必要（補足としてコード例が別途ある）