Facebook Sharer 在分享我的 URL 时如何选择图片和其他元数据？答案

【问题标题】：How does Facebook Sharer select Images and other metadata when sharing my URL?Facebook Sharer 在分享我的 URL 时如何选择图片和其他元数据？
【发布时间】：2010-11-11 10:15:54
【问题描述】：

使用 Facebook 共享器时，Facebook 将向用户提供使用从源中提取的几张图片中的一张作为链接预览的选项。如何选择这些图片？如何确保我页面上的任何特定图片始终包含在此列表中？

【问题讨论】：

使用meta属性确实可以，但是html无效，我觉得很奇怪！尝试通过验证器运行它，你会看到。这让我感到困惑，为什么他们不能让它与有效的 html 一起使用？？
见developers.facebook.com/docs/opengraph opengraphprotocol.org/schema" ...
提示 - 进行更改后.. 通过 linter 运行您的页面，facebook 将更新该页面的缩略图等 developers.facebook.com/tools/lint
我发现下面这篇文章也很有用：How to Customize which URL, Text and IMG to Share

标签： facebook facebook-opengraph facebook-sharer

【解决方案1】：

当我的页面被分享时，我如何告诉 Facebook 使用哪张图片？

Facebook 有一组open-graph meta tags，它通过查看这些open-graph meta tags 来决定显示哪个图像。

Facebook 图片的关键之一是：

<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" />

它应该出现在页面顶部的<head></head> 标记内。

如果这些标签不存在，它将寻找它们指定图像的旧方法：<link rel="image_src" href="/myimage.jpg"/>。如果两者都不存在，Facebook 将查看您页面的内容并从您的页面中选择符合其共享图像标准的图像：图像必须至少为 200 像素 x 200 像素，最大纵横比为 3:1，并且为 PNG， JPEG 或 GIF 格式。

我可以指定多张图片让用户选择一张图片吗？

是的，您只需要按照您希望它们出现的顺序添加多个图像元标记。然后用户将看到一个图像选择器对话框：

我指定了适当的图像元标记。为什么 Facebook 不接受这些更改？

一旦 URL 被分享，Facebook 的爬虫（用户代理为facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)）将访问您的页面并缓存元信息。要强制 Facebook 服务器清除缓存，请使用 Facebook Url Debugger / Linter Tool 他们launched in June 2010 刷新缓存并解决您页面上的任何元标记问题。

此外，页面上的图片必须可供 Facebook 爬虫公开访问。您应该指定绝对 URL，例如 http://example.com/yourimage.jpg 而不仅仅是 /yourimage.jpg。

我可以使用 Javascript 或 jQuery 等客户端代码更新这些元标记吗？ 不会。与搜索引擎爬虫非常相似，Facebook 抓取工具不执行脚本，因此下载页面时出现的任何元标记都是用于图像选择的元标记。

添加这些标签会导致我的页面不再有效。我该如何解决这个问题？

您可以将必要的 Facebook 命名空间添加到您的标签中，然后您的页面应该通过验证：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">

【讨论】：

它看起来的另一个地方：<link rel="apple-touch-icon" href="...">（这就是它获取 SO 图像的方式）
@Yarin 我不确定这是不是真的。 StackOverflow 具有 image_src 属性集，这是它正在使用的属性集。 apple-touch-icon 的文件名不同且未被使用。
我可以选择图片的顺序吗？在我的例子中，另一个图像出现在元标记图像之前。
最小图像尺寸现在为 200x200px。
哇！我已将 img 的大小设置为 300px，现在它似乎可以工作了。谢谢@Tr1stan

【解决方案2】：

当你为 Facebook 分享时，你必须在你的 html 中添加到 head 部分的下一个元标记：

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

就是这样！

根据FB告诉你的添加按钮。

您需要的所有信息都在www.facebook.com/share/

【讨论】：

【解决方案3】：

截至 2013 年，如果您使用 facebook.com/sharer.php (PHP)，您可以简单地制作任何按钮/链接，例如：

<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>

链接查询参数：

p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing 
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook

很简单：你不需要任何 js 或其他设置。只是一个 HTML 原始链接。以您想要的任何方式设置 A 标签的样式。

【讨论】：

p[images][0] 正是我所需要的。 og 标签用于共享同一张图片，但我需要从同一页面共享多张图片。
这应该是新的“公认答案”——如此简单明了。谢谢你，伙计。
Antonio，你有上面显示的源链接吗？我试图在developers.facebook.com 中查看此内容，但除了this 之外找不到任何内容。请帮忙。
@Mr_Green 就是这样。此功能已被“弃用”，但现在又回到了官方文档中。无论如何，我相信我的回答涵盖了它的基本设置。
@AntonioMax 请在您的帖子中解释一下s=100 是什么？

【解决方案4】：

根据我的经验，http://www.facebook.com/sharer.php 不使用元标记。它使用您传递的字符串。见下文。

http://www.facebook.com/sharer.php?s=100&p[title]=THIS是我的标题&p[summary]=这是我的总结&p[url]=http://www.MYURL.com&&p[images][0]=http://www.MYURL.com/img/IMAGEADDRESS

元标记与 Facebook 的开发人员喜欢/发送按钮一起使用，其他 Open Graph 信息也是如此。因此，如果您使用 Facebook 的实际元素之一，例如 cmets 等，这将与 Open Graph 相关。

更新：有两种使用共享器的方法 * 请注意查询字符串中的 ?s 与 ?u 值
1 ==> STRING： http://www.facebook.com/sharer.php?s + 上面的内容
~~> 将从字符串中提取信息。
2 ==> URL: http://www.facebook.com/sharer.php?u=url 其中 url 等于实际 url
~~> 会抓取url值中提供的页面
~~> 你可以在这里测试测试值：https://developers.facebook.com/tools/debug

【讨论】：

是否有任何合法的方式可以在另一个网站上使用该共享器从 url 获取内容？我不太了解 facebook API 和其他东西......
尝试使用 URL 选项。如果页面有OG标签，FB会刮掉它们。在此处测试您要使用的页面：developers.facebook.com/tools/debug

【解决方案5】：

在head中加入如下标签：

<link rel="image_src" href="/path/to/your/image"/>

来自http://www.facebook.com/share_partners.php

至于在没有这个标签的情况下它选择什么作为默认值，我不确定。

【讨论】：

【解决方案6】：

旧方法，不再有效：

<link rel="image_src" href="http://yoururl/yourimage"/>

报告了新的方法，也不起作用：

<meta property="og:image" content="http://yoururl/yourimage"/>

在我实施它的第一天，它随机断断续续地工作，从那以后就完全没有工作了。

Facebook linter 页面是一个检查您的页面的实用程序，它报告说一切都正确并显示了我选择的缩略图……只是 share.php 页面本身似乎没有运行。必须是 Facebook 的一个错误，他们显然不想修复一个错误，因为我在他们的系统中看到的关于此问题的每个错误报告都说已解决或已修复。

【讨论】：

我也有这个问题。 linter 没有报告错误并正确显示我的图像，但是当我单击站点上的共享按钮时，共享界面中绝对没有图像。
image_src 不再适用于 Facebook，但某些服务仍在使用它（电报客户端等）

【解决方案7】：

要改变Title、Description和Image，我们需要在head标签下添加一些meta标签。

第 1 步：
在 head 标签下添加元标签

<html>
<head>
    <meta property="og:url" content="http://www.test.com/" />
    <meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
    <meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
    <meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

下一步：
点击以下链接
https://developers.facebook.com/tools/debug

在您提到标签的文本框中添加您的 URL（例如 http://www.test.com/）。点击调试按钮。

完成了。

您可以在这里验证https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

在上面的网址中，u = 您的网站链接

享受吧！！！！

【讨论】：

调试器很有帮助。

【解决方案8】：

为了安全的 HTTPS

<meta property="og:image:secure_url" content="https://image.path.png" />

【讨论】：

【解决方案9】：

使用 facebook feed 对话框而不是共享对话框来显示自定义图像

例子：

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description

【讨论】：

【解决方案10】：

我遇到了这个问题，并按照 manuel-84 的建议解决了这个问题。使用 400x400 像素的图片效果很好，而我较小的图片从未出现在共享器中。

请注意，Facebook 建议使用至少 200 像素的方形图片作为 og:image 标签：https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags

【讨论】：

【解决方案11】：

这对我有用：我将所需的缩略图图像放在标签之后的页面上，使其太小而无法看到..

<img src="imagename.jpg" width="1" height="1" />

我还没有用高度 0 和宽度 0 测试它，但它可能仍然可以工作。这并不能保证用户会选择这个图像。。

另外，Facebook 似乎缓存了您页面上的缩略图，并且并不总是检查它是否有新的。尝试将其添加到您网站上的另一个页面，您会发现它有效。

【讨论】：

标签之后 – 你的意思是：“在 BODY 标签之后”？
是的，我相信这就是他们的意思。我很久以前在一个网站上做过这个，但使用style="display:none;" 而不是将其设置为 1x1 像素。

【解决方案12】：

我无法让 Facebook 从特定帖子中选择正确的图片，所以我按照本页所述进行了操作：

https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts

换句话说，是这样的：

<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
  <meta content='http://urlofyourimage.png' property='og:image'/>
 </b:if>

基本上，您会将 if 语句硬编码到您网站的 HTML 中，以使其更改您为该帖子所做的任何更改的元内容。这是一个混乱的解决方案，但它有效。

【讨论】：