【问题标题】:How does tumblr get the page thumbnail image when posting a link?tumblr 发布链接时如何获取页面缩略图?
【发布时间】:2016-06-19 20:42:51
【问题描述】:

当我在 tumblr 上分享链接时,它有时会抓取该页面的博文图片。例如,如果我分享如下内容:

http://www.smartpassiveincome.com/income-reports/my-may-2016-monthly-income-report/

它会抓取这张图片的缩略图:

http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg

如何让 tumblr 抓取图片?是否需要包含一些元标记?

搜索源码此图出现3次:

<meta property="og:image" content="http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg"/>

<meta name="twitter:image" content="http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg"/>

<header style="background-image: url('http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg')">

有谁知道它使用的是哪一个并且可以解释选择如何抓取图像的过程是什么?

原始页面为:http://www.patchesoft.com/learning-linux-how-to-find-what-version-of-linux-youre-running-command-uname-and-lsb_release/

但是当我将它发布到 Tumblr 时,它并没有抓取特色图片。

【问题讨论】:

  • 您是否尝试过像示例中那样添加元数据? cdn.smartpassiveincome.com/wp-content/uploads/2016/03/…>。这就是 facebook 抓取正确图像 (developers.facebook.com/docs/sharing/webmasters) 的方式,所以也许 tumblr 也可以使用它!
  • 嗨,我在页面上包含了 og:image 元标记。 i1.wp.com/www.patchesoft.com/wp-content/uploads/2016/06/…" /> 但 Tumblr 仍然没有抓取这张图片。

标签: tumblr


【解决方案1】:

这些元属性应该让你的图片在 tumblr 上显示

<meta property="og:image" content="http://example.com/ogp.jpg" /> <!-- Required -->
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />

要了解更多信息,请访问http://ogp.me/

您的网站似乎设置了这些属性,当我将您网站的网址放在 tumblr 上时,我得到了这个...

【讨论】:

猜你喜欢
  • 1970-01-01
  • 2015-03-23
  • 2012-07-12
  • 2014-10-31
  • 1970-01-01
  • 2020-08-28
  • 1970-01-01
  • 1970-01-01
  • 2013-10-03
相关资源
最近更新 更多