在代码行下构建元标签抓取 API-js教程-PHP中文网

首页

web前端

js教程

在代码行下构建元标签抓取 API

DDD

Oct 21, 2024 pm 04:33 PM

您是否想知道 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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172949959089268.jpg" class="lazy" alt="Building a Meta Tags Scraping API in Under Lines of Code"><br> 然后等待 deno deploy 将代码部署到 Playground：<br> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172949959198494.jpg" class="lazy" 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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172949959294656.jpg" class="lazy" 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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172949959428755.jpg" class="lazy" alt="Building a Meta Tags Scraping API in Under Lines of Code"><br> 或从游乐场的设置：<br> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172949959544011.jpg" class="lazy" 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中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn