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

Question

当用户提交 post 和 URL 时。我想在没有后端服务器的情况下获取 URL 的 Open Graph 元数据。

我找到了可以提取 Open Graph 元数据的库，例如 opengraph-io 和 metascraper，但它们都需要 Node.js 服务器才能完成这项工作。

是否可以只在客户端实现？

Answer 1

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

https://www.opengraph.io/ 每月最多提供 100 个免费请求。您需要注册才能将 API 密钥放入 app_id。在短短几行代码中，我获得了响应对象中的元数据：

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/Whosebug/Img/favicon.ico?v=ec617d715196',
    image: 'https://cdn.sstatic.net/Sites/Whosebug/Img/apple-touch-icon@2.png?v=73d79a89bded',
    site_name: 'Stack Overflow',
    title: 'How to get Open Graph meta from URL input on the client side',
    type: 'website',
    url: '
}

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

How to get Open Graph meta from URL input on the client side

javascript

facebook-opengraph