docs: add Open Graph image and update screenshots

Author: debba

README.md

@@ -34,7 +34,7 @@
 
 ## Screenshots
 
-<img src="docs/assets/screenshot-1.png" height="50%" width="45%"></img> <img src="docs/assets/screenshot-2.png" width="45%"></img>
+<img src="docs/assets/og_image.png" width="90%"></img>
 
 ## Architecture
 

docs/assets/og_image.png

@@ -6,6 +6,16 @@
     <meta name="description"
           content="Storytel Player for Desktop - Unofficial cross-platform desktop application for playing Storytel audiobooks">
     <meta name="keywords" content="storytel, audiobook, desktop, player, windows, mac, linux">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="Storytel Player for Desktop">
+    <meta property="og:description" content="Unofficial cross-platform desktop application for playing Storytel audiobooks on Windows, macOS and Linux.">
+    <meta property="og:image" content="assets/og_image.png">
+    <meta property="og:image:width" content="1280">
+    <meta property="og:image:height" content="640">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Storytel Player for Desktop">
+    <meta name="twitter:description" content="Unofficial cross-platform desktop application for playing Storytel audiobooks on Windows, macOS and Linux.">
+    <meta name="twitter:image" content="assets/og_image.png">
     <title>Storytel Player for Desktop</title>
     <link rel="icon" type="image/png" href="favicon.png">
     <link rel="stylesheet" href="style.css">