Angular2 - SEO - wie man die Meta-Beschreibung manipuliert

Seit Angular4 können Sie Angular Meta Service verwenden.

import { Meta } from '@angular/platform-browser';

// [...]

constructor(private meta: Meta) {}

// [...]

this.meta.addTag({ name: 'robots', content: 'noindex' });

Es ist möglich. Ich habe es in meine App implementiert und gebe unten die Beschreibung, wie es gemacht wird.

Die Grundidee ist die Verwendung von Meta aus @angular/platform-browser

Um ein bestimmtes Meta-Tag dynamisch zu ändern, müssen Sie:

1. Entfernen Sie die alte mit der removeTag(attrSelector: string) : void -Methode.
2. Fügen Sie den neuen mit der addTag(tag: MetaDefinition, forceCreation?: boolean) : HTMLMetaElement -Methode hinzu.

Und Sie müssen es tun, wenn der Router ein Routenänderungsereignis auslöst.

Hinweis: Tatsächlich ist es auch erforderlich, Standardwerte für <title>...</title> Und <meta name="description"..." content="..."/> Im head of index.html zu haben, damit vor der dynamischen Einstellung bereits statischer Inhalt vorhanden ist.

Mein app-routing.module.ts Inhalt:

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

import { NgModule } from '@angular/core';
import { RouterModule, Routes, Router, NavigationEnd, ActivatedRoute } from '@angular/router';

import { StringComparisonComponent }  from '../module-string-comparison/string-comparison.component';
import { ClockCalculatorComponent }  from '../module-clock-calculator/clock-calculator.component';

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

const routes: Routes = [
  {
    path: '', redirectTo: '/string-comparison', pathMatch: 'full',
    data: { title: 'String comparison title', metaDescription: 'String comparison meta description content' }
  },
  {
    path: 'string-comparison',  component: StringComparisonComponent,
    data: { title: 'String comparison title', metaDescription: 'String comparison meta description content' }
  },
  {
    path: 'clock-time-calculator',  component: ClockCalculatorComponent,
    data: { title: 'Clock time calculator title', metaDescription: 'Clock time calculator meta description content' }
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

export class AppRoutingModule {

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private titleService: Title,
    private metaService: Meta
  ){
    //Boilerplate code to filter out only important router events and to pull out data object field from each route
    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')
    //Data fields are merged so we can use them directly to take title and metaDescription for each route from them
    .mergeMap(route => route.data)
    //Real action starts there
    .subscribe((event) => {
        //Changing title
        this.titleService.setTitle(event['title']);

        //Changing meta with name="description"
        var tag = { name: 'description', content: event['metaDescription'] };
        let attributeSelector : string = 'name="description"';
        this.metaService.removeTag(attributeSelector);
        this.metaService.addTag(tag, false);
    });
  }

}

1. Wie zu sehen ist, gibt es für jede Route ein zusätzliches Objektfeld data. Es enthält die Zeichenfolgen title und metaDescription, die als Titel- und Metatag-Inhalt verwendet werden.
2. Im Konstruktor filtern wir Router-Ereignisse heraus und abonnieren gefilterte Router-Ereignisse. Rxjs wird dort verwendet, es ist jedoch nicht erforderlich, es zu verwenden. Reguläres if statements Und loops können anstelle von Stream, Filter und Map verwendet werden.
3. Wir führen auch unser Datenobjektfeld mit unserem Ereignis zusammen, sodass wir Informationen wie title und metaDescription Zeichenfolgen verwenden können.
4. Wir ändern dynamisch die Tags <title>...</title> Und <meta name="description"..." content="..."/>.

Auswirkungen:

Erste Komponente

Zweite Komponente

Tatsächlich verwende ich derzeit eine etwas komplexere Version dieser Lösung, die auch ngx-translate verwendet, um verschiedene Titel und Meta-Beschreibungen für verschiedene Sprachen anzuzeigen.
Vollständiger Code ist verfügbar in angle2-bootstrap-translate-website-starter project.
Die Datei app-routing.module.ts Mit der Lösung ngx-translate ist genau dort: app-routing.module.ts .

Es gibt auch die Produktions-App, die dieselbe Lösung verwendet: http://www.online-utils.com .

Sicher ist es nicht der einzige Weg und es könnte bessere Wege geben, dies zu tun. Aber ich habe diese Lösung getestet und es funktioniert.

Tatsächlich ähnelt die Lösung der des entsprechenden Posts zum Ändern des Titels: Ändern des Seitentitels in angle2 router .

Angular Meta docs: https://angular.io/docs/ts/latest/api/platform-browser/index/Meta-class.html . Tatsächlich sind sie nicht sehr informativ, und ich musste experimentieren und mich mit echtem .js-Code befassen, damit diese dynamische Metaänderung funktioniert.

Ich habe gerade das @ ngx-meta/core -Plugin entwickelt und veröffentlicht, das die Meta-Tags auf Routenebene bearbeitet und das programmgesteuerte Setzen der Meta-Tags innerhalb des Komponentenkonstruktors ermöglicht.

Detaillierte Anweisungen finden Sie unter @ ngx-meta/core github repository. Außerdem können Quelldateien hilfreich sein, um eine benutzerdefinierte Logik einzuführen.

Derzeit gibt es keine sofort einsatzbereite Lösung, sondern nur ein offenes Problem bei der Implementierung https://github.com/angular/angular/issues/7438 .

Sie können natürlich so etwas wie den Titeldienst selbst implementieren, verwenden Sie einfach TitleService als Vorlage

Ein Meta -Dienst ähnlich dem Title -Dienst ist in Arbeit (derzeit nur eine Pull-Anforderung).