如何从客户端的 URL 输入中获取 Open Graph 元数据

Question

当用户提交带有 URL 的帖子时。我想在没有后端服务器的情况下获取 URL 的 Open Graph 元数据。我找到了可以提取 Open Graph 元数据的库，例如 opengraph-io 和 metascraper，但它们都需要 Node.js 服务器来完成这项工作。是否可以仅在客户端实现此目的？

Answer 1

我找到了解决方案。发布此答案以帮助正在寻找类似解决方案的任何人。

https://www.opengraph.io/每月免费提供多达 100 个请求。您需要注册以获取要放入 app_id 的 API 密钥。只需几行代码，我就可以在响应对象中获取元数据：

getOpenGraph(url) {

  const encodedURL = encodeURIComponent(url)

  axios

    .get(`https://opengraph.io/api/1.1/site/${encodedURL}?app_id=xxxxxxx`)

    .then(res => { console.log(res.data.hybridGraph) })

    .catch(err => { console.log(err) })

}

此页面的打开图形数据如下：

{

    description: "When an user submit a post with an URL. I want to get the Open Graph meta of the URL without a back-end server. I've found libraries that can extract Open Graph meta such as opengraph-io and metasc...",

    favicon: 'https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196',

    image: 'https://cdn.sstatic.net/Sites/stackoverflow/Img/[e-mail]?v=73d79a89bded',

    site_name: 'Stack Overflow',

    title: 'How to get Open Graph meta from URL input on the client side',

    type: 'website',

    url: 'https://stackoverflow.com/questions/62634812/how-to-get-open-graph-meta-from-url-input-on-the-client-side'

}