Set opengraph tags directly in the front end

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

@@ -0,0 +1,61 @@
+import { Injectable } from '@angular/core';
+import { Meta } from '@angular/platform-browser';
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
+import { filter, map, switchMap } from 'rxjs/operators';
+import { combineLatest } from 'rxjs';
+import { StateService } from './state.service';
+import { LanguageService } from './language.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class OpenGraphService {
+  network = '';
+  defaultImageUrl = '';
+
+  constructor(
+    private metaService: Meta,
+    private stateService: StateService,
+    private LanguageService: LanguageService,
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+  ) {
+    // save og:image tag from original template
+    const initialOgImageTag = metaService.getTag("property='og:image'");
+    this.defaultImageUrl = initialOgImageTag?.content || 'https://mempool.space/resources/mempool-space-preview.png';
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationEnd),
+      map(() => this.activatedRoute),
+      map(route => {
+        while (route.firstChild) route = route.firstChild;
+        return route;
+      }),
+      filter(route => route.outlet === 'primary'),
+      switchMap(route => route.data),
+    ).subscribe((data) => {
+      if (data.ogImage) {
+        this.setOgImage();
+      } else {
+        this.clearOgImage();
+      }
+    });
+  }
+
+  setOgImage() {
+    const lang = this.LanguageService.getLanguage();
+    const ogImageUrl = `${window.location.protocol}//${window.location.host}/render/${lang}/preview${this.router.url}`;
+    this.metaService.updateTag({ property: 'og:image', content: ogImageUrl });
+    this.metaService.updateTag({ property: 'twitter:image:src', content: ogImageUrl });
+    this.metaService.updateTag({ property: 'og:image:type', content: 'image/png' });
+    this.metaService.updateTag({ property: 'og:image:width', content: '1024' });
+    this.metaService.updateTag({ property: 'og:image:height', content: '512' });
+  }
+
+  clearOgImage() {
+    this.metaService.updateTag({ property: 'og:image', content: this.defaultImageUrl });
+    this.metaService.updateTag({ property: 'twitter:image:src', content: this.defaultImageUrl });
+    this.metaService.updateTag({ property: 'og:image:type', content: 'image/png' });
+    this.metaService.updateTag({ property: 'og:image:width', content: '1000' });
+    this.metaService.updateTag({ property: 'og:image:height', content: '500' });
+  }
+}

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

@@ -20,11 +20,13 @@ export class SeoService {
   setTitle(newTitle: string): void {
     this.titleService.setTitle(newTitle + ' - ' + this.getTitle());
     this.metaService.updateTag({ property: 'og:title', content: newTitle});
+    this.metaService.updateTag({ property: 'twitter:description', content: newTitle});
   }
 
   resetTitle(): void {
     this.titleService.setTitle(this.getTitle());
     this.metaService.updateTag({ property: 'og:title', content: this.getTitle()});
+    this.metaService.updateTag({ property: 'twitter:description', content: this.getTitle()});
   }
 
   setEnterpriseTitle(title: string) {