change - Añadir dinámicamente meta descripción basada en ruta en Angular

meta tags angular 4

Question

Estoy usando Angular 5 para construir un pequeño sitio web tipo folleto. Hasta ahora, tengo mis rutas configuradas y el título de la página cambia dinámicamente según la ruta activada. Conseguí este trabajo usando las instrucciones en este blog: https://toddmotto.com/dynamic-page-titles-angular-2-router-events

Actualmente estoy almacenando mis rutas y títulos en app.module.ts como tal:

imports: [
    BrowserModule,
    RouterModule.forRoot([
      { 
        path: '''', 
        component: HomeComponent,
        data: {
          title: ''Home''
        }
      },
      { 
        path: ''about'', 
        component: AboutComponent,
        data: {
          title: ''About''
        } 
      },
      { 
        path: ''products-and-services'', 
        component: ProductsServicesComponent,
        data: {
          title: ''Products & Services''
        }  
      },
      { 
        path: ''world-class-laundry'', 
        component: LaundryComponent,
        data: {
          title: ''World Class Laundry''
        }  
      },
      { 
        path: ''contact'', 
        component: ContactComponent,
        data: {
          title: ''Contact''
        }  
      },
      { 
        path: ''**'', 
        component: NotFoundComponent,
        data: {
          title: ''Page Not Found''
        }  
      }
    ])
  ],

También me gustaría almacenar mis meta descripciones allí, si las agrego bajo data: sería bastante fácil.

Estoy ingresando los datos de ese título con el siguiente código, que se indica en el enlace del blog anterior:

ngOnInit() {
    this.router.events
      .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'']);
      });
  }

Entonces, mi pregunta es, ¿hay una manera de establecer dinámicamente la meta descripción usando el mismo método? Si hay una manera de combinar el título de la página y la función de descripción meta, sería ideal.

Tengo un entrenamiento angular muy limitado, por lo que esta podría ser una pregunta nooby. Soy más de un tipo de diseñador / css / html.

Answer 1

Primero crea 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);
  }

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

Después de inyectar el servicio SEOS en su componente, configure las metaetiquetas y el título en el método OnInit

ngOnInit() {
this.router.events
  .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'']);
    //Updating Description tag dynamically with title
    this._seoService.updateDescription(event[''title''] + event[''description''])
  }); 
}

Edición: Para RxJs 6+ que usa un operador de tubería

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'']);
        //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''
        } 
      },

En mi humilde opinión, esta es una forma clara de tratar con las etiquetas meta. Puedes actualizar las etiquetas específicas de facebook y twitter más fácilmente.

Answer 2

Puede hacer lo siguiente desde Angular (en realidad, la solución solo necesita jQuery, no algo particular de Angular)

En la configuración del router:

  { 
    path: ''about'', 
    component: AboutComponent,
    data: {
      title: ''About'',
      description: ''Here some description'' 
    }
  },

En su componente:

  ...
  .subscribe((event) => {
      this.titleService.setTitle(event[''title'']);
      $(''meta[name=description]'').attr(''content'', event[''description'']);
  });

Si no desea utilizar jQuery, existen funciones simples de JavaScript para encontrar los elementos meta y cambiar sus atributos ( getElementsByTagName y getAttribute ). El código completo para la alternativa de JavaScript se puede encontrar en esta otra pregunta SO aquí .

Nota: También consideraría almacenar el título y la descripción como campos privados en los propios componentes, en lugar de en la configuración del enrutador. Esto evita la necesidad de suscribirse a cualquier cosa, y deja solo las cosas relacionadas con el enrutador en la configuración del enrutador.

Answer 3

Title y angular.io/api/platform-browser/Meta son proveedores que se introdujeron en Angular 4 y se supone que deben hacer esto tanto en el servidor como en el lado del cliente.

Para crear o actualizar la etiqueta del title y la etiqueta meta de la description , 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);

Answer 4

Aquí están las partes relevantes de mi proyecto. (Angular 2/4)

app-routing.module.ts:

Rutas:

... const appRoutes: Routes = [
    {
        path: ''path1'', loadChildren: ''./path1#path1Module'',
        data: {
            title: ''...'',
            description: ''...'',
            keywords: ''...''
        }
    },
    {
        path: ''path2'', loadChildren: ''./path2#path2Module'',
        data: {
            title: ''...'',
            description: ''...'',
            keywords: ''...''
        }
    } ...

app.component.ts (o su componente bootstrap):

importaciones:

// imports
import { Component, OnInit} from ''@angular/core'';
import { Router, ActivatedRoute, NavigationEnd } from ''@angular/router'';
import ''rxjs/add/operator/filter'';
import ''rxjs/add/operator/map'';
import ''rxjs/add/operator/mergeMap'';
import { Title,Meta } from ''@angular/platform-browser'';

constructor:

    // constructor:
        constructor(private router: Router,
                    private route: ActivatedRoute,
                    private titleService: Title, private meta: Meta) {}

Método ngOnInit ():

ngOnInit() {

        this.router.events
            .filter((event) => event instanceof NavigationEnd)
            .map(() => this.route)
            .map((route) => {
                while (route.firstChild) route = route.firstChild;
                return route;
            })
            .filter((route) => route.outlet === ''primary'')
            .mergeMap((route) => route.data)
            .subscribe((event) => {
                this.updateDescription(event[''description''], event[''keywords''], event[''title'']);
            });

    }

método que actualiza las etiquetas de título y meta -> llamadas desde ngOnInit ():

updateDescription(desc: string, keywords: string, title: string) {
    this.titleService.setTitle(title);
    this.meta.updateTag({ name: ''description'', content: desc })
    this.meta.updateTag({ name: ''keywords'', content: keywords })
    this.meta.updateTag({ name: ''og:title'', content: title })
    this.meta.updateTag({ name: ''og:description'', content: desc })
}

Espero eso ayude.

Answer 5

Solución Angular 6+ y RxJS 6+ para establecer títulos de forma dinámica en el cambio de ruta

Si / cuando actualizas a Angular 6 esta es la solución.

Este servicio:

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

Crea / cambia tu servicio SEO / meta 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''] + '' | Site name'');
                    });
        } else {
            this.titleService.setTitle(title + '' | Site name'');
        }
    }
}

Importa tu servicio y llámalo en el contructor.

app.component.ts

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

Y esto todavía requiere formatear rutas como esta.

Archivo de ruta.ts

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

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