Le framework Angular est un framework structurel basé sur javascript pour les applications Web. Il est utilisé pour créer des pages Web dynamiques avec du contenu rendu via des services Web. Le framework Angular est très convivial pour les développeurs. Il existe depuis plusieurs années et a accumulé une forte communauté d’outils et d’utilitaires, notamment des outils Angular CMS, des frameworks backend, etc.

L'écosystème Angular

Les applications construites à l’aide du framework Angular sont appelées Applications à une page (SPA) en raison de leur fonctionnement. Une application Angular, une fois chargée, rend les autres pages dynamiquement sans recharger les pages Web. Cette expérience est livrée avec la puissance du framework javascript Angular. Il modifie dynamiquement les pages en exécutant du code javascript ou en chargeant uniquement le contenu requis. Cela donne à l’utilisateur une expérience fluide sans attendre qu’un rechargement se produise. Cependant, les sites angulaires peuvent subir des effets néfastes sur leur optimisation des moteurs de recherche (SEO).

Dans cet article, nous expliquons comment les applications Angulaires nécessitent un traitement SEO spécial, et nous fournissons des instructions de déploiement spécifiques pour faciliter un bon référencement angulaire.

Comprendre les robots d’exploration des moteurs de recherche et le référencement

Avant d’aborder la solution, comprenons comment fonctionnent réellement les robots d’exploration des moteurs de recherche (ou robots). Les moteurs de recherche du monde entier parcourent vos sites Web pour comprendre les pages et l’objectif final de votre entreprise. Pour cela, les robots d’exploration lisent les métadonnées des pages telles que le titre, la description, les balises d’image et les catégories. Ces métadonnées doivent être différentes pour chaque page pour permettre aux moteurs de recherche de comprendre l’intention de chaque page.

Résultats traditionnels du crawler de recherche SEO

Un bot de moteur de recherche atteint une page spécifique, trouve les hyperliens sur la page, lit les métadonnées sur la page et commence à parcourir les hyperliens. Il ne cesse de répéter ce processus sur votre site Web jusqu’à ce qu’il ne trouve aucun nouveau lien. Au cours de ce processus, le bot télécharge le contenu statique de votre site Web et comprend la page. Ainsi, il devient important de maximiser les détails de chaque page dans les métadonnées et le contenu statique.

Notre CMS angulaire permet un contenu dynamique que vos Marketeurs peuvent mettre à jour.

Le référencement est devenu l’un des investissements les plus importants pour toute entreprise en ligne aujourd’hui. Dans le passé, les applications Web en cours de développement étaient assez simples et contenaient principalement des pages statiques. Ces pages contenaient toutes les informations requises pré-codées. Avec l’évolution du développement d’applications Web, nous sommes entrés dans une ère de rendu de contenu dynamique où le contenu des pages Web est stocké quelque part et récupéré au besoin.

Il y a deux façons de le faire :

  1. Rendu côté serveur
  2. Rendu côté client

En raison du manque de cadres de rendu côté client sophistiqués dans le passé, le rendu côté serveur des pages était la tendance. Il y avait de nombreux langages et frameworks pour gérer la même chose. Par exemple, PHP, Java Spring, NodeJS avec guidon et d’autres frameworks rendent les pages à l’avance et n’envoient que le contenu HTML brut au frontend.

Cette approche garantit que la page a les balises meta appropriées et tout le contenu rendu avant d’être reçu par le robot de recherche du moteur de recherche. Ainsi, les applications Web conventionnelles étaient pratiquement simples en matière de référencement. Cependant, ils avaient sûrement un inconvénient de temps de chargement plus longs. Avec les serveurs bas de gamme, le traitement de milliers de demandes de pages devenait difficile. Cela a apporté des cadres frontend comme Angular dans l’image.

SEO pour les applications à page unique (SPAS)

Une application à page unique est un concept où la mise en page de base de l’application n’est chargée qu’une seule fois et le reste des pages et des composants n’est chargé qu’au besoin. Ceci est rendu possible grâce à la puissance de Javascript qui décide dynamiquement du contenu requis, récupère les données et les rend au format souhaité.

Notre CMS angulaire permet un contenu dynamique que vos Marketeurs peuvent mettre à jour.

Avantages d’une application à une seule page

En raison de sa nature dynamique, une application à une seule page présente de nombreux avantages inhérents. Certains d’entre eux sont énumérés ci-dessous:

  • Temps de transition plus rapide une fois l’application chargée
  • Expériences plus fluides par rapport à une application Web conventionnelle
  • Moins de charge sur le serveur Web traitant les pages
  • Temps de développement plus rapide avec des frameworks sophistiqués comme Angular

Malgré ces avantages, un défi important avec les applications à page unique est le référencement.

Défis de référencement Angular

Tel que compris, Angular ne recharge pas les pages sauf si cela est explicitement demandé. Angular prend en charge dynamiquement le changement de métadonnées pour les pages, mais cela dépend complètement de JavaScript. Comme discuté précédemment, les robots d’exploration des moteurs de recherche ne divertissent normalement pas Javascript. Cela peut entraîner l’échec des applications Angular dans le rendu du contenu ou des métadonnées appropriés.

Angular SEO - Résultats des robots des moteurs de recherche

Cependant, au fil des ans, le référencement angulaire a évolué et la communauté a apporté une solution pour contourner ce problème. La solution nous permet de créer des pages statiques à partir de pages angulaires. Ces pages statiques contiennent les bonnes métadonnées et le contenu pré-rendu. Plus tard dans cet article, nous nous plongerons dans ce processus pour comprendre les défis impliqués et mettre en œuvre des tactiques pour optimiser le référencement angulaire.

SEO angulaire: Développement de pages conviviales pour la recherche

Avant de commencer à créer une solution de référencement Angulaire fonctionnelle, commençons par créer une application JS Angulaire vierge.

ng new seo-friendly-app

La commande crée une nouvelle application JS angulaire où nous allons créer une page d’accueil simple et une page de blog, rendre du contenu sur la page de blog à l’aide des API ButterCMS et les rendre SEO-friendly.

Commençons par créer des pages et des itinéraires pour les mêmes. Exécutez les commandes ci-dessous dans le terminal pour créer vos pages d’accueil et de blog.

ng g c pages/home --skipTests=trueng g c pages/blog --skipTests=true

Cela créera les composants et les importera dans l’application.module.fichier ts. Maintenant, ajoutez les pages au module de routage pour nous permettre d’acheminer vers ces pages. Modifiez le routage de votre application.module.fichier ts.

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { HomeComponent } from './pages/home/home.component';import { BlogComponent } from './pages/blog/blog.component';const routes: Routes = ;@NgModule({ imports: ,exports: })export class AppRoutingModule { }

Le code ci-dessus mappe les composants respectifs avec leurs routes et définit HomeComponent comme composant par défaut. Maintenant, modifiez l’application.composant.fichier html pour ne contenir qu’une seule ligne de code.

<router-outlet></router-outlet>

Enfin, exécutez l’application en utilisant la commande ci-dessous et vérifiez que votre application est correctement configurée. Une fois la commande passée, vous pouvez cliquer sur l’URL localhost: 4200 pour vous assurer que les choses sont bien configurées. Vous devriez voir le texte « la maison fonctionne! ».

ng serve

Ajoutons maintenant un en-tête qui nous permet de naviguer dans les pages. Créez un composant d’en-tête à l’aide de la commande ci-dessous.

ng g c header --skipTests=true

Ensuite, modifiez le contenu de l’en-tête.composant.html pour contenir les éléments de navigation.

<div><a ="">Home</a></div><div><a ="">Blog</a></div>

Enfin, vous disposez d’une application complète où vous disposez de deux pages et d’une simple navigation sans style qui vous permet de vous déplacer entre les pages. Maintenant, analysons cette application du point de vue du référencement. Faites un clic droit sur le navigateur et sélectionnez « Afficher la source de la page ». Vous devriez pouvoir voir comment les robots d’exploration des moteurs de recherche verraient votre page sans Javascript. Le code ressemble à l’extrait ci-dessous.

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>SeoFriendlyApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"></head><body> <app-root></app-root><script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body></html>

Maintenant, accédez à la page du blog et effectuez la même action et remarquez le contenu de la page. C’est similaire. Cela inclut le titre de la page ainsi que le corps. En effet, Angular modifie votre DOM en utilisant javascript.

Création de pages dynamiques

Par la présente, nous avons réussi à implémenter cela sur les pages statiques. Rendons maintenant nos blogs et notre page de contenu de blog à l’aide de l’API ButterCMS. Cela nous permettra d’effectuer du référencement sur du contenu web statique ainsi que dynamique. Avant de commencer, créez un compte d’essai gratuit avec ButterCMS pour pouvoir créer facilement du contenu dynamique.

Pour ce faire, installons le plugin ButterCMS en utilisant NPM.

npm install --save buttercms

Une fois installé, créons un fichier de service sur le chemin services/butterCMS.service.ts et mettez le contenu ci-dessous dans le fichier.

import * as Butter from 'buttercms';export const butterService = Butter('your_api_token');

Remplacez votre jeton dans le code ci-dessus. Ce fichier de service garantit que le jeton est géré globalement dans un seul fichier. Nous pouvons importer ce fichier partout où nous devons utiliser les services ButterCMS. Maintenant, implémentons rapidement le code ci-dessous dans le blog.composant.fichier ts pour obtenir une liste de publications.

import { Component, OnInit } from '@angular/core';import { butterService } from '../../services/butter-cms.service';@Component({ selector: 'app-blog', templateUrl: './blog.component.html', styleUrls: })export class BlogComponent implements OnInit { posts:any; constructor() { this.fetchPosts(); } private fetchPosts() { butterService.post.list({ page: 1, page_size: 10 }) .then((res) => { console.log('Content from ButterCMS'); console.log(res); this.posts = res.data.data; }); } ngOnInit() { }}

Maintenant, allez dans le navigateur et inspectez la sortie de la console dans la console. Vous devriez pouvoir voir la liste de vos publications dans la console du navigateur. Comme vous pouvez le voir dans l’extrait de code ci-dessous, cela montre deux des messages que j’ai créés pour ce tutoriel.

Maintenant, rendons ce contenu sur la page du blog. Pour ce faire, mettez à jour votre blog.composant.fichier html avec le code ci-dessous:

<div *ngIf="posts!=undefined"><div *ngFor="let post of posts.data"> <hr> <h1>{{post.title}}</h1> <div ="post.body"></div></div></div> 

Cela rendra les publications de votre plate-forme ButterCMS sur la page Web. Voyons maintenant comment définir un titre personnalisé et des balises méta pour chaque page.

Définition des balises title et meta pour le référencement angulaire

Angular comprend ce problème et a déjà une solution à cela. Pour ajouter des métadonnées et modifier dynamiquement le titre de la page, il vous suffit d’utiliser ces modules d’Angular. Mettez à jour le code de votre maison.composant.fichier ts avec le ci-dessous. Effectuez des modifications similaires sur votre blog.composant.ts aussi.

import { Component, OnInit } from '@angular/core';import { Meta,Title } from '@angular/platform-browser';@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: })export class HomeComponent implements OnInit { constructor(private meta: Meta,private title: Title) { this.meta.addTags(); this.setTitle('Home Page'); } public setTitle( newTitle: string) { this.title.setTitle( newTitle ); } ngOnInit() { }}

Une fois ces modifications enregistrées, observez le titre sur l’onglet du navigateur. Il change dynamiquement lorsque vous naviguez dans les pages. De plus, si vous inspectez le code dans la console du navigateur, vous verrez que les métadonnées correspondantes ont également été jointes. Cependant, si vous vérifiez la source de la page, le contenu est toujours le même. Cela signifie que si Javascript est autorisé, nous pouvons générer un titre et une méta dynamiques, mais pas sans cela.

Ainsi, nous avons besoin d’un moyen de prendre le contenu de cette page rendue et de l’envoyer à l’utilisateur. Ce processus est appelé pré-rendu du contenu, et il est essentiel pour obtenir un bon référencement angulaire. Il existe plusieurs méthodes pour effectuer le pré-rendu. Dans la section suivante, nous explorerons l’un d’entre eux.

Comprendre la nécessité d’un pré-rendu

Le pré-rendu signifie essentiellement que le contenu HTML de la page serait compilé à l’avance. Cela garantirait que le titre et les métadonnées de la page sont présents lorsqu’elle atteint le côté client. Avec le pré-rendu, nous pouvons exposer le contenu HTML final au robot d’exploration plutôt que d’exposer du HTML vierge.

Implémentation du pré-rendu pour les applications Angular

Avec les mises à niveau d’Angular, il est désormais livré avec une solution standardisée au pré-rendu. Le processus est assez simple. Nous utiliserions le package universel angulaire pour prendre en charge le pré-rendu des pages. Pour ajouter le package universel Angular, exécutez la commande ci-dessous avec le nom de projet que vous avez utilisé lors de la création de votre application Angular.

ng add @nguniversal/express-engine --clientProject seo-friendly-app

Cela créera des fichiers dans le projet et configurera votre projet pour prendre en charge le pré-rendu à l’aide d’un serveur NodeJS. Pour exécuter ceci, exécutez la commande ci-dessous.

npm run build:ssr && npm run serve:ssr

Cette commande compile, construit vos pages statiques, les place dans le dossier dist et les sert en exécutant un serveur NodeJS. Avec cela, nous avons grandement amélioré notre référencement angulaire en veillant à ce que notre application soit construite de manière SEO-friendly et que tout son contenu soit rendu dynamiquement.

Validation de votre SPA angulaire optimisé pour le référencement

Pour valider l’implémentation, vous pouvez accéder au navigateur et afficher la source de la page pour chaque page. Maintenant, vous pourrez voir que le navigateur affiche le contenu HTML exact comme vous vous y attendez. Avec cela, nous avons établi notre implémentation d’un blog simple et non stylé avec un rendu SEO-friendly sur Angular framework. Avec ButterCMS, vous pouvez faire beaucoup plus comme récupérer dynamiquement les balises SEO, les méta-descriptions et même le contenu de la page lui-même. Consultez notre documentation de l’API Angular pour en savoir plus.

Inscrivez-vous pour recevoir des articles et des tutoriels sur le référencement angulaire.

Laisser un commentaire

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