test og tags

src/app/post/components/post-details/post-details.component.ts

 import { Component, ElementRef, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
-import { DomSanitizer, Title } from '@angular/platform-browser';
+import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { RouterListenerService } from '../../../services/routerListener.service';
 import { Post } from '../../models/post.model';
@@ -22,6 +22,7 @@ export class PostDetailsComponent implements OnInit {
     private readonly elementRef: ElementRef,
     private renderer: Renderer2,
     private title: Title,
+    private meta: Meta,
   ) {}
 
   ngOnInit(): void {
@@ -33,6 +34,13 @@ export class PostDetailsComponent implements OnInit {
       this.postService.getPost(postSlug).subscribe((post) => {
         this.post = post.posts[0];
         this.post.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.post.html);
+
+        this.meta.addTag({ property: 'og:title', content: this.post.title });
+        // this.meta.addTag({ property: 'og:image', content: this.post.feature_image });
+        this.meta.addTag({
+          property: 'og:image',
+          content: 'https://resin-dev.apps.grandlyon.com/assets/logos/logo_europe.png',
+        });
       });
     }
     // add ghost JS
@@ -41,6 +49,9 @@ export class PostDetailsComponent implements OnInit {
     this.renderer.appendChild(this.elementRef.nativeElement, script);
     // set page title
     this.title.setTitle(this.post.title + " | Réseau des acteurs de l'inclusion numérique de la métropole de Lyon");
+
+    this.meta.updateTag({ property: 'og:title', content: this.post.title });
+    this.meta.updateTag({ property: 'og:image', content: this.post.feature_image });
   }
 
   public backToPosts(): void {