Question

在Facebook上发布指向网站的链接（此外，还有其余的数据），您会看到一个缩略图，或者可以选择缩略图。这些是来自HTML的标签。

我一直认为使用CSS将我的徽标作为h1标签内的背景图像是一种好习惯。我将h1标签设置为返回主页的链接，并使用{text-indent：-9999px}之类的内容隐藏标题文本，留下一个可爱的语义HTML标题。如果你想看一下，这里是我网站的链接：http://tempertemper.net

这个问题是因为它是背景图像而被忽视了。

仅为此目的在HTML顶部发布自定义是一个好主意，并将其隐藏在页面的旁边吗？我不知道，似乎有点凌乱。我可以把标签放在h1里面，但标识不是正确的形状，因为它是为特定目的而设计的。

也许有一个用于此目的的元标记，或者是否有一种技术可以强制FB拉出未正常加载的特定图像？有没有人对此有任何想法或重要提示？

Answer 1

是的，您可以设置元标记，以便Facebook知道要选择哪个图像。

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

具体来说，它是og:image属性，它将告诉Facebook的链接共享脚本选择该图像作为其缩略图。

请记住，虽然Facebook会进行一些缓存，但如果您已经分享了链接，那么一旦它仍然“卡住”使用旧图像。

您可以使用Facebook URL Linter查看Facebook从您的网站中退出的情况。请参阅：http://developers.facebook.com/tools/lint/（使用URL Linter也将重建Facebook的缓存）

Answer 2

有一个元标记让应用程序（如FB）知道您想要拍摄特定图像而不是让用户选择一个。

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

对于Facebook，还有另一种方法可以通过 Open Graph协议来实现这一目标。

您需要通过在html-Tag中添加og-Namespace来准备您的网站以使用og：标签：

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

然后你可以使用og：Meta-Tags这样：

<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：标题
OG：类型
OG：图像
OG：URL
OG：SITE_NAME
og：admins OR og：app_id

您可以在以下位置找到更多信息：https://developers.facebook.com/docs/opengraph/

Answer 3

如果你喜欢img但是在css中

#logo{
display: none; }

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

图像不会显示在页面上，但我不知道facebook是否会看到图像

Answer 4

正如已经说过的那样：最好使用带有og:image opengraph属性的元标记。

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

Answer 5

就像其他人回答的那样，但这仅对我有效（https）

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

代替

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

Facebook链接缩略图

5 个答案: