在程式碼行下建立元標籤抓取 API

您是否想知道 Whatsapp 或 Telegram 等訊息傳遞應用程式如何讓您查看發送的連結的預覽？

Whatsapp 和 Telegram 網址預覽

在這篇文章中，我們將使用 Deno 建立一個抓取 API，它接受 URL 並檢索它的元標記，這樣我們就可以從幾乎任何網站獲取標題、描述、圖像等欄位。

例如：

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 元素，用於向搜尋引擎和其他用戶端提供有關頁面的附加資訊。
這些標籤通常包括定義資訊類型的名稱或屬性屬性，以及包含該資訊的值的內容屬性。這是兩個元標記的範例：

<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">

第一個標籤提供頁面的描述，而第二個標籤是開放圖譜標籤，定義在社群媒體上分享頁面時要顯示的圖像。

元標籤的一個實際應用是建立書籤管理器。您無需為每個書籤手動新增標題、描述和圖像，而是可以使用元標記自動從新增書籤的 URL 中抓取此資訊。

打開圖

Open Graph 是一種互聯網協議，最初由 Facebook 創建，旨在標準化網頁內元數據的使用來表示頁面內容，它可以幫助社交網絡生成豐富的鏈接預覽。
在這裡閱讀更多相關資訊。

為什麼是德諾？

1. Deno 具有安全預設設置，這意味著它需要明確的檔案、網路和環境存取權限，從而降低安全漏洞的風險。
2. Deno 基於Web 標準構建，使用ES 模組，旨在使用Web 平台API（例如fetch）而不是專有API，使Deno 程式碼與您在瀏覽器中編寫的程式碼非常相似- 但仍然有一些規範與瀏覽器的偏差。
3. Deno 具有內建的 TypeScript 支持，可讓您無需建置步驟即可編寫 TypeScript 程式碼。
4. Deno 附帶一個標準函式庫，其中包括用於 HTTP 伺服器、檔案系統操作等常見任務的模組。
5. Deno 提供了 Linter、Formatter 和 Test runner，讓您可以使用該平台而不是依賴第三方軟體包或工具，使其成為 Javascript 開發的一體化工具。
6. Deno 提供 Deno Deploy，這是一個可擴展的平台，適用於全球分佈的無伺服器 JavaScript/Typescript 應用程序，確保最小的延遲和最長的正常運行時間。

我們正在建立的 API 將由兩個部分組成，一個用於取得和解析元標記的函數，以及一個回應 HTTP 請求的 API 伺服器。

取得元標籤

讓我們先到 Deno Deploy 並登入。
登入後點選「New Playground」

這將為我們提供一個 hello world 起點。
現在我們將新增一個名為 getMetaTags 的函數，該函數接受 url 並使用 Fetch API 取得所請求 URL 的 HTML 並將其傳遞到用於 HTML 解析的套件 (deno-dom)。
要將 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 對其進行解析，然後使用標準DOM 函數（如querySelectorAll）獲取所有元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">

最後，我們也會查詢

以上是在程式碼行下建立元標籤抓取 API的詳細內容。更多資訊請關注PHP中文網其他相關文章！