Question

I am trying to enable multiple images on a page to be shared to Facebook, as described in this StackOverflow post. The post indicates that in order to share multiple images, you need to include multiple og:image tags. I followed these instructions, as you can see from this page.

If you view the source for the page, you will see that I have included three og:image tags, one for each of the page's three images:

<meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/stickers/ePT4B0td-sticker.jpg"/>
	    <meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/posters/ePT4B0td-poster.jpg"/>
	    <meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/secondPosters/ePT4B0td-secondPoster.jpg"/>

Each image on the page has its own Facebook link. Since I had specified three og:image tags, I would have expected that no matter which link you click, you would get to choose one of the three images on the page. Instead, you have no choice; only the second of the three images is provided.

I figured that this might be a caching problem, so I used the Facebook Sharing Debugger tool to see what Facebook was seeing. The Link Preview shows just one image, and the og:image category lists just one image, which made me suspicious. When I clicked on the Show All Raw Tags link, though, I discovered that Facebook was indeed picking up all three of my og:image tags:

<meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/stickers/ePT4B0td-sticker.jpg" />
<meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/posters/ePT4B0td-poster.jpg" />
<meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/secondPosters/ePT4B0td-secondPoster.jpg" />

I then clicked on the Scrape via API link at the bottom of the page, and this is what I got:

{
  "url": "https://senatorforaday.emkinstitute.org/senator/ePT4B0td/joe-levinger",
  "type": "website",
  "title": "Senator Joe Levinger | Edward M Kennedy Institute for the United States Senate",
  "image": [
    {
      "url": "http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/stickers/ePT4B0td-sticker.jpg"
    },
    {
      "url": "http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/posters/ePT4B0td-poster.jpg"
    },
    {
      "url": "http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/secondPosters/ePT4B0td-secondPoster.jpg"
    }
  ],
  "description": "Visit the EMK Institute",
  "site_name": "Edward M Kennedy Institute for the United States Senate",
  "updated_time": "2016-07-11T19:51:09+0000",
  "id": "1101245249919459"
}

As you can see, the image key consists of an array of the three images specified in my og:image tags, so it seems as if this should be working, but it's not.

Any ideas as to what I need to do to provide the user with the ability to select one image from among the three that are displayed on the page?

Answer 1

您的图片为1600 x 630，至少为200 x 200，但与40:21 recommended by Facebook不匹配。您的1600幅图片should be 840 in height。

Using Facebook Sharer to Share Multiple Images

1 个答案: