How Does Facebook Sharer Select Images And Other Metadata When Sharing My URL?
When using Facebook Sharer, Facebook will offer the user the option of using 1 of a few images pulled from the source as a preview for their link. How are these images selected, and how can I ensure that any particular image on my page is always included in this list?
How do I tell Facebook which image to use when my page gets shared?
Facebook has a set of open-graph meta tags that it looks at to decide which image to show.
The keys one for the Facebook image are:
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/> <meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
and it should be present inside the
<head></head> tag at the top of your page.
If these tags are not present, it will look for their older method of specifying an image:
<link rel="image_src" target="_blank" rel="nofollow noreferrer" href="/myimage.jpg"/>. If neither are present, Facebook will look at the content of your page and choose images from your page that meet its share image criteria: Image must be at least 200px by 200px, have a maximum aspect ratio of 3:1, and in PNG, JPEG or GIF format.
Can I specify multiple images to allow the user to select an image?
Yes, you just need to add multiple image meta tags in the order you want them to appear in. The user will then be presented with an image selector dialog:
I specified the appropriate image meta tags. Why isn't Facebook accepting the changes?
Once a url has been shared, Facebook's crawler, which has a user agent of
facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), will access your page and cache the meta information. To force Facebook servers to clear the cache, use the Facebook Url Debugger / Linter Tool that they launched in June 2010 to refresh the cache and troubleshoot any meta tag issues on your page.
Also, the images on the page must be publicly accessible to the Facebook crawler. You should specify absolute url's like http://example.com/yourimage.jpg instead of just /yourimage.jpg.
Adding these tags causes my page to no longer validate. How can I fix this?
You can add the necessary Facebook namespaces to your tag and your page should then pass validation:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
- → Import statement and Babel
- → Getting Comments of comments Facebook API
- → Facebook Developer API in reactjs code
- → Facebook PHP SDK - Graph Error "Authorization code has been used" on page refresh
- → How is possible to open website inside facebook mobile app like buzzfeed?
- → Laravel - set meta tag dynamically with @section
- → Do Flux (by Facebook) handle server side update with sockets
- → understanding of real example open graph protocol
- → flynsarmy-sociallogin (Facebook api) in octoberCMS - Authentication failed! Facebook returned an invalid user id
- → Open Graph data facebook
- → Putting Facebook photos on canvas, taint canvas when trying to send it toDataURL. Can I set Facebook's header for CORS?
- → OctoberCMS plugin SEO Meta Og image
- → Shopify + og:image resulting in "was not a valid URL."