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

How to get Open Graph meta from URL input on the client side(如何从客户端的URL输入中获取Open Graph元数据)

问题描述

当用户提交带有URL的帖子时。我希望在没有后端服务器的情况下获取URL的Open Graph元数据。

我找到了可以提取Open Graph元的库，如Opengraph-io和metasCraper，但它们都需要Node.js服务器来完成这项工作。

是否可以仅在客户端实现这一点？

推荐答案

我找到了解决方案。发布此答案是为了帮助任何正在搜索类似解决方案的人。

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/stackoverflow/Img/favicon.ico?v=ec617d715196',
    image: 'https://cdn.sstatic.net/Sites/stackoverflow/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: 'https://stackoverflow.com/questions/62634812/how-to-get-open-graph-meta-from-url-input-on-the-client-side'
}

这篇关于如何从客户端的URL输入中获取Open Graph元数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！