🐛 Fix OG Image issues of the website/app

atapas / webapis-playground

The Web APIs Playground is a project to showcase the JavaScript Web APIs with examples and demonstrations. Client-side JavaScript APIs are here to help with providing wrapper functions for many low-level tasks.

https://webapis-playground.vercel.app/

MIT License

299 stars 72 forks source link

🐛 Fix OG Image issues of the website/app #25

Open atapas opened 3 years ago

atapas commented 3 years ago

Describe the bug There is an issue with the OG image. It doesn't appear correctly when we share the web app on social media.

To Reproduce Steps to reproduce the behavior:

Go to 'https://webapis-playground.vercel.app/'
Share this URL on social media.
The OG image doesn't appear

Expected behavior Platforms to Test

Twitter
Kinked In

Screenshots

Desktop (please complete the following information):

OS: [e.g. iOS]
Browser [e.g. chrome, safari]
Version [e.g. 22]

Smartphone (please complete the following information):

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

Additional context The fix must work for,

Twitter
Linked In
Reddit
Facebook

jjung99 commented 3 years ago

Hi, I would like to try to fix it if you are okay with it :)

atapas commented 3 years ago

Hi, I would like to try to fix it if you are okay with it :)

I don't mind at all. Thanks for taking it up. Let's do it.

jjung99 commented 3 years ago

It seems like it is working well. I don't see the issue. Here is the test screenshot.

atapas commented 3 years ago

@jjung99 I also see that 😊. Have you tested the OG works well with Facebook and Reddit? If not, we still have chances to fix. Please let me know, I will close it accordingly.

Btw.. you still get the test contribution credit. Thanks for the effort.

atapas commented 3 years ago

@jjung99 I also see that 😊. Have you tested the OG works well with Facebook and Reddit? If not, we still have chances to fix. Please let me know, I will close it accordingly.

Btw.. you still get the test contribution credit. Thanks for the effort.

Hey @jjung99 did you get a chance to test?

jjung99 commented 3 years ago

Here are Reddit and Facebook test screenshot. reddit_test

So it doesn't work on Reddit. and the image should be shown on Facebook like a Twitter screenshot?

atapas commented 3 years ago

Here are Reddit and Facebook test screenshot.

So it doesn't work on Reddit. and the image should be shown on Facebook like a Twitter screenshot?

That's right.

atapas commented 2 years ago

Yeah, @jjung99 Would you please fix tat?

jjung99 commented 2 years ago

Is there a way to test it locally? I updated few lines. branch issue-25

atapas commented 2 years ago

@jjung99 You can commit your changes, Create a PR. In that PR you will find a preview URL generated to see and test your changes.

varunsood2003 commented 2 years ago

Hey @atapas is this issue still open ? I'm new to open source and currently learning, I would love to work with you and help you