Add 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.