CODEWITHSUNDEEP
javascriptreactjsfacebook-opengraphgatsby
alberto montalesi
alberto montalesi

Reputation: 1028

Gatsby: sharing on facebook -> image is too small

I have a blog built with Gatsby and I am trying to add sharing functionality to the posts.

I know that facebook requires a certain size for the image to be added on top of the title in the sharing card, instead of on the side of the title.

When I check on the facebook debugger i see that the share card looks fine (big image on top of the title). You can check it here https://developers.facebook.com/tools/debug/og/object/?q=https%3A%2F%2Fkeen-leakey-7a99fa.netlify.com%2Ffamous-vietnamese-fruits%2F

When i try to share the post the share card is actually smaller.

I thought it could be a problem with the og:image:width and height tag not being present in the meta but after adding them they don't seem to do anything.

These are some of the properties i have in my meta

 { property: `og:url`, content: url },
 { property: `og:type`, content: `image/png` },
 { property: `og:image:width`, content: `1200` },
 { property: `og:image:height`, content: `630` },
 { property: `og:image`, content: image },
 { property: `og:title`, content: title },
 { property: `og:description`, content: metaDescription },

Any idea on what could be the problem?

Upvotes: 0

Views: 436

Answers (1)

Armin
Armin

Reputation: 132

The Facebook Crawler tries to follow your og:url Tag - which points to https://elingos.com - and there is no image defined - it should work when you fix the URL!

I checked it by using a Preview Plugin and then comparing that Image with the direct source!

Edit - a better Way to Debug this URLs:

Also in the Future, you can make use of the Facebook Sharing Debugger here you can see under "redirect-path" that its going to another URL :)

Upvotes: 4

Related Questions