Show Page title while Sharing links in Social media : Angular 8

Question

I have a classifieds website done in Angular 8. The contents of each posts are fetched from database. The problem is when i share the link of a post in Social medias. it is only Showing my index page title along with the url.

But what i want is the page title and description which is loaded dynamically like this

Can somebody please help me with this.

what i want is , when i paste a url while i share my posts in facebook, it should fetch the title and description automatically. I am now setting the title and description by code. But facebook is not rendering it because, it is not there when the html is loading firstly.

Currently i am setting the page title like this.

 constructor(private titleService: Title){
this.titleService.setTitle('Classifieds | Job Details'); //setting title
}

Answer 1

You cannot do it in your client-side because of CORS policy. Better to use this in the server-side or you can use https://cors-anywhere.herokuapp.com so this will be used as proxy.

$('button').click(function() {
  $.ajax({
    url: 'https://cors-anywhere.herokuapp.com/' + $('input').val()
  }).then(function(data) {
    var html = $(data);

    $('#kw').html(getMetaContent(html, 'description') || 'no keywords found');
    $('#des').html(getMetaContent(html, 'keywords') || 'no description found');
    $('#img').html($('input').val()+ '/' + html.find('img').attr('src') || 'no image found');
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" placeholder="Type URL here" value="https://www.ieltstrainingcouncil.com" />
<button>Get Meta Data</button>

<pre>
  <div>Meta Keyword: <div id="kw"></div></div>
  <div>Description: <div id="des"></div></div>
  <div>image: <div id="img"></div></div>
</pre>

Source : Fetching metadata from url