Add OpenGraph metadata for improved preview when sharing website

[PanderMusubi]

Add metadata for improved preview when sharing website. This would offer a specific title, description, image, timestamp, etc. when the website URL is shared in a website, social media or instant messaging app.

Currently in LinkedIn, the preview is

Example data to use:

<meta name="og:updated_time" property="og:updated_time" content="1714338554">
<meta name="og:site_name" property="og:site_name" content="Spyder IDE">
<meta name="og:title" property="og:title" content="Intergalactic Spyder IDE">
<meta name="og:type" property="og:type" content="website">
<meta name="og:image" property="og:image" content="https://www.spyder-ide.org/screenshot.png">
<meta name="og:image:width" property="og:image:width" content="5000">
<meta name="og:image:height" property="og:image:height" content="2617">
<meta name="og:url" property="og:url" content="https://www.spyder-ide.org/">
<meta name="og:description" property="og:description" content="the Scientific Python Development Environment">

Note to:

• create screenshot.png (crop only screen from https://www.spyder-ide.org/spyder_website_banner.webp and run optipng on it)
• use the width and height
• update_time should be updated with each website update

All this will greatly improve the preview of the website.

[CAM-Gerlach]

Hey @PanderMusubi ; I believe @conradolandia included the proper OpenGraph metadata (as you've shown) on the new Spyder site, https://github.com/spyder-ide/spyder-website , to make this work better, but if not I can transfer this issue there and I'm sure Andres will be able to do that no problem. Thanks!

[conradolandia]

Will take care of this in an upcoming PR, thanks for the heads-up!

[CAM-Gerlach]

Thanks @conradolandia ! I'll transfer this issue, as well as the others that are relevant, to the new Spyder-Website repo

[CAM-Gerlach]

Should PR #7 close this @conradolandia , or is there more work to be done here?

[conradolandia]

Yeah, this can be closed now, @CAM-Gerlach, thank you for your attention.