Facebook链接缩略图

Question

Facebook链接缩略图

14

当在Facebook（Google+和其他社交媒体也适用）发布一个网站链接时，会出现缩略图供选择。这些是HTML中的标签。

我一直认为将我的徽标作为CSS中h1标签的背景图像是一个好习惯。我让h1标签成为首页的链接，并使用{text-indent: -9999px}隐藏标题文本，留下一个优美的语义化HTML标题。如果您想看看我的网站，请单击以下链接：http://tempertemper.net 问题在于，由于它是背景图像，因此被忽略了。

在HTML顶部仅为此目的添加自定义是否是个好主意呢？我不知道，似乎有点混乱。我可以将标签放在h1内部，但是徽标的形状不正确，因为它是为特定目的而设计的。

也许有一个用于此目的的标签，或者也许有一种技术可以强制FB拉取通常未加载的特定图像？有人有任何想法或顶级提示吗？

- Martin

可能是Facebook帖子链接图像的重复问题（不完全相同，但答案将是一样的）。 - Anomie

在这里你可以看到它是如何工作的！我使用PHP + jQuery构建了它。源代码可供下载。希望你喜欢！http://lab.leocardz.com/facebook-link-preview-php--jquery/ - Leonardo Cardoso

5个回答

12

有一个元标签可以让应用程序（如FB）知道你想要特定的图片，而不是让用户选择。

<link rel="image_src" href="http://link.to/image.png" />

对于Facebook，还有另一种方法可以使用Open Graph协议来实现这一点。

您需要通过在HTML标签中添加og命名空间来为使用og标签准备您的网站：

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:og="http://ogp.me/ns#">

然后您可以像这样使用og:元标记：

<meta property="og:title" content="Any title here" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://link.to/image.png" />

对于 Facebook 来说，这六个 OG Meta 标签是必需的：

og:title
og:type
og:image
og:url
og:site_name
og:admins 或 og:app_id

您可以在此处找到更多信息和更多 OG 类型： https://developers.facebook.com/docs/opengraph/

- scube

1

像其他人回答的一样，但只有当我使用（https）时才能正常工作。

<meta property="og:image" content="https://link.to/image.png" />

而不是

<meta property="og:image" content="http://link.to/image.png" />

- Hiệp Nguyễn

0

如果你想用CSS来实现类似于标签的效果，该怎么做呢？

#logo{
display: none; }

<img id="logo" src="yourlogohere.jpg">

图片在页面上无法显示，但我不知道Facebook是否能看到该图片

- Icallitvera

确实，Facebook会查看图片并始终选择页面显示的第一张图片，无论它是否被显示。所以对我来说这很有效！ - Michel C. a.k.a Doctor I-T

0

如前所述：最好使用具有og:image opengraph属性的元标记。

除此之外：Facebook并不是唯一使用opengraph元标记的平台。Google+或Xing也更喜欢它。其他平台我不确定...

- Robin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Calvin · Accepted Answer

是的，您可以设置元标记(meta tag)以便 Facebook 知道选择哪张图片。

请参阅：https://developers.facebook.com/docs/opengraph/

具体而言，它是 og:image 属性，它将告诉 Facebook 的链接分享脚本选择该图片作为缩略图。

但要注意，Facebook 会进行一些缓存，因此如果您已经分享过该链接，则可能仍然“卡在”使用旧图片上。

您可以使用 Facebook URL Linter 查看 Facebook 从您的网站获取了哪些内容。请参阅：http://developers.facebook.com/tools/lint/（使用 URL Linter 也将重新构建 Facebook 的缓存）