Set opengraph tags directly in the front end

frontend/src/app/app-routing.module.ts

@@ -290,7 +290,10 @@ let routes: Routes = [
         children: [
           {
             path: ':id',
-            component: BlockComponent
+            component: BlockComponent,
+            data: {
+              ogImage: true
+            }
           },
         ],
       },

frontend/src/app/app.module.ts

@@ -10,6 +10,7 @@ import { EnterpriseService } from './services/enterprise.service';
 import { WebsocketService } from './services/websocket.service';
 import { AudioService } from './services/audio.service';
 import { SeoService } from './services/seo.service';
+import { OpenGraphService } from './services/opengraph.service';
 import { SharedModule } from './shared/shared.module';
 import { StorageService } from './services/storage.service';
 import { HttpCacheInterceptor } from './services/http-cache.interceptor';
@@ -36,6 +37,7 @@ import { CapAddressPipe } from './shared/pipes/cap-address-pipe/cap-address-pipe
     WebsocketService,
     AudioService,
     SeoService,
+    OpenGraphService,
     StorageService,
     EnterpriseService,
     LanguageService,

frontend/src/app/components/app/app.component.ts

@@ -2,6 +2,7 @@ import { Location } from '@angular/common';
 import { Component, HostListener, OnInit, Inject, LOCALE_ID, HostBinding } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 import { StateService } from 'src/app/services/state.service';
+import { OpenGraphService } from 'src/app/services/opengraph.service';
 import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
@@ -16,6 +17,7 @@ export class AppComponent implements OnInit {
   constructor(
     public router: Router,
     private stateService: StateService,
+    private openGraphService: OpenGraphService,
     private location: Location,
     tooltipConfig: NgbTooltipConfig,
     @Inject(LOCALE_ID) private locale: string,

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) {