Ahmed Raza Chuhdary CEO, Thear | Member, Welson Group 17 February 2023, 11:25 AM

How to set screenshot of webpage as open graph image of same uri?

I want to change meta tag's attribute using javascript/jquery function for crawlers.
Like when any link is opened in social networking sites like facebook, twitter etcectra an og:image is shown. I want to change <meta property="og:image" content=""> to <meta property="og:image" content="data:image/png....(dataURL)">
The code I am using is
`
<script>
getCanvas = document.getElementById('parea');
html2canvas(getCanvas)
.then(function(canvas) {
canvase = document.body.appendChild(canvas);
canvase.id = 'canvas';
})
.then(async function() {
const canvas = document.getElementById('canvas');
const dataURL = canvas.toDataURL();
const metaimg = document.createElement('meta');
metaa = document.head.appendChild(metaimg);
console.log(canvas);
console.log(dataURL);
metaa.setAttribute("property", "og:image");
metaa.setAttribute("content", dataURL);
const blob = await fetch(dataURL).then(r => r.blob());
const filesArray = [
new File(
[blob],
'canvas.png',
{
type: blob.type,
lastModified: new Date().getTime()
}
)
];
const shareData = {
files: filesArray,
};
});
</script>
`
This created new meta tag only if I open this link in a browser.

Unfortunately, this is not possible. The meta tags are part of the HTML code of the page and cannot be changed using JavaScript or jQuery. The only way to change the meta tags is by editing the HTML code of the page and updating it accordingly.

Unfortunately, this is not possible. The meta tags are part of the HTML code of the page and cannot be changed using JavaScript or jQuery. The only way to change the meta tags is by editing the HTML code of the page and updating it accordingly.
0 View
Share