All pages should have OG metadata, for social sharing

[joeytwiddle]

When people share links in social media, some of them are very plain, and do not become an attractive card with an image.

For example in Telegram (and WhatsApp), there is no image, just a boring blue text link:

What I wish for: When sharing on social media, there should be enough metadata provided for the service to generate an attractive thumbnail with a title.

For example, something like this:

Even if we don't use an image specific to the conference, any image is better than no image. (Eventyay's logo would be good enough, if no other image was available.)

---

This page on CSS-Tricks explains that the following tags are needed:

<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
<!-- These also work for Twitter -->

These tools can help to test if it's working:

• https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Feventyay.com%2Fe%2Ffa96ae2c%2Fschedule

• https://cards-dev.twitter.com/validator

I tested with this link: https://eventyay.com/e/fa96ae2c/schedule But ideally this should be done for all pages. Because a user may share any page. And it's (almost?) always desirable to make the shared link clear and attractive.

[iamareebjamal]

Related https://github.com/fossasia/open-event-frontend/issues/6106

[rohit-raje-786]

@joeytwiddle I test the link https://eventyay.com/e/fa96ae2c/schedule on https://cards-dev.twitter.com/validator but it is displaying this-

[rohit-raje-786]

@joeytwiddle Can i work on this issue?

[joeytwiddle]

@rohit-raje-786 It's not really my decision, but I have no objections. :smile:

Some things to consider:

• How can we write it so that a page can opt-in to showing a better image in future, if it has one?

• Perhaps we can add the code to head.hbs and use this.model.openGraphImage if it is available.

[tanay123456789]

working on this issue.

[spy-1234]

Hey, I would like to work on this issue

[mariobehling]

Please go ahead.

[therohit777]

Hey , wanna work on this issue please assign it to me

[github-actions[bot]]

We don't assign issues to external contributors. Please comment that you're working on the issue after checking that no one else is, and then send a pull request for it. Thank You!

[therohit777]

ok