当分享我的URL时，Facebook分享者如何选择图像和其他元数据?

当使用Facebook Sharer时，Facebook将为用户提供使用从源中提取的几个图像中的一个作为他们的链接预览的选项。如何选择这些图像，以及如何确保页面上的任何特定图像都是总是包含在此列表中?

338320 次浏览
小开

在head中放入以下标记:

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

从http://www.facebook.com/share_partners.php

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

小开

旧方法，不再有效:

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

报告新方法，也不奏效:

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

在我执行它的第一天，它随机地断断续续地工作，从那以后就再也没有工作过。

Facebook linter页面，一个检查你的页面的实用工具，报告一切都是正确的，并显示我选择的缩略图…只是share.php页面本身似乎不能正常工作。肯定是Facebook的一个bug，他们显然不愿意修复，因为我在他们的系统中看到的关于这个问题的每个bug报告都说已经解决或修复了。

小开

当你在Facebook上分享时，你必须在标题部分添加你的html下一个元标签:

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

就是这样!

添加按钮，因为你应该根据FB告诉你。

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

小开

这对我来说是有用的:我把想要的缩略图放在标签的右边，让它太小而看不见。

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

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

此外，似乎Facebook缓存的缩略图在你的页面，并不总是检查它的新。尝试将此添加到您网站的另一个页面，您将看到它工作。

小开
最佳答案

当我的页面被分享时，我如何告诉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将查看您的页面内容，并从您的页面中选择符合其共享图像标准的图像:图像必须至少200px * 200px，最大纵横比为3:1，格式为PNG、JPEG或GIF。

我可以指定多个图像以允许用户选择一个图像吗?

是的，你只需要按你想要的顺序添加多个图像元标签。然后用户将看到一个图像选择器对话框:
Facebook Image Selector

.

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

一旦一个url被共享，Facebook的爬虫(它有一个facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)的用户代理)将访问你的页面并缓存元信息。为了强制Facebook服务器清除缓存，使用他们2010年6月推出的Facebook Url调试器/ Linter工具来刷新缓存并排除页面上的任何元标签问题。

此外，页面上的图像必须对Facebook爬虫公开访问。你应该指定像http://example.com/yourimage.jpg这样的绝对url，而不仅仅是/yourimage.jpg。

我可以用Javascript或jQuery等客户端代码更新这些元标签吗? 不。就像搜索引擎爬虫一样，Facebook scraper不执行脚本，所以无论页面下载时出现什么元标签，都是用于图像选择的元标签

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

你可以添加必要的Facebook名称空间到你的标签，然后你的页面应该通过验证:

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

安全HTTPS

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

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

http://www.facebook.com/sharer.php?s=100& p[标题]= IS MY TITLE&p[url]= THIS IS MY SUMMARY&p[url]=http://www.MYURL.com&和p[图片][0]= http://www.MYURL.com/img/IMAGEADDRESS

元标签与Facebook的开发者(如/send按钮)一起工作，其他Open Graph信息也是如此。所以如果你使用Facebook的一个实际元素，比如评论之类的，它们都将与Open Graph相关。

更新:有两种使用共享器的方法*注意查询字符串
中的?s和?u值 1 ==> string: http://www.facebook.com/sharer.php?s + content from above
>将从字符串中提取信息 2 ==> http://www.facebook.com/sharer.php?u=url where url等于实际url
将抓取url值
中提供的页面 你可以在这里测试测试值:https://developers.facebook.com/tools/debug

小开

我有这个问题，并解决了它与手册84的建议。使用400x400px的图像效果很好，而我的小图像从未出现在共享器中。

注意，Facebook推荐最小200px的正方形图像作为og:image标签:https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags

小开

截至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原始链接。

.

.
小开

我无法让Facebook从特定的帖子中选择正确的图像，所以我做了这个页面上概述的事情:

https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts < a href = " 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中，让它改变元内容，不管你为那篇文章改变了什么。这是一个混乱的解决方案，但它有效。

小开

为了改变标题，描述和图像，我们需要在头部标签下添加一些元标签。

步骤1:
在head tag

下添加meta标签 
<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 < / p >

在你提到标签的文本框(例如http://www.test.com/)中添加你的URL。

.点击DEBUG按钮

它的完成。

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

在上面的url, u =你的网站链接

享受! !

小开

使用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

提交答案