Snapshot of Page does not include image

[cesandoval]

The page preview should also include the image snapshot.

Right now it only includes text

[ooookai]

According to this Facebook official article:
https://developers.facebook.com/docs/sharing/best-practices

• Open Graph Stories Images appear in a square format. Image ratios for these apps should be 600 x 600 px.
• Non-open Graph Stories Images appear in a rectangular format. You should use a 1.91:1 image ratio, such as 600 x 314 px.

The dimensions of this snapshot screenshot above are 840 × 550

I think we are not using the Open Graph Stories Images, so we have to modify the screenshot image ratio to 1.91:1, which is good for giving users a consistent screenshot image size too.

🎅🏻🎅🏻🎅🏻

---

[cesandoval]

Ok, sounds good, so if we are going to use 1.91X1.0, then I should resize the images to 1,050.5X550? Do you think that will work then?

I can make all the changes!

I am in Mexico for another week! But we should hang out once I am back!

[cesandoval]

@ooookai I've been experimenting with the image ratios a little bit, but it seems that the problem might be how we are embedding the pic in the document. For example, embedding this snapshot does not look like this one in the DOM. I think the way the DOM is constructed makes FB to not fetch it

what do you think?

[cesandoval]

@ooookai although it works with Twitter

[cesandoval]

@ooookai I just doubled checked. You are right it is a problem of the dimensions. I will put together a fix.

[cesandoval]

@ooookai I made the changes so the images are now 1.91x1.0. If I try to embed the image from the PWD link, it still doesn't work.

But when I upload manually to S3 instead, it does work.

Also when I paste the actual image from S3, it does work

Perhaps is an issue with the CSS or HTML in our page? Or maybe it is the way it is being uploaded to S3?

@ooookai What do you think?

[ooookai]

After some study...
I couldn't find any specific bug or problem with the code we're using. 😳
It's complicated since the official docs/suggestion isn't clear and change frequently.
In the meantime, The online forums or article also has the same problems as official docs.

I knew this problem, So the one I used for the snapshot page was copied from the 'medium.com' website and modified by myself, which should work perfectly.😰

However, you may give these two things a quick try.

1. add mega og:image:type

<meta property="og:image:type" content="image/jpeg" /> 

2. change the url from snap.image from 'https' to 'http'

---

You could use this tool from Facebook to test if it works.
https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fpaintingwithdata.com%2Fsnap%2F959f8745ec084b84&locale=en_US

[ooookai]

I don't know if we can just send a quick bug report to Facebook.
https://developers.facebook.com/support/bugs/

[cesandoval]

@ooookai Let me give it a try, push to the server, etc! Sounds good! Thanks for checking it out!

[cesandoval]

@ooookai where is <meta property="og:image:type" content="image/jpeg" />
In which file?

[ooookai]

@cesandoval Just saw your question! 😉

@ooookai where is <meta property="og:image:type" content="image/jpeg" />
In which file?

The file path: views/snap.jade

[cesandoval]

@ooookai but which line of code, there are a lot of <meta tags there