使用 Facebook Sharer 时，Facebook 将为用户提供使用从源中提取的几张图片中的一张作为链接预览的选项。这些图像是如何选择的，如何确保我页面上的任何特定图像始终包含在此列表中？
问问题
335536 次
12 回答
597
当我的页面被分享时，我如何告诉 Facebook 使用哪张图片？
Facebook 有一组开放图元标记，它通过查看这些标记来决定显示哪个图像。
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 服务器清除缓存，请使用他们在 2010 年 6 月推出的Facebook Url Debugger / Linter Tool来刷新缓存并解决您页面上的任何元标记问题。
此外，页面上的图像必须可供 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">
于 2011-10-02T01:09:07.620 回答
38
当您为 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/
于 2010-10-18T00:59:39.737 回答
29
截至 2013 年，如果您使用的是 facebook.com/sharer.php (PHP)，您可以简单地制作任何按钮/链接，例如：
<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo urlencode(YOUR_TITLE);?>&p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&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 标签的样式。
于 2013-10-15T18:05:18.913 回答
13
将以下标签放入head：
<link rel="image_src" href="/path/to/your/image"/>
来自http://www.facebook.com/share_partners.php
至于在没有这个标签的情况下它选择什么作为默认值，我不确定。
于 2009-07-16T15:38:42.933 回答
13
根据我的经验，http://www.facebook.com/sharer.php不使用元标记。它使用您传递的字符串。见下文。
http://www.facebook.com/sharer.php?s=100&p[title]=这是我的标题&p[summary]=这是我的总结&p[url]= http://www.MYURL.com&&p[images][ 0]=http://www.MYURL.com/img/IMAGEADDRESS
元标记与 Facebook 的开发人员喜欢/发送按钮一起使用，其他 Open Graph 信息也是如此。因此，如果您使用 Facebook 的实际元素之一，例如评论等，这将与 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
于 2013-01-30T17:14:39.690 回答
11
旧方式，不再有效：
<link rel="image_src" href="http://yoururl/yourimage"/>
报告新方法，也不起作用：
<meta property="og:image" content="http://yoururl/yourimage"/>
在我实施它的第一天，它随机地断断续续地工作，从那以后就完全没有工作了。
Facebook linter 页面是一个检查您的页面的实用程序，它报告一切都是正确的，并且确实显示了我选择的缩略图......只是 share.php 页面本身似乎没有运行。必须是 Facebook 的一个错误，他们显然不想修复一个错误，因为我在他们的系统中看到的关于这个问题的每个错误报告都说已解决或已修复。
于 2010-09-02T11:39:12.740 回答
10
要更改 Title、Description 和 Image，我们需要在 head 标签下添加一些元标签。
第 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 = 您的网站链接
请享用 ！！！！
于 2014-02-20T11:41:42.440 回答
2
用于安全 HTTPS
<meta property="og:image:secure_url" content="https://image.path.png" />
于 2012-12-28T11:12:54.767 回答
2
使用 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
于 2017-04-04T10:01:08.633 回答
1
这对我有用：我将所需的缩略图图像放在标签之后的页面上，并使其太小而无法看到..
<img src="imagename.jpg" width="1" height="1" />
我没有用高度 0 和宽度 0 测试它，但它可能仍然可以工作.. 这并不能保证用户会选择这个图像..
此外，Facebook 似乎缓存了您页面上的缩略图并且并不总是检查它是否有新的..尝试将其添加到您网站上的另一个页面，您会发现它有效。
于 2011-04-30T18:15:38.080 回答
1
我遇到了这个问题，并用 manuel-84 的建议解决了这个问题。使用 400x400 像素的图像效果很好，而我的较小图像从未出现在共享器中。
请注意，Facebook 建议至少 200 像素的方形图像作为 og:image 标签： https ://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags
于 2013-05-23T17:54:19.187 回答
0
我无法让 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>
基本上，您将在您网站的 HTML 中硬编码一个 if 语句，以使其更改您为该帖子所做的任何更改的元内容。这是一个混乱的解决方案，但它有效。
于 2013-10-24T05:50:13.237 回答