How does tumblr get the page thumbnail image when posting a link?

Question

When I share a link on tumblr, it sometimes will grab the page's blog post image. For example, if I share something like:

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

It'll grab this image for it's thumbnail:

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

How do you make tumblr grab the image? Is there some meta tag you need to include?

Searching the source code this image appears three times:

<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')">

Does anyone know which one it uses and could explain what the process for choosing how to grab the image is?

The original page is: http://www.patchesoft.com/learning-linux-how-to-find-what-version-of-linux-youre-running-command-uname-and-lsb_release/

But when I post it into Tumblr, it doesn't grab the featured image.

Answer 1

These meta properties should get your image to show on 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" />

To learn more head over to http://ogp.me/

Your site seems to have these properties set and I get this when I put url of your site on tumblr...