web-dev-qa-db-fra.com

Angular2 SEO - Comment rendre une application angular 2 explorable

Je construis une application Angular 2 en utilisant le framework Angular-Meteor .

Je voudrais obtenir indexation rapide et cohérent par Google et d'autres moteurs de recherche, et permettre à Facebook Sharer et à d'autres scrapers de générer des aperçus de mon contenu généré par JS.

Habituellement, les SPA utilisent PhantomJS pour afficher la page côté serveur et envoyer le code HTML statique au client.

Bien sûr, je peux générer PhantomJS moi-même lorsque j'intercepte un _escaped_fragment_ ou lorsque je vois l'agent utilisateur Google ou Scraper, mais j'ai toujours rencontré des fuites de mémoire et des instances Orphan Phantom lors de la génération de PhantomJS directement sur des sites Web à fort trafic (j'ai utilisé NodeJS et - ce module ).

Pour Angular 1 apps, j'ai l'habitude de résoudre ce problème avec angular modules comme Angular-SEO , mais il semble difficile de convertir de telles module à angular 2.

Je n'ai pas encore trouvé de module Angular 2 approprié pour cela. Dois-je le construire moi-même, ou existe-t-il un autre bon moyen d'y parvenir dès aujourd'hui?

node.jsseophantomjsangularangular2-meteor
28
Rayjax

La grande chose à propos d'Angular2 est que lorsqu'il est activé, tout le contenu de votre élément d'application racine disparaît. Cela signifie que vous pouvez y mettre tout ce que vous voulez à partir du serveur que vous souhaitez récupérer par les robots.

Vous pouvez générer ce contenu en utilisant une version rendue par le serveur du contenu dans votre application, ou avoir une logique personnalisée.

Vous pouvez trouver plus d'informations ici: https://angularu.com/VideoSession/2015sf/angular-2-server-rendering et ici: https://github.com/angular/universel

26
jornare

Je viens de créer ng2-meta , un module Angular2 qui peut changer les balises META en fonction de l'itinéraire actuel.


const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    data: {
      meta: {
        title: 'Home page',
        description: 'Description of the home page'
      }
    }
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    data: {
      meta: {
        title: 'Dashboard',
        description: 'Description of the dashboard page',
        'og:image': 'http://example.com/dashboard-image.png'
      }
    }
  }
];

Vous pouvez également mettre à jour les balises META à partir des composants, des services, etc.


class ProductComponent {
  ...
  constructor(private metaService: MetaService) {}

  ngOnInit() {
    this.product = //HTTP GET for product in catalogue
    metaService.setTitle('Product page for '+this.product.name);
    metaService.setTag('og:image',this.product.imageURL);
  }
}

Bien que cela s'adresse aux robots d'exploration compatibles Javascript (comme Google), vous pouvez définir des balises META de secours pour les robots d'exploration non Javascript comme Facebook et Twitter.

<head>
    <meta name="title" content="Website Name">
    <meta name="og:title" content="Website Name">
    <meta name="og:image" content="http://example.com/fallback-image.png">
    ...
</head>

La prise en charge du rendu côté serveur est en cours.

8
WeNeigh

Le rendu côté serveur n'est pas une exigence pour un classement Google décent ...

J'avais un forum avec environ 33 000 entrées dans ses fichiers sitemap Google. Ce site Web a été écrit à l'aide de formulaires Web asp.net et contient un flux décent de demandes entrantes de Google. Ce site Web avait une très mauvaise lisibilité sur mobile (quelque chose qui est pénalisé par google, il l'a en fait mentionné dans ma "console de recherche")

J'ai tout réécrit avec angular (la version déployée est angular5). J'utilise les services Title et Meta pour définir mon titre et les balises META. Tous les itinéraires contiennent des mots clés extraits du contenu réel. J'ai également fait sûr que chaque élément avec un attribut [routeLink] était une balise A sur laquelle j'ai également spécifié l'élément href (c'est ce que recherche un robot ...) Et bien sûr, j'ai prêté beaucoup d'attention à la lisibilité mobile.

Résultat: j'obtiens en fait plus de trafic entrant qu'auparavant, et dans la console de recherche, je vois clairement que mes pages indexées ont augmenté: sur les 30k + pages, seulement environ 10K ont été incluses dans l'index. Maintenant, j'ai près de 25k pages dans l'index.

Je ne dis pas que le rendu côté serveur n'est pas pertinent. L'utilisation de méthodes universelles ou autres entraînera des temps de téléchargement plus rapides, ce qui entraînera probablement un score plus élevé. Mais Google est certainement capable d'indexer correctement un angular SPA.

edit: une preuve: si vous google "3ds max threadripper", vous verrez qu'il surclasse en fait l'un des plus grands sites de matériel sur Internet.

0
Davy