'Dynamically changing the content of: meta property="og:image"

I want to change the main photo in a web page, I just have the url page. So I decided to use the meta written for Facebook sharing.

I want to change the image in: meta property="og:image" content="http://myweb.com/image.jpg"

javascriptjqueryhtmlfacebook-opengraph


Solution 1:[1]

Change it with jQuery like:

$('meta[property=og\\:image]').attr('content', 'http://myweb.com/image.jpg');

Solution 2:[2]

You can change og:image with following code:

$('meta[name=og\\:image]').attr('content', newVideoUrl);

But, if you want to change the image permanently (so Facebook can scrape your data and the image will be available for sharing), you need to change this value on the server.

Facebook is reading <meta og:image> only from the response of the server.

See similar topic: Facebook scraper doesn't load dynamic meta-tags

Solution 3:[3]

I think this can be useful to you. Instead of getAttribute you should use setAttribute and thats all. :-)

Solution 4:[4]

for javascript:

document.querySelectorAll('meta[property=og\\:image]')[0].setAttribute('content', 'http://myweb.com/image.jpg')

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kurt Van den Branden
Solution 2
Solution 3 KozaKrisz
Solution 4 Justin

Related Questions