Angular2 - SEO - how to manipulate the meta descri

Search Results in google are displayed via TitleTag and the <meta name="description"..."/> Tag. The <title>-Tag is editiable via Angular2 how to change page title in angular2 router

What's left is the description.

Is it possibile to write a directive in angular2, that manipulates the meta-tags in the <head> part of my page.
So depending on the selected route, the meta description changes like:

<meta name="description" content="**my description for this route**"/>

回答1:

Since Angular4, you can use Angular Meta service.

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

// [...]

constructor(private meta: Meta) {}

// [...]

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

回答2:

It is possible. I implemented it in my app and below I provide the description how it is made.

The basic idea is to use Meta from @angular/platform-browser

To dynamically change particular meta tag you have to:

Remove the old one using removeTag(attrSelector: string) : void method.
Add the new one using addTag(tag: MetaDefinition, forceCreation?: boolean) : HTMLMetaElement method.

And you have to do it when the router fires route change event.

Notice: In fact it is also necessary to have default <title>...</title> and <meta name="description"..." content="..."/> in head of index.html so before it is set dynamically there is already some static content.

My app-routing.module.ts content:

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

}

As it can be seen there is an additional data object field for each route. It contains title and metaDescription strings which will be used as title and meta tag content.
In constructor we filter out router events and we subscribe to filtered router event. Rxjs is used there, but in fact it is not necessary to use it. Regular if statements and loops could be used insead of stream, filter and map.
We also merge our data object field with our event so we can easily use info like title and metaDescription strings.
We dynamically change <title>...</title> and <meta name="description"..." content="..."/> tags.

Effects:

First component

Second component

In fact I currently use a little bit more sophisticated version of this solution which uses also ngx-translate to show different title and meta description for different languages.
Full code is available in angular2-bootstrap-translate-website-starter project.
The app-routing.module.ts file with ngx-translate solution is exactly there: app-routing.module.ts.

There is also the production app which uses the same solution: http://www.online-utils.com.

For sure it is not the only way and there might be better ways to do it. But I tested this solution and it works.

In fact the solution is very similar to this from corresponding post about changing title: How to change page title in angular2 router.

Angular Meta docs: https://angular.io/docs/ts/latest/api/platform-browser/index/Meta-class.html. In fact they aren't very informative and I had to experiment and look into real .js code to make this dynamic meta change working.

回答3:

I have developed and just released @ngx-meta/core plugin, which manipulates the meta tags at the route level, and allows setting the meta tags programmatically within the component constructor.

You can find detailed instructions at @ngx-meta/core github repository. Also, source files might be helpful to introduce a custom logic.

回答4:

There is currently no out-of-the-box solution only an open issue to implement it https://github.com/angular/angular/issues/7438.

You can of course implement something like the title service yourself, just use the TitleService as template

A Meta service similar to Title service is in the works (currently only a pull request).