Image or Logo Link


(Emiliano Achaval) #1

Can anybody tell me how can I have an image or logo that fits when you post a link on Facebook or twitter. I’m attaching an image to show what I mean.


(Matt Wilson) #2

If I’m not mistaken, by default if there is no image in the post, or site, Facebook pulls in the next closest thing it can find (author image, favicon, etc.) Try comparing your site in an RSS reeder like feedly to see what I mean, it should be identical.

If there is an image though, it should pull that by default. This is where it gets a bit obtuse in my opinion, as if there are multiple images, it can sometimes pull the first one, (good), or sometimes pull none (bad Facebook).

Either way, YMMV, but I tend to lean on the RSS feed for comparing, as it’s easier to see the most likely viewing method by multiple sites.


(Matt Wilson) #3

Looking at your site, the picture you attached shows your header, which is an image for sure, but also appears as such to Facebook…I’m assuming this is not desirable for you.


(Matt Wilson) #4

An example of how my blog looks to places like Facebook, feedly, any rss reeder, etc. It pulls in my author img from typed when there is no image in the post. This is not ideal as its not sized accordingly.

Might try to have an icon that does not show on the site, but loads for this if you want it to appear that way…sized smaller (not sure of the appropriate dimensions, but it appears to be 16:9 ratio. make that < div > load when pulling your links into Facebook.

Head [here][1] to find out how to code it properly.

—Matt
[1]: https://developers.facebook.com/tools/debug/


(Emiliano Achaval) #5

Thank you @dream!! Now I have something to check and improve. Appreciate the help!! Aloha


(Emiliano Achaval) #6

You are right, it is my header… Thank you for taking the time to help me. Aloha


(Matt Wilson) #7

No no, thank you as I learned something new in the process!

Here’s some further reading on the proper “og” tags to help ensure this doesn’t happen any longer: Facebook Sharing Checklist