Universe Explorer: raster social card

frontend/src/app/services/opengraph.service.ts

@@ -26,7 +26,7 @@ export class OpenGraphService {
   ) {
     // save og:image tag from original template
     const initialOgImageTag = metaService.getTag('property=\'og:image\'');
-    this.defaultImageUrl = initialOgImageTag?.content || '/resources/universe/universe-explorer-logo.svg';
+    this.defaultImageUrl = initialOgImageTag?.content || '/resources/universe/universe-explorer-card.png';
     this.router.events.pipe(
       filter(event => event instanceof NavigationEnd),
       map(() => this.activatedRoute),

frontend/src/index.mempool.html

@@ -19,14 +19,16 @@
 
   <!-- META -->
   <meta name="description" content="Universe Explorer is the live protocol-aware Bitcoin explorer for the Bitcoin Universe ecosystem." />
-  <meta property="og:image" content="/resources/universe/universe-explorer-logo.svg" />
-  <meta property="og:image:width" content="512" />
-  <meta property="og:image:height" content="512" />
+  <meta property="og:image" content="/resources/universe/universe-explorer-card.png" />
+  <meta property="og:image:type" content="image/png" />
+  <meta property="og:image:width" content="1200" />
+  <meta property="og:image:height" content="630" />
+  <meta property="og:image:alt" content="Universe Explorer, the protocol-aware Bitcoin explorer" />
   <meta property="og:description" content="Universe Explorer is the live protocol-aware Bitcoin explorer for the Bitcoin Universe ecosystem." />
-  <meta name="twitter:card" content="summary">
+  <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="Universe Explorer">
   <meta name="twitter:description" content="Universe Explorer is the live protocol-aware Bitcoin explorer for the Bitcoin Universe ecosystem." />
-  <meta name="twitter:image" content="/resources/universe/universe-explorer-logo.svg">
+  <meta name="twitter:image" content="/resources/universe/universe-explorer-card.png">
   <!-- END META -->
 
   <!-- FAVICONS -->