html - Facebook 链接缩略图

Question

在 Facebook(Google+ 和其他网站)中发布指向网站的链接时，您会得到一个缩略图，或者可供选择的缩略图。这些是来自 HTML 的标签。

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

问题在于，由于它是背景图片，因此被忽略了。

仅出于此目的在 HTML 顶部发布自定义内容并将其隐藏在页面的一侧是否是个好主意？不知道，好像有点乱我可以将标签放在 h1 内，但 Logo 的形状不正确，因为它是为特定目的而设计的。

也许有一个用于此目的的元标记，或者也许有一种技术可以强制 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 的缓存)