I am using Angular 13. I have set default meta tag in index.html file. I have successfully updated the meta tag using the updateTag event but It works fine in the inspect element but does not update the view source page. I want to set dynamic information in meta tag using API call. When I check by inspect, it will show updated data but when I share the link on Facebook it will not reflect updated data.
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule, Meta } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {CoreModule } from './core/core.module';
import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
],
imports: [
CommonModule,
BrowserModule,
AppRoutingModule,
HttpClientModule,
CoreModule,
],
providers: [Meta]
bootstrap: [AppComponent]
})
export class AppModule { }
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title Example</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="canonical" href="https://example.com/" />
<meta name="robots" content="index, follow" />
<meta name="description"
content="Lorem Ipsum is simply dummy text of the printing and typesetting industry." />
<meta name="keywords" content="test example, lorem ipsum">
<meta property="og:url" content="https://example.com/" />
<meta property="og:site_name" content="ExampleSite" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Lorem Ipsum is simply dummy text." />
<meta property="og:description"
content="Lorem Ipsum is simply dummy text of the printing and typesetting industry." />
<meta property="og:image" content="https://example.com/assets/logo/socialshare.png" />
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body>
<app-root>
</app-root>
</body>
</html>
service.ts
import { Injectable,Inject } from '@angular/core';
import { Title, Meta, MetaDefinition } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { environment } from 'src/environments/environment';
@Injectable({
providedIn: 'root'
})
export class SeoService {
constructor(
private metaTagService: Meta,
private title: Title,
private router: Router,
) {
}
updateTitle(title: string){
this.title.setTitle(title);
}
updateTags(metaTags: MetaDefinition[]){
metaTags.forEach(m=> this.metaTagService.updateTag(m));
}
updateTag(obj :any){
this.metaTagService.updateTag(obj)
}
}
Update tag on test.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Service } from 'src/app/service.service';
import { environment } from 'src/environments/environment';
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private router: Router,
private seo: Service
) {
}
ngOnInit(): void {
this.updateTags()
}
updateTags(){
this.seo.updateCanonicalUrl(environment.RouterBaseUrl + this.router.url)
this.seo.updateTitle(test + ' - Profile')
this.seo.updateTags([
{ name: 'description', content: 'Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book'},
{ property: 'og:url', content: environment.RouterBaseUrl + this.router.url},
{ property: 'og:title', content: test + ' - Profile'},
{ property: 'og:description', content: 'Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book'},
{ property: 'og:image', content: https://example.com/assets/images/test.png },
]);
}
}