共享我的URL时，Facebook Sharer如何选择图像和其他元数据？

393

使用Facebook Sharer时，Facebook将为用户提供使用从源中拉出的几张图像中的一张作为其链接预览的选项。如何选择这些图像，以及如何确保页面上的任何特定图像始终包含在此列表中？

facebook  facebook-opengraph  facebook-sharer 
— 桑普森
source
使用meta属性时确实可以工作，但是它是无效的html，我觉得很奇怪！尝试通过验证程序运行它，您将看到。这让我感到困惑，为什么他们在地球上却无法使用有效的HTML？
1
— cope360 2010年
3
提示-进行更改后..通过棉短绒运行你的页面，Facebook将更新缩略图等该页面developers.facebook.com/tools/lint
我发现以下文章也非常有用：如何自定义要共享的URL，文本和IMG
— J0ANMM

Answers:

593

共享页面时，如何告诉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="https://stackoverflow.com/myimage.jpg"/>。如果两者都不存在，Facebook将查看您页面的内容，并从您的页面中选择符合其共享图像标准的图像：图像必须至少为200px x 200px，最大纵横比为3：1，并且在PNG中， JPEG或GIF格式。

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

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

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

共享网址后，用户代理为的Facebook搜寻器facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)将访问您的页面并缓存元信息。要强制Facebook服务器清除缓存，请使用它们在2010年6月启动的Facebook Url Debugger / Linter Tool刷新缓存并解决页面上的任何meta标签问题。

另外，页面上的图像必须可供Facebook搜寻器公开访问。您应该指定绝对网址，例如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">
— ka
source
1
它看起来的另一个位置：（<link rel="apple-touch-icon" href="...">这就是它获得SO图像的方式）
— Yarin 2012年
2
@Yarin我不确定这是真的。StackOverflow设置了image_src属性，这是它正在使用的属性。apple-touch-icon的文件名不同，没有使用。
— bkaid 2012年
3
我可以选择图像顺序吗？就我而言，其他图像出现在meta标签的图像之前。
— Vicenrele
23
最小图片大小现在为200x200px。
— Tr1stan 2013年
1
！我已经将img的大小设置为300px，现在看来可以了。感谢@ Tr1stan
— Urs
37

当您共享Facebook时，您必须在html的头部添加下一个meta标签： 

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

就是这样！

根据FB告诉您的内容添加按钮。

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

— 马蒂亚斯
source
28

从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标签的样式。

— 安东尼奥·马克斯
source
p[images][0]正是我所需要的。og标签可用于共享同一张图片，但我需要共享同一页面上的多张图片。
— thekingoftruth 2013年
4
这应该是新的“接受的答案”-如此简单明了。谢谢你，队友。
— 迈克（Mike）
安东尼奥，您是否有上面显示的内容的源链接？我想看看这developers.facebook.com但无法找到任何东西，除了这个。请帮忙。
— Mr_Green 2014年
@Mr_Green就是这样。此功能已“弃用”，但现在又回到了官方文档。无论如何，我相信我的回答涵盖了其基本设置。
— Antonio Max
@AntonioMax请解释s=100您的帖子是什么？
— Mr_Green 2014年
12

根据我的经验，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

meta标签可与Facebook开发人员的“喜欢/发送”按钮配合使用，其他Open Graph信息也适用。因此，如果您使用Facebook的实际元素之一（如评论等），那么所有这些元素都将与Open Graph结合在一起。

更新：有两种使用共享器的方式*注意查询字符串
1中 的？s与？u值= => 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

— 杰森·莱登
source
非常有帮助。谢谢！：D
— 亚伦·格雷
有什么合法的方法可以在另一个网站中使用该共享程序从URL获取内容？我对Facebook API和其他内容了解不多...
— Lyth
尝试使用URL选项。如果页面上有OG标签，FB将对其进行刮擦。在此处测试您要使用的页面：developers.facebook.com/tools/debug
— Jason Lydon 2013年
11

旧方法，不再起作用：

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

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

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

在我实施它的第一天，它就随机运行了，此后一直没有运行。

Facebook linter页面是检查您页面的实用工具，它报告一切正确，并显示我选择的缩略图……只是share.php页面本身似乎无法正常工作。必须是Facebook上的一个bug，他们显然不在乎修复，因为我在系统中看到的有关此问题的每个bug报告都说已解决或已修复。

— 西奥
source
我也有这个问题。linter报告没有错误并正确显示我的图像，但是当我单击站点上的“共享”按钮时，共享界面中绝对没有图像。
— 路加·格里菲斯
image_src不再适用于Facebook，但是某些服务仍在使用它（电报客户端等）
— Andres SK
10

要更改标题，描述和图像，我们需要在head标签下添加一些元标签。

步骤1：
在head标签下添加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

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

完成。

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

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

请享用 ！！！！

— 高拉夫123
source
调试器很有帮助。
— konsolebox'6
1

这是对我有用的方法：我将所需的缩略图图像放在标签后的页面上，使其变得太小而看不到。

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

我尚未测试过高度0和宽度0，但是它可能仍然可以工作。.这不能保证用户会选择此图像。

同样，Facebook似乎会在页面上缓存缩略图，而并不总是检查它是否有新缩略图。尝试将其添加到网站上的其他页面，您会发现它起作用。

— 丹尼尔·伯纳尔
source
1
标签之后 –您是说：“ BODY标签之后”吗？
— 亚历克西斯·威尔克2014年
是的，我相信这就是他们的意思。我很久以前在一个网站上这样做，但是使用style="display:none;"而不是将其设置为1x1像素。
— 2014年
1

使用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
— 基图
source
0

我无法让Facebook从特定帖子中选择合适的图片，所以我做了本页概述的内容：

/webapps/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语句的硬编码，以获取针对该帖子所做的任何更改的meta内容。这是一个混乱的解决方案，但它可以工作。

— 米歇尔·格拉瑟
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.