コード行の下でメタ タグ スクレイピング API を構築する

Whatsapp や Telegram などのメッセージング アプリで、送信したリンクのプレビューがどのように表示されるのか疑問に思ったことはありますか?

Whatsapp と Telegram の URL プレビュー

この投稿では、URL を受け入れ、そのメタ タグを取得するスクレイピング API を Deno で構築します。これにより、ほぼすべての Web サイトからタイトル、説明、画像などのフィールドを取得できるようになります。

例:

curl https://metatags.deno.dev/api/meta?url=https://dev.to

この結果が得られます

{
  "last-updated": "2024-10-15 15:10:02 UTC",
  "user-signed-in": "false",
  "head-cached-at": "1719685934",
  "environment": "production",
  "description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "keywords": "software development, engineering, rails, javascript, ruby",
  "og:type": "website",
  "og:url": "https://dev.to/",
  "og:title": "DEV Community",
  "og:image": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
  "og:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "og:site_name": "DEV Community",
  "twitter:site": "@thepracticaldev",
  "twitter:title": "DEV Community",
  "twitter:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "twitter:image:src": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
  "twitter:card": "summary_large_image",
  "viewport": "width=device-width, initial-scale=1.0, viewport-fit=cover",
  "apple-mobile-web-app-title": "dev.to",
  "application-name": "dev.to",
  "theme-color": "#000000",
  "forem:name": "DEV Community",
  "forem:logo": "https://media.dev.to/cdn-cgi/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png",
  "forem:domain": "dev.to",
  "title": "DEV Community"
}

かなりクールですね?

メタタグとメタタグが必要な理由

メタ タグは、ページに関する追加情報を検索エンジンや他のクライアントに提供するために使用される HTML 要素です。
これらのタグには通常、情報の種類を定義する name または property 属性と、その情報の値を含む content 属性が含まれます。 2 つのメタ タグの例を次に示します:

<meta name="description" content="The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.">
<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.cd6c4a5a.png">

最初のタグはページの説明を提供し、2 番目のタグはページがソーシャル メディアで共有されるときに表示する画像を定義する Open Graph タグです。

メタ タグの実際的な応用例の 1 つは、ブックマーク マネージャーの構築です。各ブックマークにタイトル、説明、画像を手動で追加する代わりに、メタ タグを使用してブックマークされた URL からこの情報を自動的に取得できます。

グラフを開く

Open Graph は、ページのコンテンツを表すために Web ページ内でのメタデータの使用を標準化するために Facebook によって元々作成されたインターネット プロトコルであり、ソーシャル ネットワークがリッチ リンク プレビューを生成するのに役立ちます。
詳細については、こちらをお読みください。

なぜデノなのか？

1. Deno には安全なデフォルトがあり、ファイル、ネットワーク、環境へのアクセスには明示的な許可が必要であり、セキュリティ脆弱性のリスクが軽減されます。
2. Deno は Web 標準に基づいて構築され、ES モジュールを使用し、独自の API ではなく Web プラットフォーム API (フェッチなど) を使用することを目的としているため、Deno コードはブラウザで作成するコードと非常によく似ていますが、それでもある程度の仕様はあります。ブラウザからの逸脱。
3. Deno には TypeScript サポートが組み込まれているため、ビルドステップなしで TypeScript コードを作成できます。
4. Deno には、HTTP サーバー、ファイル システム操作などの一般的なタスク用のモジュールを含む標準ライブラリが付属しています。
5. Deno はリンター、フォーマッタ、およびテスト ランナーを提供しており、サードパーティのパッケージやツールに依存する代わりにプラットフォームを使用できるため、JavaScript 開発用のオールインワン ツールになります。
6. Deno は、グローバルに分散されたサーバーレス JavaScript/Typescript アプリケーション用のスケーラブルなプラットフォームである Deno Deploy を提供し、最小限の遅延と最大の稼働時間を保証します。

私たちが構築している API は、メタ タグを取得して解析する関数と、HTTP リクエストに応答する API サーバーの 2 つの部分で構成されます。

メタタグの取得

まず、Deno Deploy に移動してサインインします。
サインインしたら、「新しいプレイグラウンド」をクリックします

これが Hello World の開始点となります。
次に、URL を受け入れ、Fetch API を使用して要求された URL の HTML を取得し、それを HTML 解析用のパッケージ (deno-dom) に渡す getMetaTags という関数を追加します。
deno-dom をプロジェクトに追加するには、jsr パッケージ マネージャーを使用できます。

curl https://metatags.deno.dev/api/meta?url=https://dev.to

次に、Fetch API を使用して HTML をテキストとして取得します。

{
  "last-updated": "2024-10-15 15:10:02 UTC",
  "user-signed-in": "false",
  "head-cached-at": "1719685934",
  "environment": "production",
  "description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "keywords": "software development, engineering, rails, javascript, ruby",
  "og:type": "website",
  "og:url": "https://dev.to/",
  "og:title": "DEV Community",
  "og:image": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
  "og:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "og:site_name": "DEV Community",
  "twitter:site": "@thepracticaldev",
  "twitter:title": "DEV Community",
  "twitter:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "twitter:image:src": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
  "twitter:card": "summary_large_image",
  "viewport": "width=device-width, initial-scale=1.0, viewport-fit=cover",
  "apple-mobile-web-app-title": "dev.to",
  "application-name": "dev.to",
  "theme-color": "#000000",
  "forem:name": "DEV Community",
  "forem:logo": "https://media.dev.to/cdn-cgi/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png",
  "forem:domain": "dev.to",
  "title": "DEV Community"
}

HTML を取得したら、deno-dom を使用して解析し、querySelectorAll などの標準 DOM 関数を使用してすべてのメタ HTML 要素を取得し、それらを反復処理して、getAttribute を使用して各要素の名前、プロパティ、コンテンツを取得します。これらのタグのうち:

<meta name="description" content="The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.">
<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.cd6c4a5a.png">

最後に、