CODEWITHSUNDEEP
htmlfacebookfacebook-opengraph
mountainclimber11
mountainclimber11

Reputation: 1400

Default image of website when sharing on Facebook is displaying wrong

I am attempting to get my website logo to show up properly on Facebook news feeds. When I paste my site link on my news feed (share it) in Facebook and the image shows up, but the thumbnail image is just a portion of my logo. Specifically, the center portion of my logo shows up only.

My image/logo is exported via GIMP 2.8 and it is 1200 by 349 px. I made it this size because that is the closest I could come to the Facebook recommended 1200 x 650 px (or something like that).

EDIT: I am not sure if this is the best way to publicly share images, but this is exactly like my logo except for text and color: http://2imgs.com/2i/i/53d2dd5f/22d0e1223be1e43544446b27ab6b4b3c/377394be6d.f.jpg

Then when I scale the image down (in GIMP 2.8) to something that seems like it will fit, the image doesn't seem to change anything.

I am using the Open Graph Debugger here: https://developers.facebook.com/tools/

I am doing stuff like this (and many other) posts: Default website image for social sharing

Here is the head of my Index.php:

<head>
    <link href="html5reset-1.6.1.css" rel="stylesheet">
    <meta charset="utf-8" />
    <meta name="description" content="my business description here" />
    <!-- For facebook -->
    <meta property="og:image" content="http://www.example.com/imagename_w1200h349.jpg">
    <meta property="og:image:type" content="image/jpg">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="349">

    <link rel="icon" type="image/png" href="myiconpic.png" />
    <title>my business title here</title>
</head>

What am I missing? This is the first website I have built.

Upvotes: 0

Views: 3231

Answers (3)

MD Alauddin Al-Amin
MD Alauddin Al-Amin

Reputation: 92

you can test why is not fetching you site image to facebook.

Facebook crawler will 'scrape' your site search for an image to use when it is being shared. If you want to specifiy which image to use, put this in the the section of your site:

Facebook may have cached a copy of the previous random image. to change or refetch for newer image. and you can test it for your ans.

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

Upvotes: 0

mountainclimber11
mountainclimber11

Reputation: 1400

I sorted it out. I had two issues:

1) Facebook's Open Graph debugger Share Preview section doesn't refresh right when you upload a new Index.php and picture file to my host. I had to let it sit for a few minutes then refresh the page to get the preview to update.

2) I'm not sure if this is 100% true, but it worked for me: I made my image 1200 x 1200 with white canvas space above and below the logo (black). Since Facebook's recommendation is to go with 1200 x 630 pixels pictures, my solution here seems off, but it works so I am posting it.

Here is my image example that works: EDIT: (Previous link didn't work. Hopefully this one does.) http://2imgs.com/2i/i/53d3c78d/6719aed50ed239e3331cdeeadc572cf1/577394be6d.f.jpg

Upvotes: 0

andyrandy
andyrandy

Reputation: 74004

Make sure the Open Graph image is always public, that image does not seem to be available for Facebook.

About the correct sizes: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#images

Upvotes: 1

Related Questions