The playground

More information here

Angular Universal: Ce que vous devez savoir pour le référencement

Inscrivez-vous à nos résumés quotidiens du paysage du marketing de recherche en constante évolution. Remarque: En soumettant ce formulaire, vous acceptez les conditions de Third Door Media. Nous respectons votre vie privée. John E Lincoln le 1er février 2019 à 9h53 Catégories: Toutes les choses Colonne SEO, Canal: SEO Si vous utilisez Angular pour alimenter […]

Inscrivez-vous à nos résumés quotidiens du paysage du marketing de recherche en constante évolution.

Remarque: En soumettant ce formulaire, vous acceptez les conditions de Third Door Media. Nous respectons votre vie privée.

John E Lincoln le 1er février 2019 à 9h53

  • Catégories: Toutes les choses Colonne SEO, Canal: SEO
  • Si vous utilisez Angular pour alimenter votre site Web, vous avez un obstacle supplémentaire à franchir en matière de référencement. Heureusement, Angular Universal permet de sauter facilement par-dessus.

    Gardez à l’esprit que « facile » est un terme relatif ici. Il y a pas mal de magie technique impliquée.

    Vous aurez presque certainement besoin d’impliquer une équipe de développement.

    Mais une fois le produit fini livré, votre site servira des pages optimisées que les moteurs de recherche localiseront et indexeront facilement.

    Dans ce guide, je vais expliquer Angular Universal et pourquoi il est important pour les spécialistes du marketing.

    Le problème du référencement

    Angular est un cadre fantastique pour fournir des applications Web modulaires et conviviales. Malheureusement, c’est un peu hostile au référencement.

    C’est pour deux raisons.

    Tout d’abord, Angular s’appuie fortement sur le script pour fournir du contenu. En conséquence, certains robots de recherche ne « voient » pas le contenu qu’un utilisateur voit.

    Jetez un coup d’œil à la documentation universelle angulaire. Cette page est, sans surprise, rendue avec Angular.

    Lorsque vous faites défiler vers le bas, vous verrez pas mal de contenu. On pourrait penser que tout est indexable.

    Pas nécessairement. Faites un clic droit sur la page et sélectionnez « Afficher la source de la page » dans le menu contextuel qui apparaît.

    Il n’y a que 100 lignes de code source. Nulle part, vous ne verrez le contenu que vous avez vu lorsque vous avez consulté la page normalement.

    Cela, en un mot, est le problème avec Angular. Les visiteurs humains verront le contenu, mais les robots de recherche verront la source.

    Et la source n’a pas le contenu!

    Il y a un autre problème de référencement : la vitesse. Les applications Angulaires ne se chargent souvent pas rapidement.

    Certains sites afficheront un écran vide pendant quelques secondes avant d’afficher la page d’accueil. Cela peut amener les visiteurs à se renflouer lorsqu’ils s’impatientent.

    La vitesse du site est un facteur de classement mobile, donc votre classement en prendra un coup si votre site ne se charge pas rapidement sur les plates-formes mobiles.

    Mais Google dit…

    Google affirme que son bot peut indexer des sites pilotés par script. Il y a beaucoup de preuves à l’appui, mais cela ne signifie pas que vous pouvez éviter de faire un effort supplémentaire lors de l’optimisation d’un site angulaire.

    Pour commencer, Google n’est pas le seul moteur de recherche en ville. Si vous souhaitez que votre application Angular se classe sur Bing et DuckDuckGo, vous devrez prendre des mesures pour y parvenir.

    Ensuite, il se peut que Google puisse indexer certains sites Angulaires, mais pas le vôtre. Toutes les applications Angulaires ne sont pas créées égales. Le vôtre pourrait être l’exception à l’algorithme d’indexation de Google.

    D’après mon expérience, les sites qui passent du HTML à Angular perdent un trafic massif du moteur de recherche la majorité du temps. En fait, j’ai eu trois clients au cours de la dernière année où nous avons dû réparer le site après les chutes dues à Angular.

    Il existe des solutions

    Heureusement, il existe des moyens de rendre le référencement de votre site Angulaire convivial.

    L’une des options les plus populaires consiste à utiliser le rendu dynamique. C’est à ce moment que vous utilisez un outil comme Puppeteer pour générer des fichiers HTML statiques que les robots d’exploration Web peuvent plus facilement consommer.

    Ensuite, configurez votre serveur Web pour diriger les robots de recherche vers les pages pré-rendues pendant que les visiteurs humains naviguent dans l’application Angulaire normale.

    C’est une solution décente, mais elle ne résout toujours pas le problème de vitesse. Pour cela, vous voudrez probablement opter pour Angular Universal.

    Qu’est-ce qu’Angular Universal ?

    Angular Universal exécute votre application Web sur le serveur plutôt que de l’exécuter dans le navigateur.

    C’est une distinction importante. Normalement, les applications Angulaires sont des applications côté client.

    Le problème des robots de recherche est qu’ils ne « traitent » pas toujours le code côté client comme le fait votre navigateur lorsqu’il vous sert une page Web. C’est pourquoi vous avez constaté une divergence entre la page de documentation universelle Angulaire et son code source.

    Angular Universal gère le rendu côté serveur (SSR). Il pré-rend le contenu HTML et CSS affiché à l’utilisateur à l’avance.

    Cela signifie qu’un utilisateur chargera une page HTML statique au lieu du code côté client. En conséquence, la page se chargera plus rapidement.

    De plus, comme il s’agit de HTML statique, les robots de recherche peuvent indexer le contenu.

    Tout le monde gagne.

    Pourquoi c’est important

    Si vous êtes dans le marketing numérique, vous savez déjà qu’une grande partie de la bataille consiste à gagner en visibilité en ligne. C’est pourquoi vous contactez des influenceurs, publiez des mises à jour sur les médias sociaux et optimisez votre site pour qu’il se classe bien.

    En termes simples: votre site ne peut pas se classer s’il ne peut pas être indexé. Si Angular alimente votre site Web, vous devez prendre des mesures supplémentaires pour vous assurer que son contenu apparaît dans les moteurs de recherche.

    C’est pourquoi vous avez besoin d’une solution universelle angulaire.

    L’inconvénient, bien sûr, est que cela va coûter de l’argent. Vous devrez embaucher une équipe de développement qualifiée pour ajouter SSR à votre site Web.

    C’est une dépense qui devrait plus que se rentabiliser au fil du temps si votre site se classe bien pour les termes de recherche clés liés à votre créneau.

    Comment exécuter une application Angular sur Angular Universal

    Si vous aimez vous salir les mains avec du code, ou si vous souhaitez simplement économiser sur les coûts de développement, vous pouvez déployer une application côté serveur par vous-même.

    Avant de faire cela, il est préférable d’avoir une compréhension de base d’Angular, de l’interface de ligne de commande (CLI), de TypeScript et des serveurs Web. Sinon, vous aurez probablement du mal.

    Les étapes pour déployer une application universelle Angulaire sont les suivantes:

    • Installez les dépendances nécessaires
    • Mettez à jour l’application Angular
    • Utilisez la CLI pour créer un bundle universel
    • Configurez le serveur pour exécuter un bundle universel
    • Exécutez l’application sur le serveur

    Il se passe pas mal de choses dans ces cinq étapes, donc je les couvrirai chacune à tour de rôle dans les sections suivantes.

    Installez les dépendances

    Si vous avez une expérience avec Angular, vous connaissez déjà Node.js. C’est le runtime qui transpile le code TypeScript dans une application JavaScript.

    Nœud.js est livré avec un gestionnaire de paquets, nommé sans imagination Node Package Manager ou npm pour faire court. Vous l’utiliserez pour installer les dépendances.

    Lancez votre fenêtre de ligne de commande et exécutez le code suivant:

    npm install–[email protected]/[email protected]/module-map-ngfactory-loader ts-loader

    Donnez-lui quelques instants (ou plusieurs moments) pour tout installer.

    Mettez à jour votre application Angular

    Ensuite, vous devrez préparer votre application Angular pour un déploiement universel. Cela implique quatre étapes:

    • Ajouter un support universel. Ouvrez votre module racine (généralement AppModule) et ajoutez un ID d’application à l’importation BrowserModule. Vous le ferez dans la section « importations » juste en dessous de la déclaration @NgModule.
    • Créez le module racine du serveur.Ensuite, vous devez créer un nouveau module nommé AppServerModule. Assurez-vous qu’il importe ServerModule à partir de la dépendance plateforme-serveur que vous avez ajoutée à l’étape précédente.
    • Créez le fichier principal. Vous aurez besoin d’un fichier principal pour votre bundle universel. Créez-le à la racine (dans le dossier src) et exportez la classe AppServerModule à partir de ce fichier.
    • Créez un fichier de configuration. La classe AppServerModule a besoin d’un fichier de configuration. Créez-en un au format JSON. Cela devrait ressembler à ceci:

    Créez une nouvelle cible de construction

    Votre répertoire source Angulaire doit inclure un fichier nommé angular.json. Vous devrez mettre à jour ce fichier dans la section « architecte ».

    Cela ressemblera à ceci:

    « architect »: {
    « build »: { }}
    « server »: {
    « builder »: « @angular-devkit/build-angular:server »,
    « options »: {
    « outputPath »: »dist/my-project-server »,
    « main »: »src/main.serveur.ts »,
    « tsConfig »: « src/tsconfig.serveur.json »
    }
    }
    }

    Notez l’attribut « builder » quatre lignes plus bas. La valeur après les deux points (« serveur ») est le nom du serveur. Vous pouvez le mettre à jour si vous voulez le nommer autre chose.

    Maintenant, vous pouvez créer votre application. En supposant que vous ayez gardé le serveur nommé « serveur », rendez-vous simplement sur votre ligne de commande et tapez ce qui suit:

    ng run my-project:server

    Vous devriez voir une sortie qui ressemble à ceci:

    Date:2018-12-12T12:42: 09.601Z
    Hachage: 1caced0e9434007fd7ac
    Temps: 4122ms
    chunk {0}main.js (main) 9.49 kB
    styles de morceaux {1}.css(styles) 0 octets

    Configurer le serveur

    Ensuite, vous devez configurer un serveur universel pour exécuter le bundle. C’est ainsi que vous sérialiserez l’application et la retournerez au navigateur.

    Pour y arriver, créez un nouveau fichier appelé serveur.ts. Dans ce fichier, vous définirez votre moteur d’application.

    Les détails de ce code sont un peu en dehors de la portée de ce tutoriel. N’hésitez pas à jeter un coup d’œil à l’exemple dans les documents universels Angulaires.

    Exécutez l’application sur le serveur

    Après tout cela, vous êtes enfin à un point où vous pouvez exécuter l’application sur le serveur.

    Pour ce faire, configurez un webpack qui gère le serveur.fichier ts que vous avez créé à l’étape précédente.

    Nommez le fichier de configuration webpack.serveur.configuration.js. Encore une fois, consultez les documents Angular Universal pour connaître le type exact de code qui appartient au fichier. Vous devrez peut-être adapter ce code à votre propre convention de nommage.

    Une fois que vous avez terminé avec le fichier, vous aurez deux dossiers sous le dossier dist: navigateur et serveur.

    Pour exécuter le code du serveur, tapez simplement ce qui suit sur la ligne de commande :

    node dist/server.js

    Félicitations! Vous exécutez maintenant du code côté serveur.

    L’envelopper

    Bien qu’Angular permette aux développeurs de produire rapidement des applications de haute qualité, il ne joue pas toujours bien avec les robots des moteurs de recherche.

    Heureusement, Angular Universal peut pré-rendre les pages d’applications Angulaires en HTML statique afin qu’elles soient détectables et indexables. Ils se chargeront également plus rapidement.

    Il a toujours été recommandé d’avoir une base HTML et d’utiliser Angular pour fournir les autres éléments de la page. Je fais cette recommandation sur tout ce qui concerne JavaScript depuis 2010. Ce processus d’Universel Angulaire est le même principe. Je ne peux pas vous dire que de nombreux sites ont été détruits par des remaniements angulaires et JavaScript. Soyez prudent avec le vôtre et faites-le toujours vérifier par une société de référencement avant le lancement.

    Inscrivez-vous à nos résumés quotidiens du paysage du marketing de recherche en constante évolution.

    Remarque: En soumettant ce formulaire, vous acceptez les conditions de Third Door Media. Nous respectons votre vie privée.

    À propos de l’auteur

    John E Lincoln

    John Lincoln est PDG d’Ignite Visibility, une agence de marketing numérique et une Inc. société 5000. Lincoln est régulièrement nommé l’un des meilleurs experts en marketing de l’industrie. Il a été lauréat du prix « Search Marketer of the Year » de Search Engine Land, nommé consultant SEO numéro 1 aux États-Unis par Clutch.co , PDG le plus admiré et 40 de moins de 40 ans. Lincoln a écrit deux livres (The Forecaster Method et Digital Influenceur) et réalisé deux films (SEO: The Movie et Social Media Marketing: The Movie) sur le marketing numérique.

    Laisser un commentaire

    Votre adresse e-mail ne sera pas publiée.