html - Facebook - 更改缩略图

标签 html facebook image facebook-like thumbnails

我需要像缩略图一样更改 facebook,我试过了

<link rel="image_src" href="thisurl" />

还有这个

<meta property="og:image" content="thisurl"/>

我后来意识到这需要放在头上,但是由于代码的结构,我无法在那里修改并仍然决定我需要哪个 url(我无法访问我拥有的变量图片在里面),我可以这样修改

<html>
<head></head>
<body>
...
modify in here
...
</body>
</html>

我还尝试在我可以更改的区域使用 javascript 创建一个元标记,但这不会影响它

有没有人知道我可以告诉 facebook 我想要哪个图像作为缩略图而无需修改 head 元素内部的方法

最佳答案

缩略图应该像你说的那样放在标题中,使用 rel="image_src"或 opengraph 标签。

在您的 html 正文中指定缩略图

如果 Facebook 无法从标题中获取您的缩略图,它会尝试从内容中获取。它通常采用它喜欢的第一张图片,因此如果你想强制使用不包含在页面中的特定缩略图,请在标签后面放置一个不可见的图片(使用内联 css display:none):

<img src=”http://www.website.com/images/thumbnail.jpg” alt=”thumbnail” height=”200″ width=”250″ style=”display:none” />

这样做,请记住:

  • 避免在缩略图名称中使用空格(FB 不能很好地管理空格)
  • 使用 jpg(FB 不喜欢 png)
  • 使用正确的尺寸(见下文)

检查缩略图的尺寸

Facebook 不喜欢所有尺寸的缩略图。最重要的是高度和宽度的比例应该小于1/3。所以 40 和 100 可以,但 30 和 100 不行。此外,Facebook 最近似乎更喜欢两个维度至少为 200px 的图像(但不要忘记 1/3 规则)。

清理 Facebook 缓存

此外,您应该在每次使用 Facebook 调试工具(以前称为 Facebook Linter)进行测试之前清理 Facebook 缓存: http://developers.facebook.com/tools/debug

在表单字段中插入您的 url,然后按调试。您将强制 Facebook 覆盖有关您的链接的信息。有时您认为仍然有问题,但这只是因为它使用了错误的页面缓存版本。

关于 Facebook Linter,请注意(根据 OGraph 文档):

You can update the attributes of your page by updating your page's tags. Note that og:title and og:type are only editable initially - after your page receives 50 likes the title becomes fixed, and after your page receives 10,000 likes the type becomes fixed. These properties are fixed to avoid surprising users who have liked the page already. Changing the title or type tags after these limits are reached does nothing, your page retains the original title and type.

关于html - Facebook - 更改缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12182491/

相关文章:

Html/Css - 如何让图像拉伸(stretch)容器的 100% 宽度然后在其上显示另一个图像?

java - 如何在 SWT 中重用图像

html - 基础 - 垂直居中对齐

facebook - Open Graph 对象调试器与站点的 Facebook 共享不匹配

html - 拥有 P 标签不会插入其他类

javascript - 使用 Javascript 将动态内容共享到 Facebook 新闻提要的最简单方法?

javascript - 包括用于 Facebook 评论框的 JavaScript SDK

php - 使用 PHP 从数据库中获取 Blob 并将其用于 HTML 标记

html - SVG : I need an SVG file that reads 'TEST' and auto-expands 100%

javascript - 如何将文本定位在三 Angular 形 div 的底部?