Facebook preview content appears to not be processing the javascript

Question

When a Facebook user posts a link to the page a preview of the page is displayed. This tends to have the first image from the page. The page I have has one canned image at the top and the rest of the images are specified in javascript code that changes the content of the page. I moved the section with the canned image to the bottom of the page after the dynamic images section. The preview still shows this canned image in the preview.

I am assume somehow Facebook is getting just the original page without the javacript getting the chance to finalize the content. The first 'dynamic' images tend to be the newest content so I would like it/them to come up in the preview rather than the canned one. What are the options for addressing this issue?

Original page

Modified page

What is actually happening that is causing this effect?

Answer 1

You can explicitly control the image Facebook uses by implementing OpenGraph markup on your page. That way, Facebook won't have to "guess" or "pick one" by itself.

Here's a document from Facebook about it:

https://developers.facebook.com/docs/sharing/webmasters/

Specifically, you'll need to add the following tag in your page's head to specify the web page's poster image:

<meta property="og:image" content="http://example.com/image.jpg" />

---

To answer your follow-up question, it's impossible to use JavaScript to change the image that shows up when someone pastes your link into Facebook, as Facebook's crawler does not parse JavaScript.

Sources:

https://stackoverflow.com/questions/44241258/set-dynamic-meta-tags-and-open-graph-tags-using-jquery

https://stackoverflow.com/questions/3081004/update-facebook-open-graph-meta-tag-through-javascript

You can, however, create a share button on your page that shares using a custom image. Note that in this case, the image will only be set if the user clicks your custom share button. If they paste the link into Facebook to share, they will just get the default image.

I am pretty certain that static or server-side opengraph tags are the only way to explicitly set an image when a URL is pasted into Facebook to share.