Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Mettre une application en production avec Angular 2

Gérer la SEO et les SPA

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les SPA (Single-Page Application, application monopage) permettent de fluidifier l'expérience utilisateur. Voyez comment faciliter leur référencement.
02:34

Transcription

Alors, il y a un vrai problème avec les applications développées en Angular ou en ce que vous voulez, mais en tout cas, en JavaScript. avec les moteurs de recherche. Je vais vous expliquer pourquoi, parce que regardez ici effectivement, on a bien une description et un titre, donc ça, c'est facile pour le moteur d'aller chercher l'info. Par contre, je vais changer de page. On a toujours la même description, toujours le même titre. Pourquoi est-ce comme ça ? Tout simplement parce que quand on fait le rendu, je reprends le projet d'avant, quand on fait le rendu, c'est Webpack qui va venir remplacer le title, etc., et les informations. Il va le remplacer dans quoi ? Il va le remplacer dans un index.html qui est dynamique au moment du rendu, qui est dynamique au moment de la compilation, mais qui n'est pas dynamique après. C'est-à-dire que ces informations on ne peut pas les dynamiser facilement. On ne peut pas récupérer de l'information sur par exemple un module particulier d'Angular et venir l'injecter directement dans ça. Ce n'est pas possible parce qu'actuellement votre page se charge, et ce qui est chargé c'est la page localhost, après, il y a une information qui vient en dessous récupérer l'info, et puis voilà, ça va s'injecter dans app, et ça va s'injecter dans app, mais dans le navigateur. Il faut savoir quelque chose sur les moteurs de recherche, ce sont des robots qui viennent parser, récupérer l'information dans la page, et ils sont capables de ne voir que ça, ce que vous leur mettez ici. C'est-à-dire qu'ils ne sont pas capables de patienter et d'attendre que le JavaScript ait fini son travail et donc ils n'auront pas du tout accès à toute cette partie-là, ce qui se trouve dans l'app ici ils n'y auront pas accès, et ils auront accès au début de la page, ce que vous pouvez voir ici dans le premier rendu qu'on a là au niveau du chargement des fichiers, et c'est tout, ça s'arrêtera à ça. Donc, même si vous dynamisez cette partie-là dans votre application aux changements de la page, eh bien, ça ne marchera pas, parce que le moteur de recherche, s'il se rend sur cette page-là, sur about, il va avoir un rendu qui va être le rendu de base de l'application, puis après, il va utiliser le moteur de routine d'Angular pour récupérer l'information dans la page, mais il n'aura pas connaissance de ces infos parce qu'elles ne font pas partie du templating de base d'Angular, et donc l'indexation va mal se faire et on va avoir des problèmes avec ça, même d'ailleurs, ce qui va se trouver en dessous, c'est-à-dire dans app qui sera injecté après, eh bien, il n'aura pas possibilité de le voir. C'est là où c'est vraiment intéressant de travailler avec Angular universal qui peut faire des rendus serveur et retourner sur une URL précise une page déjà conçue, et conçue côté serveur, donc les moteurs de recherche ont accès à ça. On va voir ensuite comment on va faire pour mettre cela en place. Mais je vais vous parler d'abord de l'historique, parce qu'évidemment il y a quand même eu des solutions qui ont existées, notamment Prerender.

Mettre une application en production avec Angular 2

Optimisez la mise en production de votre application AngularJS. Réduisez le temps de chargement et d’affichage, gérez les tâches répétitives avec des scripts, etc.

1h05 (20 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :13 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !