Angular2 - SEO - wie man die Metabeschreibung manipuliert

Ist es möglich. Ich setzte es in meine app und unter mir die Beschreibung, wie es gemacht wird.

Die grundlegende Idee ist die Verwendung Meta aus @angular/platform-browser

Dynamisch ändern, insbesondere meta-tag müssen Sie:

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

Haben, und Sie haben, es zu tun, wenn der router feuert route change-Ereignis.

Beachten Sie: In der Tat ist es auch notwendig, um Standard - <title>...</title> und <meta name="description"..." content="..."/> im Kopf index.html so, bevor es festgelegt ist dynamisch, es gibt bereits einige statische Inhalte.

Meine 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 es gesehen werden kann, gibt es eine zusätzliche data - Objekt-Feld für
   jede route. Es enthält title und metaDescription strings
   die verwendet werden, als Titel und meta-tag-Inhalte.
2. Im Konstruktor filtern wir heraus router Veranstaltungen und wir abonnieren gefiltert
   router Veranstaltung. Rxjs es verwendet wird, aber in der Tat ist es nicht notwendig, es zu benutzen. Regelmäßige if statements und loops verwendet werden könnte, insead stream, filtern und anzeigen.
3. Wir verbinden unser Daten-Objekt-Feld mit unserer Veranstaltung, so können wir leicht
   verwenden Sie info, wie title und metaDescription strings.
4. Wir dynamisch ändern <title>...</title> und <meta name="description"..." content="..."/> tags.

Effekte:

Erste Komponente

Zweite Komponente

In der Tat habe ich derzeit eine etwas anspruchsvollere version dieser Lösung, die verwendet auch ngx-übersetzen zeigen unterschiedliche Titel und meta-Beschreibung für verschiedene Sprachen.

Vollständigen code finden Sie im angular2-bootstrap-translate-website-starter Projekt.

Die app-routing.module.ts Datei mit dem ngx-übersetzen-Lösung ist genau hier: app-routing.- Modul.ts.

Dort ist auch die Produktion der app, die verwendet die gleiche Lösung: http://www.online-utils.com.

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

In der Tat die Lösung ist sehr ähnlich zu diese von den entsprechenden post zum ändern von Titel: So ändern Sie-Seite Titel in angular2 router.

Eckig Meta-docs: https://angular.io/docs/ts/latest/api/platform-browser/index/Meta-class.html. In der Tat, Sie sind nicht sehr informativ, und ich hatte zu Experimentieren und sehen in real .js-code, um diese dynamische meta-Wandel der Arbeit.

InformationsquelleAutor der Antwort luke

Derzeit gibt es keine out-of-the-box-Lösung, die nur eine offene Frage, um es zu implementieren https://github.com/angular/angular/issues/7438.

Können Sie natürlich etwas umzusetzen, wie der Titel service selbst, verwenden Sie einfach die TitleService als Vorlage

Einen Meta service ähnlich Title service ist in den Werken (derzeit nur einen pull-request).

InformationsquelleAutor der Antwort Günter Zöchbauer