当前位置： 文江博客话题详情

Facebook 链接缩略图

发布于 2024-11-27 22:45:23 字数 498 浏览 1 评论 0原文

当在 Facebook 上发布某个网站的链接（Google+ 和其他网站也算在内）时，您会收到一个缩略图或可供选择的缩略图。这些是 HTML 中的标签。

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

问题在于，因为它是被忽略的背景图像。

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

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

原文

When posting a link to a website in Facebook (Google+ and the rest count too) you're given a thumbnail, or selection of thumbnails to choose from. These are tags from the HTML.

I've always been of the opinion that it was good practice to make my logo a background image inside a h1 tag using CSS. I make the h1 tag a link back to the home page and hide the header text with something like {text-indent: -9999px}, leaving a lovely semantic HTML header. Here's a link to my site if you want a look: http://tempertemper.net

The problem with this is that as it's a background image it's overlooked.

Would it be a good idea to post a custom at the top of the HTML for this purpose only, and hide it off the side of the page? I don't know, seems a bit messy. I could just put the tag inside the h1, but the logo wouldn't be the right shape as it's designed for a specific purpose.

Maybe there's a meta tag for this purpose or maybe there's a technique to force FB to pull a specific image that isn't loaded normally? Does anyone have any ideas or top tips for this?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

堇年纸鸢 2024-12-04 22:45:23

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

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

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

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

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

Yes, you can set a meta tag so that Facebook knows which image to pick.

See: https://developers.facebook.com/docs/opengraph/

Specifically, it is the og:image property, and it will tell Facebook's link share script to choose that image as its thumbnail.

Keep in mind though that Facebook does some caching, so if you've already shared the link once it may still be "stuck" on using the older image.

You can see whats Facebook getting out of your website by using the Facebook URL Linter. See: http://developers.facebook.com/tools/lint/ (The use of the URL Linter will also rebuild Facebook's cache)

回复 原文
羁〃客ぐ 2024-12-04 22:45:23

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

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

对于 Facebook，还有另一种方法可以通过使用开放图谱协议来实现这一目标。

您需要准备您的网站以使用 og: 标签，方法是在 html 标签中添加 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 元标签：

  • og :title
  • og:type
  • og:image
  • og:url
  • og:site_name
  • og:admins OR og:app_id

您可以在以下位置找到更多 og: 类型的附加信息：https://developers.facebook.com/docs/opengraph/

There is a Meta-Tag to let the Application (like FB) know that you want a specific image taken rather than let the user choose one.

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

For Facebook there is also an other Way to achieve this by using Open Graph protocol.

You need to prepare your Website for using og: Tags by adding the og-Namespace in your html-Tag:

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

Then you are able to use the og: Meta-Tags like this:

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

For Facebook this six og Meta-Tags are required:

  • og:title
  • og:type
  • og:image
  • og:url
  • og:site_name
  • og:admins OR og:app_id

You can find additional information an more og: types at: https://developers.facebook.com/docs/opengraph/

回复 原文
熊抱啵儿 2024-12-04 22:45:23

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

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

而不是

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

Like others have answered but it only works for me when i use (https)

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

Instead of

<meta property="og:image" content="http://link.to/image.png" />
回复 原文
夏天碎花小短裙 2024-12-04 22:45:23

如果您确实喜欢 img 但在 css 中放置

#logo{
display: none; }

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

图像不会显示在页面上但我不知道 facebook 是否会看到该图像怎么办

what if you did like a img but in css put

#logo{
display: none; }

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

the image would not show up on the page but i don't know if facebook would see the image

回复 原文
客…行舟 2024-12-04 22:45:23

正如已经说过的：最好是将元标记与 og:image opengraph 属性一起使用。

除此之外：Facebook 并不是唯一使用 opengraph 元标签的平台。 Google+ 或 Xing 也更喜欢它。不太清楚其他人的情况...

As already said: Best would be to use the metatag with the og:image opengraph property.

In addition to that: Facebook is not the only platform using the opengraph metatags. Also Google+, or Xing are preferring it. Not sure about others...

回复 原文
~没有更多了~

关于作者

染柒℉

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

苦中寻乐

文章 0 评论 0

lueluelue

文章 0 评论 0

嗼ふ静

文章 0 评论 0

王权女流氓

文章 0 评论 0

与花如笺

文章 0 评论 0

残酷

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文