如果用户在状态消息中添加链接,Facebook会从网站加载哪些内容

Question

我正在开发一个新的网站ATM,它具有传统的图像+ div和文本结构.当用户在Facebook状态更新中添加指向此站点的链接时,Facebook仅显示该链接,并且不显示该站点的文本或图像.知道如果用户添加了状态消息的链接,我想知道Facebook从网站加载哪些内容？选择了哪些html标签,如何更改HTML以便Facebook加载预览图像和文本.

其他网站:

我的网站:

Answer 1

迟到总比不到好...

它在Facebook文档中:

为了确保始终正确填充预览,您应该将下面显示的标记添加到HTML代码中的元素中.如果您没有标记您的页面,Facebook Share将获取标签中指定的页面标题,并将根据页面正文中显示的第一个文本创建摘要说明.将从您页面上的可用图像中选择缩略图列表.

您可以通过向页面中的元素添加以下元标记来控制Facebook共享使用的确切标题,说明和缩略图:

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

因此,一个示例新闻故事可能具有以下内容:

<meta property="og:title" content="Smith hails 'unique' Wable legacy"/>
<meta property="og:description" content="John Smith claims beautiful football is the main legacy of Akhil Wable's decade at the club. " />
<meta property="og:image" content="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />

如图所示,og:title包含预览标题,og:description包含预览摘要,og:image包含预览图像.请确保没有任何内容字段包含任何HTML标记,因为它将被删除.

标题和说明标签是任何预览的最低要求,因此请务必包含这两个标签.

该OG:图像是网址出现在饲料故事图像.缩略图的宽度和高度必须至少为50像素,并且不能超过130x110像素.高度除以宽度和宽度除以高度(w/h,h/w)的比率不能超过3.0.例如,将不显示126x39像素的图像,因为宽度除以高度的比率大于3.0(126/39 = 3.23).图像将按比例调整大小.