OGP(Open Graph Protocol)は、Web ページが SNS でシェアされたときのプレビュー(タイトル・説明・サムネイル)を制御するための仕組みです。ページの HTML に <meta property="og:title" content="..."> のようなタグを埋め込むことで、Twitter(X)や Facebook、Slack などがシェア時のカードを自動生成します。
では、なぜブラウザから直接そのページの HTML を取得して確認しないのでしょうか?ここで CORS(クロスオリジンリソース共有) という壁があります。ブラウザは安全のため、異なるドメインへの fetch リクエストを制限しており、相手サーバーが許可していない限りレスポンスを読めない仕組みになっています。
そこでこのツールでは、入力された URL を /api/ogp?url=... へ送り、Vercel のサーバーレス関数がサーバーサイドでそのページを fetch します。サーバーには CORS の制限がないため、どのページの HTML も取得できます。取得した HTML から og:title や twitter:card などのメタタグを正規表現で抽出し、JSON で返しています。
返ってきたデータをもとに、各タグの有無・内容・文字数などをチェックして結果を表示しています。