Agregue dinámicamente una meta descripción basada en la ruta en Angular

Basta ya de investigar por todo internet porque llegaste al lugar correcto, poseemos la respuesta que buscas pero sin problemas.

Solución:

Primero cree un SEOService o algo como a continuación:

import Injectable from '@angular/core'; 
import  Meta, Title  from '@angular/platform-browser';

@Injectable()
export class SEOService 
  constructor(private title: Title, private meta: Meta)  


  updateTitle(title: string) 
    this.title.setTitle(title);
  

  updateOgUrl(url: string) 
    this.meta.updateTag( name: 'og:url', content: url )
  

  updateDescription(desc: string) 
    this.meta.updateTag( name: 'description', content: desc )
  

Después de inyectar el servicio SEOS en su componente (app.component.ts preferiblemente), establezca metaetiquetas y título en el método OnInit

ngOnInit() 
    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'),
       mergeMap((route) => route.data)
      )
      .subscribe((event) => 
        this._seoService.updateTitle(event['title']);
        this._seoService.updateOgUrl(event['ogUrl']);
        //Updating Description tag dynamically with title
        this._seoService.updateDescription(event['title'] + event['description'])
      ); 
    

Luego configura tus rutas como

       
        path: 'about', 
        component: AboutComponent,
        data: 
          title: 'About',
          description:'Description Meta Tag Content',
          ogUrl: 'your og url'
         
      ,

En mi humilde opinión, esta es una forma clara de lidiar con las metaetiquetas. Puede actualizar etiquetas específicas de Facebook y Twitter más fácilmente.

Solución Angular 6+ y RxJS 6+ para un título establecido dinámicamente en el cambio de ruta

Si / cuando actualiza a Angular 6, esta es la solución allí.

Este servicio:

• Actualice el meta título en el cambio de ruta.
• Opción de anular el título por cualquier motivo que desee.

Cree / cambie su SEO / meta servicio a lo siguiente.

import  Injectable  from '@angular/core';
import  Title, Meta  from '@angular/platform-browser';
import  Router, NavigationEnd, ActivatedRoute  from '@angular/router';
import  filter, map, mergeMap  from 'rxjs/operators';

@Injectable(
    providedIn: 'root'
)
export class MetaService 
    constructor(
        private titleService: Title,
        private meta: Meta,
        private router: Router,
        private activatedRoute: ActivatedRoute
    )  

    updateMetaInfo(content, author, category) 
        this.meta.updateTag( name: 'description', content: content );
        this.meta.updateTag( name: 'author', content: author );
        this.meta.updateTag( name: 'keywords', content: category );
    

    updateTitle(title?: string) 
        if (!title) 
            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'),
                    mergeMap((route) => route.data)).subscribe((event) => 
                        this.titleService.setTitle(event['title'] + ' );
         else 
            this.titleService.setTitle(title + ' 
    

Importa tu servicio y llámalo al constructor.

app.component.ts

constructor(private meta: MetaService) 
    this.meta.updateTitle();

Y esto todavía requiere formatear rutas como esta.

Ruta file.ts

 
    path: 'about', 
    component: AboutComponent,
    data: 
      title: 'About',
      description:'Description Meta Tag Content'
     
  ,

Espero que esto te ayude a ti y a otras personas que buscan actualizar el título / meta dinámicamente en Angular 6.

Title y Meta son proveedores que se introdujeron en Angular 4 y se supone que hacen esto tanto en el lado del servidor como en el del cliente.

Para crear o actualizar title etiqueta y description metaetiqueta, es:

import  Meta, Title  from '@angular/platform-browser';

...

constructor(public meta: Meta, public title: Title, ...)  ... 

...

this.meta.updateTag( name: 'description', content: description ); 
this.title.setTitle(title);

valoraciones y reseñas

Recuerda que tienes permiso de parafrasear si te ayudó.

---

---

Utiliza Nuestro Buscador