我正在尝试实现页面上多张图片分享至Facebook的功能,就像这篇StackOverflow文章中所述。该文章指出,要分享多张图片,需要包含多个og:image标签。我按照这些说明操作了,您可以从此页面中看到。
每个页面上的图像都有自己的Facebook链接。由于我指定了三个og:image标签,我本以为无论您点击哪个链接,都可以选择页面上的三个图像之一。但事实是,您没有选择权;只提供了三个图像中的第二个。
我认为这可能是缓存问题,因此我使用了Facebook Sharing Debugger tool来查看Facebook的视角。 Link Preview仅显示一个图像,而og:image类别仅列出一个图像,这使我感到怀疑。然而,当我点击Show All Raw Tags链接时,我发现Facebook确实拾取了我的所有三个og:image标签:
如果查看页面源代码,您会看到我已经包含了三个og:image标签,一个用于页面的每个图像:
<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"/>
我认为这可能是缓存问题,因此我使用了Facebook Sharing Debugger tool来查看Facebook的视角。 Link Preview仅显示一个图像,而og:image类别仅列出一个图像,这使我感到怀疑。然而,当我点击Show All Raw Tags链接时,我发现Facebook确实拾取了我的所有三个og:image标签:
<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" />
然后我点击了页面底部的通过API爬取链接,这是我得到的内容:
{
"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"
}
正如您所看到的,image键由我在og:image标签中指定的三个图像数组组成,因此似乎应该可以工作,但事实并非如此。
您有什么想法来使用户能够从页面上显示的三个图像中选择一个图像吗?