How to get open graph meta data using js

Question

I'm trying to get 3 components to all websites:

Website title
Description
Image/og:image

The way I thought would work was using ajax to fetch the website and then read the meta data, but it doesn't seem to work consistently..

$('#getResults').on('click', (event) => {

  let postURL = $('#fetch').val()

  $.ajax({
    url: 'https://cors-anywhere.herokuapp.com/' + postURL
  }).then((data) => {
      let html = $(data);
      
      let website_data = {
        title: getNameContent(html, 'og:title') || null,
        description: getNameContent(html, 'og:description') || null,
        image: getNameContent(html, 'og:image') || null,
        url: postURL
      }
      console.log(website_data)
  })
})

function getNameContent(html, name) {
  return html.filter((index, tag) => tag && tag.name && tag.name == name).attr('content');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>
https://www.youtube.com/watch?v=dHHt_VBefeQ //doesn't work<br>
</p>

<input type="text" id="fetch" placeholder="url"/>
<button id="getResults">Search</button>

Some URL's work though, but others don't... Any idea how I can get consistent results? Thank you!

not alone js can do that, using some server side with `DOMXPath` and `DOMDocument` could work along with jquery or javascript — Muhammad Omer Aslam, Jan 31 '19 at 22:14
@MuhammadOmerAslam Do you know a php resource that could do this? — Simon, Jan 31 '19 at 22:54
look into this answer by sampson in the end https://stackoverflow.com/questions/10793585/how-to-pick-the-title-of-a-remote-webpage — Muhammad Omer Aslam, Feb 01 '19 at 08:31

How to get open graph meta data using js

0 Answers0