web-dev-qa-db-fra.com

Angular2 - SEO - comment manipuler la méta description

Les résultats de la recherche dans google sont affichés via TitleTag et le <meta name="description"..."/> Tag. Le <title>- La balise est modifiable via Angular2 comment changer le titre de la page dans le routeur angular2

Ce qui reste est la description.

Est-il possible d'écrire une directive en angular2, qui manipule les méta-tags dans le <head> une partie de ma page.
Donc, selon l'itinéraire sélectionné, la méta description change comme:

<meta name="description" content="**my description for this route**"/>
seoangularmeta-tags
21
Ronald Padur

Depuis Angular4, vous pouvez utiliser Angular Meta service .

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

// [...]

constructor(private meta: Meta) {}

// [...]

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

C'est possible. Je l'ai implémenté dans mon application et ci-dessous, je fournis la description de sa fabrication.

L'idée de base est d'utiliser Meta à partir de @angular/platform-browser

Pour changer dynamiquement une balise META particulière, vous devez:

  1. Supprimez l'ancien en utilisant la méthode removeTag(attrSelector: string) : void.
  2. Ajoutez le nouveau en utilisant la méthode addTag(tag: MetaDefinition, forceCreation?: boolean) : HTMLMetaElement.

Et vous devez le faire lorsque le routeur déclenche un événement de changement de route.

Remarque: En fait, il est également nécessaire d'avoir par défaut <title>...</title> Et <meta name="description"..." content="..."/> Dans la tête de index.html donc avant qu'il ne soit défini dynamiquement il y a déjà du contenu statique.

Mon contenu app-routing.module.ts:

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. Comme on peut le voir, il existe un champ d'objet data supplémentaire pour chaque route. Il contient des chaînes title et metaDescription qui seront utilisées comme contenu de titre et de balise Meta.
  2. Dans le constructeur, nous filtrons les événements de routeur et nous souscrivons à l'événement de routeur filtré. Rxjs y est utilisé, mais en fait il n'est pas nécessaire de l'utiliser. if statements Et loops peuvent être utilisés à la place du flux, du filtre et de la carte.
  3. Nous fusionnons également notre champ d'objet de données avec notre événement afin de pouvoir facilement utiliser des informations telles que les chaînes title et metaDescription.
  4. Nous modifions dynamiquement les balises <title>...</title> Et <meta name="description"..." content="..."/>.

Effets:

Premier composant String comparison title and meta description tags

Deuxième composant Clock time calculator title and meta description tags

En fait, j'utilise actuellement une version un peu plus sophistiquée de cette solution qui utilise également ngx-translate pour afficher différents titres et méta descriptions pour différentes langues.
Le code complet est disponible dans le projet angular2-bootstrap-translate-website-starter .
Le fichier app-routing.module.ts Avec la solution ngx-translate est exactement là: app-routing.module.ts .

Il y a aussi l'application de production qui utilise la même solution: http://www.online-utils.com .

Ce n'est certainement pas le seul moyen et il pourrait y avoir de meilleures façons de le faire. Mais j'ai testé cette solution et ça marche.

En fait, la solution est très similaire à celle de l'article correspondant sur le changement de titre: Comment changer le titre de la page dans le routeur angular2 .

Angular Meta docs: https://angular.io/docs/ts/latest/api/platform-browser/index/Meta-class.html . En fait, ils ne sont pas très informatifs et j'ai dû expérimenter et étudier le vrai code .js pour faire fonctionner ce méta-changement dynamique.

8
luke

J'ai développé et je viens de publier @ ngx-meta/core plugin, qui manipule les balises meta au niveau de la route, et permet de définir les balises meta par programmation dans le constructeur du composant.

Vous pouvez trouver des instructions détaillées sur @ ngx-meta/core dépôt github. De plus, les fichiers source peuvent être utiles pour introduire une logique personnalisée.

5
Burak Tasci

Il n'y a actuellement aucune solution prête à l'emploi, seulement un problème ouvert pour l'implémenter https://github.com/angular/angular/issues/7438 .

Vous pouvez bien sûr implémenter vous-même quelque chose comme le service de titre, utilisez simplement TitleService comme modèle

Un service Meta similaire au service Title est en cours de réalisation (actuellement seulement une pull request).

3
Günter Zöchbauer