您是否想知道 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並登入。

登入後點擊“新遊樂場”

這將為我們提供一個hello world起點。

現在我們將新增名為getMetaTags的函數，該函數接受 url 並使用 Fetch API 取得所請求 URL 的 HTML，並將其傳遞到用於 HTML 解析的套件 (deno-dom)。

要將deno-dom加入到我們的專案中，我們可以使用jsr套件管理器：

import { DOMParser, Element } from "jsr:@b-fuze/deno-dom";

現在我們將使用 Fetch API 來取得 HTML 文字：

  const headers = new Headers();
  headers.set("accept", "text/html,application/xhtml+xml,application/xml");
  const res = await fetch(url, { headers });
  const html = await res.text();

取得 HTML 後，我們可以使用deno-dom對其進行解析，然後使用標準 DOM 函數（如querySelectorAll來取得所有meta HTML 元素，迭代它們並使用getAttribute來取得每個標籤的名稱、屬性和內容：

const document = new DOMParser().parseFromString(html, "text/html");
const metaTags = document.querySelectorAll("meta");
const documentMeta = (Array.from(metaTags) as Element[])
    .reduce((acc, meta) => {
      const property = meta.getAttribute("property");
     ...

最後，我們還將查詢頁面的<title>元素，將其新增為 API 中的欄位：

documentMeta.title ??= document.querySelector("title").textContent;

它不完全是一個元標記，但我認為它是一個有用的字段，因此無論如何它將成為我們 API 的一部分。 :)

我們最終的getMetaTags函數應該如下所示：

import { DOMParser, Element } from "jsr:@b-fuze/deno-dom";

const getMetaTags = async (url: string) => {
  const headers = new Headers();
  headers.set("accept", "text/html,application/xhtml+xml,application/xml");
  const res = await fetch(url, { headers });
  const html = await res.text();
  const document = new DOMParser().parseFromString(html, "text/html");
  const metaTags = document.querySelectorAll("meta");
  const documentMeta = (Array.from(metaTags) as Element[])
    .reduce((acc, meta) => {
      const property = meta.getAttribute("property");
      const name = meta.getAttribute("name");
      const content = meta.getAttribute("content");

      if (!content) return acc;
      if (property) acc[property] = content;
      if (name) acc[name] = content;

      return acc;
    }, {} as Record<string, string>);
  documentMeta.title ??= document.querySelector("title").textContent;

  return documentMeta;
};

伺服器

為簡單起見，我決定使用 Deno 內建的 http 伺服器，這只是一個簡單的Deno.serve()呼叫。

由於 deno 是基於 Web 標準建構的，因此我們可以使用Fetch API 中內建的 Response 物件來回應請求。

Deno.serve({ port: 8000 }, async (request: Request): Promise<Response> => {
  const url = new URL(request.url);

  if (request.method === "GET" && url.pathname === "/api/meta") {
    const metaTags = await getMetaTags(url.searchParams.get("url"));
    const headers = new Headers();
    headers.set("Content-Type", "application/json");
    headers.set("Access-Control-Allow-Origin", "*");
    return new Response(JSON.stringify(metaTags), { status: 200, headers });
  }

  return new Response("not found", { status: 404 });
});

我們的伺服器解析請求 URL，檢查是否收到/api/meta路徑的GET請求，並呼叫我們建立的getMetaTags函數，然後傳回元標記作為回應正文。

我們還新增兩個標頭，第一個是Content-Type ，客戶端需要它來了解他們在回應中取得的資料類型，在我們的例子中是 JSON 回應。

第二個標頭是Access-Control-Allow-Origin它允許我們的 API 接受來自特定來源的請求，在我們的例子中，我選擇"*"接受任何來源，但您可能希望將其更改為僅接受來自前端來源的請求。

請注意，CORS 標頭只會影響瀏覽器發出的請求，這表示瀏覽器將根據標頭中指定的來源阻止請求，但仍可從伺服器直接呼叫 API。請在此閱讀有關 CORS 的更多資訊。

現在您可以單擊“儲存並部署”

然後等待 deno deploy 將程式碼部署到 Playground：

右上角的 url 是你的 Playground 的 url，複製它並加入/api/meta?url=https://dev.to來查看它的實際情況，該 url 應該類似於https://metatags.deno.dev/api/meta?url=https://dev.to

現在您應該看到 API 使用dev.to的元標記進行回應！

部署

使用 Deno 部署的 Playground 意味著您的程式碼在技術上已經部署，它是公共的並且任何人都可以存取。

對於像我們正在建置的這樣的簡單API，單一檔案遊樂場就足夠了，但在許多情況下，我們希望進一步擴展我們的專案，為此，您可以使用Deno 部署的Github 匯出來為以下專案建立適當的程式碼儲存庫：您的 API，支援自動建立新程式碼推送：

或從遊樂場的設置：

注意事項

本文介紹的抓取方法僅適用於從伺服器返回的html 檔案中具有元標記的網站，這意味著伺服器渲染或預先渲染的網站更有可能返回正確的結果，單頁應用程式也可以工作，只要元標記標籤是在建置時設定的，而不是在執行時設定的。

結論

我們示範了使用 Deno 建置和部署 API 是多麼的快速和簡單，我們已經了解了 Meta 標籤，以及如何使用 Fetch API、DOM 解析器和 Deno 的內建伺服器來建立 Meta 標籤抓取API 程式碼少於 40 行。

要查看本文中建立的專案，您可以查看Deno 部署遊樂場（您需要將/api/meta?url=https://dev.to新增至右側的 URL 欄以查看範例回應）或這個 github 儲存庫。

您接下來要建構什麼？

我希望這篇文章能啟發您探索元標籤和 Deno 的力量！嘗試建立您自己的 API 版本或將其整合到書籤管理器等專案中。

遇到困難、有疑問或想展示您建立的內容？請在下面發表評論或在Twitter/X上與我聯繫 – 我很樂意收到您的來信！

請查看我之前關於用不到 40 行程式碼建立 React 狀態管理庫的文章。

原文出處：https://dev.to/paripsky/building-a-meta-tags-scraping-api-in-under-40-lines-of-code-1f57