14

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

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

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

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

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

4

5 回答 5

19

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

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

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

请记住，尽管 Facebook 会进行一些缓存，所以如果您已经共享了链接，那么它可能仍然“卡在”使用旧图像。

您可以使用 Facebook URL Linter 查看 Facebook 从您的网站中获得的信息。见： http: //developers.facebook.com/tools/lint/（使用 URL Linter 也会重建 Facebook 的缓存）

于 2011-08-04T14:52:08.227 回答
12

有一个 Meta-Tag 让应用程序（如 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：图像
  • OG：网址
  • OG：站点名称
  • og:admins 或 og:app_id

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

于 2011-08-04T14:53:34.947 回答
1

就像其他人回答的那样，但它只适用于我使用（https）时

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

代替

<meta property="og:image" content="http://link.to/image.png" />
于 2019-05-25T15:31:11.557 回答
0

如果你确实喜欢一个 img 但放在 css 中怎么办

#logo{
display: none; }

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

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

于 2011-08-04T14:52:22.543 回答
0

如前所述：最好将元标记与og:imageopengraph 属性一起使用。

除此之外：Facebook 并不是唯一使用 opengraph 元标记的平台。Google+ 或 Xing 也更喜欢它。不知道别人...

于 2015-03-09T15:28:57.267 回答