0

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?

  • Beyond Maximillian's great answer: Retrieving the thumbnail data from a page is a simple task. Adapting that task to process JS is a) too much work, b) a potential security issue. – GeoffAtkins May 11 at 6:40
2

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.

| improve this answer | |
  • I am looking for this image to not be hardcoded. In this case the image URL is fabricated by the javascript. – CW Holeman II May 11 at 1:56
  • @CWHolemanII Please see my updated answer. – Maximillian Laumeister May 11 at 4:00
  • An SSI exec cmd to specify the desired image in the meta tag before sending the page out w/o using the javascript code does the job enough. – CW Holeman II May 12 at 16:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.