在程式碼行下建立元標籤抓取 API-js教程-PHP中文網

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

Building a Meta Tags Scraping API in Under Lines of Code

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 創建，旨在標準化網頁內元數據的使用來表示頁面內容，它可以幫助社交網絡生成豐富的鏈接預覽。
在這裡閱讀更多相關資訊。

為什麼是德諾？

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

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

取得元標籤

讓我們先到 Deno Deploy 並登入。
登入後點選「New Playground」
Building a Meta Tags Scraping API in Under Lines of Code
這將為我們提供一個 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 中的欄位：<br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import { DOMParser, Element } from "jsr:@b-fuze/deno-dom"; </pre><div class="contentsignin">登入後複製</div></div> <p>它不完全是一個元標記，但我認為它是一個有用的字段，所以無論如何它將成為我們 API 的一部分。 :)</p> <p>我們最終的 getMetaTags 函數應如下所示：<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 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(); </pre><div class="contentsignin">登入後複製</div></div> <h2> 伺服器 </h2> <p>為了簡單起見，我決定使用 Deno 內建的 http 伺服器，這只是一個簡單的 Deno.serve() 呼叫。 <br> 由於 deno 是基於 Web 標準建構的，因此我們可以使用 Fetch API 中內建的 Response 物件來回應請求。 <br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">curl https://metatags.deno.dev/api/meta?url=https://dev.to </pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div> <p>我們的伺服器解析請求 URL，檢查是否收到對 /api/meta 路徑的 GET 請求，並呼叫我們建立的 getMetaTags 函數，然後傳回元標記作為回應正文。 </p> <p>我們還新增了兩個標頭，第一個是 Content-Type，客戶端需要它來了解他們在回應中取得的資料類型，在我們的範例中是 JSON 回應。 </p> <p>第二個標頭是Access-Control-Allow-Origin，它允許我們的API 接受來自特定來源的請求，在我們的例子中，我選擇「*」接受任何來源，但您可能希望將其改為只接受來自以下來源的請求你前端的起源。 <br> 請注意，CORS 標頭只會影響瀏覽器發出的請求，這表示瀏覽器將根據標頭中指定的來源阻止請求，但仍可從伺服器直接呼叫 API。在這裡閱讀有關 CORS 的更多資訊。 </p> <p>您現在可以點選「儲存並部署」<br> <img src="https://img.php.cn/upload/article/000/000/000/172949959089268.jpg" alt="Building a Meta Tags Scraping API in Under Lines of Code"><br> 然後等待 deno deploy 將程式碼部署到 Playground：<br> <img src="https://img.php.cn/upload/article/000/000/000/172949959198494.jpg" alt="Building a Meta Tags Scraping API in Under Lines of Code"><br> 右上角的url 是你的Playground 的url，複製它並添加/api/meta?url=https://dev. 來查看它的實際情況，該url 應該類似於https://metatags.deno.dev / api/meta?url=https://dev.to<br> 現在您應該看到 API 使用 dev.to 的元標記進行回應！ <br> <img src="https://img.php.cn/upload/article/000/000/000/172949959294656.jpg" alt="Building a Meta Tags Scraping API in Under Lines of Code"></p> <h2> 部署 </h2> <p>使用 Deno 部署的 Playground 意味著您的程式碼在技術上已經部署，它是公開的並且任何人都可以存取。 <br> 對於像我們正在建置的這樣的簡單API，單一檔案遊樂場就足夠了，但在許多情況下，我們希望進一步擴展我們的項目，為此，您可以使用Deno 部署的Github 匯出來為以下專案建立適當的程式碼儲存庫：您的API，支援自動建立新程式碼推送：<br> <img src="https://img.php.cn/upload/article/000/000/000/172949959428755.jpg" alt="Building a Meta Tags Scraping API in Under Lines of Code"><br> 或從遊樂場的設定：<br> <img src="https://img.php.cn/upload/article/000/000/000/172949959544011.jpg" alt="Building a Meta Tags Scraping API in Under Lines of Code"></p> <h2> 注意事項 </h2> <p>本文中介紹的抓取方法僅適用於從伺服器返回的html 檔案中具有元標記的網站，這意味著伺服器渲染或預先渲染的網站更有可能返回正確的結果，單頁應用程式也可以工作因為元標記是在建置時設定的，而不是在運行時設定的。 </p> <h2> 結論 </h2> <p>我們示範了使用Deno 建置和部署API 是多麼快速和簡單，我們已經了解了Meta 標籤，以及如何使用Fetch API、DOM 解析器和Deno 內建伺服器來建立元標記在40 行程式碼內抓取API 。 </p> <p>要查看本文中建立的項目，您可以查看Deno 部署遊樂場（您需要將/api/meta?url=https://dev.to 新增至右側的網址列才能看到回應範例）或此github 儲存庫。 </p> <hr> <h2> 您接下來要建構什麼？ </h2> <p>我希望這篇文章能啟發您探索元標籤和 Deno 的力量！嘗試建立您自己的 API 版本或將其整合到書籤管理器等專案中。 </p> <p>遇到困難、有疑問或想展示您建造的內容？請在下面發表評論或在 Twitter/X 上與我聯繫 – 我很樂意收到您的來信！ </p> <p>查看我之前關於用不到 40 行程式碼建立 React 狀態管理函式庫的文章。 </p>

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