Changing the value of OG:IMAGE with jQuery click

Question

I just build up a image portfolio with a single HTML page where all the pictures are dynamically loaded. Everything works great so far, except for the facebook META OG:IMAGE.

Since the page loads just once, I can assign the OG:IMAGE URL once... But I really would like to have each picture with its own OG:IMAGE, since this is a photo album.

The pics are loaded by clicking on a --li class="open-pic"-- tag. I would like to change the OG:IMAGE value everytime I click on a --li class="open-pic"-- tag.

Is it possible? I found stuff like this:

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

However, I don't know how to link this to the li.open-pic onclick event. Thank you!

G.

Answer 1

Since the page loads just once, I can assign the OG:IMAGE URL once... But I really would like to have each picture with its own OG:IMAGE, since this is a photo album.

Changing OG meta tags client-side is of no actual use – because Facebook will read those tags through it’s scraper, which means they will do an HTTP request for your URL and see what’s in the HTML code; and the scraper does not execute any JavaScript.

Solution: Provide an individual URL for each photo with its own meta information – and have your like button/share functionality/whatever FB feature point to that URL for each photo.

(How you handle things client-side does not matter – you can still display all the photos in one page, load new content via AJAX, whatever you like – but you will need separate URLs for your photos for them to be recognized as individual Open Graph objects.)