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

Source: Dev.to

Contexte du projet

Mon premier gros projet Angular n’est pas une application 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.

Choix technologiques

Backend

J’ai opté pour un backend très pragmatique : du PHP pur.

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

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

Frontend

J’ai choisi Angular pour deux raisons simples :

• Je le connaissais déjà un peu.
• Je voulais vraiment monter en niveau dessus.

Workflow de rédaction

1. Rédaction : j’écrivais mes articles sur Google Docs.
2. Import : je les importais dans mon outil Angular. L’import était (au début) semi‑automatique.

Nettoyage du HTML

Google Docs ajoute énormément de balises, de styles et de déchets HTML.
Pour nettoyer tout ça j’ai passé des heures à :

• comprendre les expressions régulières,
• les tester, les casser, les améliorer.

C’est à ce moment‑là que je suis devenu à l’aise avec les regex.

Problèmes SEO et SSR

Une fois le blog en ligne, grosse déception : mes pages étaient mal indexées, voire pas du tout visibles sur Google.
J’ai alors découvert que Google n’aime pas (ou ne recommande pas) les sites en Client‑Side Rendering (CSR) pour le SEO.

Passage à Angular Universal

La solution semblait évidente : Angular Universal (SSR).

En pratique :

• Très peu de documentation et presque aucun tutoriel clair.
• Peu de retours d’expérience, personne autour de moi qui faisait ça.

Déploiement

Je n’avais jamais vraiment :

• configuré un serveur,
• géré des ports,
• fait 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 production.

Meta tags dynamiques

À l’époque, il y avait quasiment aucune documentation ni exemples concrets pour les meta tags dynamiques par page.
Après de longues recherches, j’ai découvert Renderer2, qui m’a enfin permis de manipuler le DOM correctement côté serveur.

Évolution d’Angular et leçons apprises

• Angular a énormément évolué ; le SSR est devenu plus accessible.
• Les outils sont plus matures et la documentation bien meilleure.
• Aujourd’hui, mettre en place un projet SSR est beaucoup plus simple qu’à l’époque.

Cette expérience reste l’une des plus formatrices :

• Angular en profondeur,
• SEO réel, pas théorique,
• Déploiement serveur,
• Contraintes de production.

Conclusion

Un projet imparfait, mais une énorme étape dans mon parcours de développeur frontend.
Il date un peu, mais il reste utile pour les visiteurs.

Lien du blog :