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

Question

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 metascraper, but they all require a Node.js server to do the job.

Is it possible to achieve this on client side only?

score 0 · Accepted Answer · answered Jul 07 '20 at 08:17

I have found a solution. Posting this answer to help anyone who is searching for a similar solution.

https://www.opengraph.io/ provides up to 100 requests a month free. You need to signup to get the API key to place into the app_id. In just few lines of code, I get the meta data in a response object:

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) })
}

The open graph data for for this page is like this:

{
    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'
}

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

1 Answers1

Linked