Problem:
Similar to other social media sites, I want to show preview of Instagram links in my website. But when I cannot cannot get the meta tags from the webpage as the html shown when the page accessed from the browser is different from that when accessed through axios. I cannot get the Open Graph tags in Instagram pages.
What I have tried
packages used: axios and jssoup
post url used in example below: https://www.instagram.com/p/Cg39m-KjfC8/
const axios = require('axios').default;
var JSSoup = require('jssoup').default
const fetchOgDatafromInsta = async (postid) => {
// let's consider this url for example
page = await axios.get(`https://www.instagram.com/p/Cg39m-KjfC8/`, {
headers: {
"sec-ch-ua-platform": "Windows",
"User-Agent":
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.81 Safari/537.36",
"accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8",
"accept-encoding": "gzip, deflate, br",
"accept-language": "en-US;q=0.7",
"sec-fetch-dest": "document",
"sec-fetch-mode": "navigate",
"sec-fetch-site": "none",
"sec-fetch-user": "?1",
"sec-gpc": 1,
"upgrade-insecure-requests": 1
},
})
var soup = new JSSoup(page.data, false)
const allMeta = soup.findAll(('meta'))
allMeta.forEach(element => {
console.log(element.attrs);
});
}
With or without the header the result is same. Tags like <meta property="og:image"/> are absent.
Is there any other way to get the meta tag data? Most Social media paltforms can do this!!!
Please help!!!
Any suggestion accepted gratefully. Thanks in advance.