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

Question

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"

Answer 1

使用 jQuery 更改它，例如：

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

Answer 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

Answer 3

for javascript:

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

Answer 4

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