FR / EN
Digital

SEO et tracking avec le framework Angular

Bien gérer le SEO et le tracking avec le framework Angular, pour les marketeurs, est un challenge technique mais aussi stratégique. Nos équipes sont intervenues sur les volets développement front-end et marketing digital sur deux projets développés avec le framework Angular et j’ai trouvé intéressant de partager notre retour d’expérience du point de vue du marketing digital.

Qu’est-ce qu’Angular ?

Développé il y a presque 12 ans par Google, Angular est un framework JavaScript Open Source, un des plus anciens du marché, et souvent considéré comme un meilleur framework en matière de développement front. De fait, une grande communauté s’est construite et contribue fortement à son développement.

Pourquoi choisir Angular ?

La première question à se poser avant de choisir ou de conseiller une technologie est de définir le besoin. Un site One-page ? Une boutique e-commerce ? Un backoffice ? Une application ? etc… Vous n’allez pas mettre un moteur de F1 dans une R5, et inversement.

Angular est avant tout fait pour créer des applications web et mobile sur un modèle de one-page. Il est tout à fait possible d’avoir plusieurs pages mais on casse le principe même de ce pourquoi il est fait.

Comment fonctionne Angular ?

Nous pourrions comparer Angular avec des legos. En effet, c’est peu ou prou de cette façon qu’est construite une application Angular. Sur une seule page sont intégrés plusieurs composants et selon l’action réalisée, les composants réagissent de façon spécifique et on obtient un nouveau front, à la différence d’un site « plus classique », non développé avec Angular, qui redirige vers une nouvelle page.

« Mais Jamy quelle est la réelle différence ? »

Avant tout, il faut comprendre comment est structuré un site ou une application.

La grande majorité d’entre eux compte 3 composants :

Header : l’en-tête de chaque page, il contient en général le logo, le menu et la recherche;

Content : Ou se trouve le contenu de la page;

Footer : Il sera le dernier élément de la page.

Le Header et le Footer sont des éléments la plupart du temps invariables. En revanche le « content » de la page lui change à chaque changement de page.

Un site classique charge ou recharge le Header le content et le Footer à chaque changement de page. En y réfléchissant bien on pourrait se demander pourquoi recharger quelque chose qui est initialement chargé ?

L’un des avantages d’Angular au niveau du front est qu’il va découper l’ensemble des parties de l’application, c’est à dire que si vous avez 10 blocs de legos mais qu’à la première vise l’application n’en affiche que 4 dont le lego Header et le lego Footer, il reste alors 2 legos présents dans le « Content ». L’utilisateur va alors cliquer sur un bouton, déclenchant une action. la conséquence est qu’au lieu de recharger la page dans son entièreté, Angular supprime les legos présents dans le « Content » pour les remplacer par les nouveaux. Cela va procurer des gains de temps, de ressource, de fluidité et donc une meilleure expérience pour les utilisateurs, ce qui est très gratifiant, l’expérience proposée étant de qualité.

Développer une plateforme sous Angular ?

C’est loin d’être aussi simple qu’un site classique, mais il y a quand même des points positifs (fort heureusement !)

Prenons l’exemple d’un site, du point de vue du développement front, avec 3 types de fichiers, chacun avec leurs codes respectifs :

Angular fonctionne sur un modèle de « component » :

Qu’est-ce qu’un component ?

Si l’on se réfère toujours aux Legos, il faut voir les components comme des boîtes distinctes avec chacune des fonctions bien spécifiques. C’est comme ranger ses Legos par couleur et par taille.

Ci-dessous, l’exemple d’une application avec 4 components (Header, Contenu 1, Contenu 2, Footer).

Chaque component possède ses propres fichiers .html, .css. Ok, mais où est passé le fichier .js ? Et bien Angular utilise un autre langage de programmation basé sur javascript, nommé le TypeScript crée par Microsoft (lire l’article sur le TypeScript proposé par jesuisundev.com →)

Au lieu d’avoir plusieurs fichiers .html, un fichier .css et .js comportant l’ensemble du code et d’avoir des milliers de lignes (pas cool pour le maintien sur le long terme, parfois c’est comme chercher une aiguille dans une botte de foin), nous avons plusieurs components, chacun ayant un rôle bien spécifique. Chaque component peut être composé d’un fichier .html .css et .ts.

Gestion SEO et tracking avec le framework Angular

Bien gérer le SEO et le tracking avec le framework Angular nécessiste des experts. Le SEO (Search Engine Optimization) c’est le référencement naturel, la possibilité ou non d’apparaître au plus haut dans les résultats de Google. Pour opérer un tel classement en fonction des requêtes des internautes et les contenus / mots clés proposés sur un site, les robots d’indexation Google, appelés Crawlers, analysent les sites et leurs pages. La ranking est fonction de la pertinence des mots clés présents sur les pages par rapport aux requêtes des internautes. Les algorithmes vont juger de la qualité des contenus, déterminer un pagerank et une position dans la SERP.

SEO et Angular

Le problème est que les robots Google ne savent pas très bien interpréter les applications basées sur des frameworks JavaScript comme Angular et pour ne pas arranger le tout, c’est encore pire pour une application web one-page basée sur Angular.

Pas de SEO, pas de visiteurs, pas de visiteurs, pas de ventes, pas de ventes, pas de chiffres, pas de chiffres. C’est comme jeter une bouteille à la mer.

Une grande partie des sites actuels (sites e-commerce, sites vitrine, blogs, médias etc…) est en générale basée sur des technologies appelées CMS qui embarquent un backoffice et qui ont la possibilité d’installer des plugins permettant d’accompagner et d’implémenter le SEO quel que soit le niveau de l’utilisateur.

Sur Angular ce genre de plugin n’existe pas, il va falloir créer un backoffice, renseigner manuellement le SEO dans le code ou bien crée un système qui permet de faire du SEO à l’intérieur du backoffice pour les plus téméraires. Cela représente un coût non négligeable, d’où l’utilité de bien choisir la technologie la plus adaptée à votre projet web.

Rappelez-vous, nous évoquions récemment qu’Angular est avant tout utiliser pour faire du one-page, mais il est quand même possible de faire plusieurs pages et heureusement pour le SEO ! Sur Angular il va falloir mettre les mains dans le cambouis, de connaître le développement web et of course maitriser Angular.

Le Netlinking avec Angular

Vous l’avez compris, tous ces avantages utilisateurs sont moins Google friendly, notamment pour le référencement naturel et donc votre visibilité digitale. Nous savons qu’il est possible d’optimiser le SEO d’un site mono-page ou one-page même cela va à l’encontre des recommandations des spécialistes. En effet, il devient très difficile, voire impossible, d’optimiser plusieurs mots-clés de plusieurs thématiques pour les moteurs de recherche. Un autre désavantage, est l’absence de maillage interne puisqu’il n’existe, le plus souvent, qu’une seule page. Et je ne parle même pas de cocon sémantique, une aberration.

Tracking et Angular

Google Tag Manager est une plateforme qui centralise l’ensemble de vos balises et envoie les données comportementales et les profils de vos visiteurs vers Google Analytics, outil de suivi indispensable au tracking de l’activité sur votre site.

Mais lorsque Google Tag Manager « ne capte pas » les évènements se déroulant sur votre site développé avec Angular, il est alors impossible de récolter les données de vos visiteurs dans Google Analytics.

Pourquoi les balises ne fonctionnent-elles pas avec Angular ?

Les balises posées de la même façon que sur un site qui n’est pas développé sous Angular ne fonctionnent pas. En effet, les données des variables pour un même événement sont aléatoires d’une utilisation à l’autre.

Dans notre cas, pour suivre le parcours de souscription d’un visiteur, la solution a été de mettre en place un déclencheur d’activation de changement d’historique (History change), plutôt qu’un déclencheur « au clic » sur chacune des balises, afin de récolter la donnée sur Google Analytics, particulièrement sur le comportement des utilisateurs (behavior flow).

Bien gérer le SEO et le tracking avec le framework Angular, vous l’avez compris, ce n’est finalement pas si complexe que cela dès lors que l’on possède les compétences et ressources techniques pour le faire. Pour les marketeurs, la vigilance est de mise dès lors que des plateformes digitales sont développées avec le framework Angular.

Youand est une agence de création et marketing digital. Nous accompagnons votre transformation et vos projets digitaux avec nos e-talents, tous experts du digital, pour répondre à vos enjeux et objectifs pour accroitre votre visibilité, notoriété, e-réputation, booster vos affaires et vos ventes et faire rayonner votre écosystème digital.

Vous avez besoin de renforcer votre équipe projet Angular, contactez-nous.