78

Is there any way to set a default image that appears when I share my website on Facebook? I've noticed that Facebook usually fetches the first image from the site to use as a thumbnail.

6 Answers 6

108

You need to set the open graph image meta tag:

<meta property="og:image" content="http://example.com/logo.jpg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">

For more info check the docs

9
  • 3
    I used this way and it still picks a random image from my site?
    – Rossco
    May 28, 2015 at 14:40
  • 1
    I agree - still waiting for an answer to this. Just picks some random image on my site...
    – Andy
    Jun 16, 2015 at 22:44
  • 5
    @MindaugasJačionis according to linked-in all you need is the og:image tag, maybe the image you are seeing at the moment is cached, the caching will last up to 7 days.
    – Patsy Issa
    Jul 25, 2015 at 7:50
  • 10
    @Rossco you'll need to clear facebook's cache of your website. Mar 22, 2016 at 22:54
  • 7
    -1; it's not "the facebook image meta tag", it's a protocol supported by basically all social media sites. This post left me with the impression that this approach was Facebook-specific, but further research shows me that that is not the case.
    – Mark Amery
    Sep 10, 2017 at 10:27
15

Set an og:image in the <head> of your HTML document like this:

<meta property="og:image" content="http://example.com/ogp.jpg" />

This is part of the Open Graph Protocol, respected by at least the following social media sites:

(... and probably plenty more besides.)

In addition to setting the tag above, you may also want to:

0
14
<meta property="og:image" content="http://example.com/lamb-full.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">

Image size should be be at least 200px X 200px

2
11

This my solution, it's work well:

<head>
    <!--FACEBOOK-->
    <meta property="og:image" content="https://www.website.com/logo.jpg">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1024">
    <meta property="og:image:height" content="1024">
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.website.com/"/>
    <meta property="og:title" content="Website title" />
    <meta property="og:description" content="Website description." />
<head>

You can make test with Facebook Debug site.

0
8

Facebook's servers will 'scrape' your website looking for an image to use when people share it. If you want to specify which image to use, put this in the the <head></head> section of your website:

  • <meta property="og:image" content="http://url-to-your-image.png">

Facebook may have cached a copy of the previous random image. To get facebook to fetch again:

0
<meta property="og:image" content="http://example.com/logo.jpg">
<meta name="twitter:image" content="http://example.com/logo.jpg" />

The above is all you need to update for all social link previews. To check what a preview looks like on a platform you can test your link using the tools below:

Not the answer you're looking for? Browse other questions tagged or ask your own question.