DEV Community

Cover image for StoryTime Angular : mon blog, le SEO et le choc du SSR
Romain Geffrault
Romain Geffrault

Posted on

StoryTime Angular : mon blog, le SEO et le choc du SSR

Mon premier gros projet Angular, ce n’est pas une app d’entreprise ni un side project à moitié fini.

C’est mon blog sur le sommeil.

À l’époque, je voulais lancer un vrai site, en production, avec de vraies contraintes : contenu, SEO, performance, déploiement… et surtout avec Angular pour monter en compétence.


Un backend simple, volontairement

Côté backend, j’ai fait un choix très pragmatique : PHP pur.

Pourquoi ?

  • J’en avais déjà fait auparavant
  • C’est ultra simple à héberger
  • Pas besoin d’une infra compliquée pour un blog

Le backend servait surtout d’API basique pour gérer les articles. Rien de fancy, mais efficace.


Angular sans IA… et ça marchait quand même

La création du blog s’est plutôt bien passée.

À l’époque, pas d’IA pour mâcher le travail, mais avec de la doc, de la débrouille et beaucoup de tests, j’ai réussi à sortir une première version assez rapidement.

J’avais choisi Angular pour une raison simple :

👉 je le connaissais déjà un peu, et je voulais vraiment monter en niveau dessus.


Écrire du contenu : beaucoup plus dur que coder

Là où j’ai sous-estimé le travail, c’est sur la création de contenu.

  • Peu de connaissances en SEO
  • Première vraie expérience d’écriture régulière
  • Doutes constants sur la qualité de ce que je produisais

Clairement, écrire est un métier à part entière.


Un outil maison pour publier mes articles

Plutôt que d’écrire directement dans une interface web, j’ai monté mon propre outil de publication.

Mon workflow :

  • J’écrivais mes articles sur Google Docs
  • Je les importais dans mon outil Angular
  • L’import était (au début) semi-automatique

Et là, apprentissage inattendu : les regex.

Google Docs rajoute énormément de balises, de styles et de déchets HTML.

Pour nettoyer tout ça correctement, j’ai passé des heures à :

  • comprendre les regex
  • les tester
  • les casser
  • les améliorer

C’est clairement à ce moment-là que je suis devenu à l’aise avec les expressions régulières.


Le mur du SEO et du CSR

Une fois le blog en ligne… grosse déception.

Mes pages étaient mal indexées, voire pas du tout visibles sur Google.

C’est là que j’ai appris une chose essentielle :

Google n’aime pas (ou en tout cas ne recommande pas) les sites en Client Side Rendering pour le SEO.

Mon blog Angular était entièrement en CSR.


Angular Universal : la plus grosse galère de ma vie Angular

La solution semblait évidente : Angular Universal (à l’époque).

En pratique ?

👉 Un enfer.

Je crois sincèrement que je n’ai jamais autant galéré sur une feature.

  • Très peu de documentation
  • Presque aucun tutoriel clair
  • Peu de retours d’expérience
  • Personne autour de moi qui faisait ça

Déployer du SSR quand on n’a jamais touché à un serveur

Autre mur : le déploiement.

Je n’avais jamais vraiment :

  • configuré un serveur
  • géré des ports
  • compris comment faire tourner un serveur Node derrière un site existant

J’ai dû apprendre sur le tas :

  • comment exposer Angular Universal
  • comment faire cohabiter PHP et Node
  • comment ne pas tout casser en prod

C’était dur, frustrant… mais extrêmement formateur.


Les meta tags dynamiques : autre combat

Autre point ultra pénible :

👉 les meta tags dynamiques par page

À l’époque :

  • quasiment aucune doc
  • très peu d’exemples concrets

J’ai mis beaucoup de temps à comprendre comment faire ça proprement, avant de découvrir Renderer2, qui m’a enfin permis de manipuler le DOM correctement côté serveur.


Avec le recul

Avec le temps :

  • Angular a énormément évolué
  • Le SSR est devenu plus accessible
  • Les outils sont plus matures
  • La documentation est bien meilleure

Aujourd’hui, mettre en place ce genre de projet SSR est beaucoup plus simple qu’à l’époque (et encore ?).

Mais cette expérience reste, pour moi, l’une des plus formatrices :

  • Angular en profondeur
  • SEO réel, pas théorique
  • déploiement
  • serveur
  • contraintes de production

Bref, un projet imparfait, mais une énorme étape dans mon parcours de développeur frontend.

Maintenant, il date un peu, mais il semble toujours util pour les visiteurs.

Le lien, si cela t'intéresse:
sommeilprofond.fr

Follow me on LinkedIn for an Angular Advent calendar.
👉 Romain Geffrault

Top comments (0)