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

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.)