Default website image for social sharing

Question

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.

Patsy Issa · Accepted Answer · 2022-01-10T09:50:31.773

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

edited Jan 10 '22 at 09:50

answered Oct 28 '13 at 10:28

Patsy Issa

11,113
4
55
74

3

I used this way and it still picks a random image from my site? – Rossco May 28 '15 at 14:40
1

I agree - still waiting for an answer to this. Just picks some random image on my site... – Andy Jun 16 '15 at 22:44
By random do you mean every other time it changes or is it the same picture but not the one you set in the meta tags? – Patsy Issa Jun 17 '15 at 06:15
For facebook this helped, however in linkedin if I try to add website as a link to my profile experiences it shows first img tag source image. :) – Mindaugas Jul 24 '15 at 17:52
5

@MindaugasJačionis according to [linked-in](https://developer.linkedin.com/docs/share-on-linkedin) 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 '15 at 07:50
@MindaugasJačionis I've had similar problems with caching too, like Kitler said. Try clearing your browser cache and see what happens – Daniel Jul 26 '15 at 04:49
10

@Rossco you'll need to [clear facebook's cache](https://developers.facebook.com/tools/debug/) of your website. – full_prog_full Mar 22 '16 at 22:54
7

-1; it's not *"the facebook image meta tag"*, it's a protocol supported by [basically all social media sites](https://stackoverflow.com/a/29067915/1709587). 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 '17 at 10:27
@MarkAmery you could follow your bio's advice and improve a 4 year old answer :) – Patsy Issa Sep 10 '17 at 16:22

Mark Amery · Answer 2 · 2017-09-10T10:30:16.110

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:

Facebook (see https://developers.facebook.com/docs/sharing/webmasters/#images)
Twitter (see https://dev.twitter.com/cards/getting-started#opengraph)
LinkedIn (see https://developer.linkedin.com/docs/share-on-linkedin)
Google+ (see https://developers.google.com/+/web/snippet/)
Pinterest (see https://developers.pinterest.com/docs/rich-pins/reference/)

(... and probably plenty more besides.)

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

Clear the social media platform's cached version of your page's image (e.g. by using the platform's developer tools), so that you can see the change reflected immediately. For example, you can do this for Facebook, at https://developers.facebook.com/tools/debug/
Add additional "structured properties" to specify things like the image's width or height, using the syntax described at http://ogp.me/#structured. This is described as a "best practice" by Facebook at https://developers.facebook.com/docs/sharing/best-practices#images.

score 14 · Answer 3 · edited Jun 25 '15 at 14:52

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

edited Jun 25 '15 at 14:52

josliber

43,891
12
98
133

answered Jun 25 '15 at 12:15

Raina Vinod

141
1
3

Nice. What is the default for all sites that share the link? Is this just Facebook api? – JoshYates1980 Apr 14 '16 at 15:22
1

@JoshYates1980 see http://stackoverflow.com/questions/10397510/do-services-other-than-facebook-use-open-graph for more sites using open graph – Felix Geenen Sep 20 '16 at 17:34

score 11 · Answer 4 · answered Feb 06 '18 at 08:36

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.

score 8 · Answer 5 · edited Sep 10 '17 at 10:29

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:

https://developers.facebook.com/tools/debug/

score 0 · Answer 6 · answered Dec 21 '21 at 20:20

<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:

Twitter https://cards-dev.twitter.com/validator
Facebook/Instagram: https://developers.facebook.com/tools/debug
LinkedIn: https://www.linkedin.com/post-inspector/

Default website image for social sharing

6 Answers6

Linked

Related