Next.js で、Zenn のようなブログカードの実装

アプリケーションにブログカードを実装するときに、外部 URL や OGP 画像を取得できないサイトがあったので、jsdom を使用して HTML を解析し、OGP メタデータを抽出する方法を検討しました。

ブログカードというのは、以下のようにサイトのタイトル、説明、画像、ロゴなどを自動取得して表示するUIです。

手順

概ね、以下のような手順で実装します。

1. API でプロキシサーバーを立ち上げる
2. jsdom を使用して HTML を解析する
3. OGP メタデータを抽出する
4. タイトル、ロゴやファビコンの取得

API でプロキシサーバーを立ち上げる

CORS（クロスオリジンリソース共有）の制約を回避するために、サーバー側でプロキシ API を構築します。これにより、外部の URL から HTML を安全に取得し、サーバー経由でクライアントに返せるようにします。

CORS とは、ブラウザが異なるオリジン（例：異なるドメインやポート番号）間でのリソースの共有を制限するセキュリティ機構です。この仕組みを回避するために、プロキシサーバーを使ってデータを中継することで、ブラウザの CORS 制約を回避します。

プロキシサーバーは、クライアント（ユーザーのブラウザなど）とインターネット上の他のサーバーとの間に位置する「仲介役」のようなサーバーです。クライアントが直接目的のサーバーにアクセスするのではなく、まずプロキシサーバーにリクエストを送り、プロキシサーバーが目的のサーバーにアクセスして、その結果をクライアントに返す仕組みです。

クライアント（ブラウザ）から直接他のドメインにアクセスすると、セキュリティ上の理由でアクセスが制限されることがあります（これをCORSと呼びます）。プロキシサーバーを使えば、クライアントから見たリクエスト先は同じドメインのプロキシサーバーなので、CORS制約を回避できます。

詳細は割愛しますが、以下のようにプロキシサーバーを立ち上げます。

jsdom を使用して HTML を解析する

まずは、jsdom をインストールします。

ドキュメントはこちら。

次に、取得した HTML を Node.js 上で解析するために、インストールした jsdom を使います。jsdom を使うと、ブラウザと同様の方法で HTML を操作でき、document.querySelector などを使用して特定の要素を簡単に取得できます。

詳細は割愛しますが、以下のように HTML を解析します。

このコードを使って、例えばタイトルを取得する場合は、metadata.title のようにしてアクセスできます。

metascraper との比較

metascraper は、Open Graph メタデータ、通常の HTML メタデータ、および一連のフォールバックを使用して、Web 上の記事からメタデータを簡単にスクレイピングするためのライブラリです。

metascraper は設定が簡単で便利ですが、特定の OGP タグが欠けているページや、OGP 以外のカスタムメタタグの対応が難しい場合があります。一方、jsdom を使用すると、HTML の任意の部分に対して柔軟にアクセスできるため、異なるサイトでも安定してデータを取得しやすくなります。

metascraper を使う場合、追加のプラグイン（metascraper-title や metascraper-image など）をインストールする必要があり、依存関係が増えます。jsdom のみで完結することで、依存パッケージを減らし、メンテナンスがシンプルになります。

まとめ

Next.js で Zenn のようなブログカードを実装するには、JSDOM を使って外部サイトから OGP メタデータを取得し、カードを生成する方法が有効です。CORS 制約を回避するためにプロキシサーバーを立ち上げ、jsdom で HTML を解析することで、サイト全体のデータ取得が柔軟に行えます。