Qu’est ce que AngularJS ?
Angular est un framework Javascript conçu pour construire et maintenir facilement des Web Apps, Mobile Apps et des sites web sur la base d’une infrastructure MVVM ou Modèle-Vue-Vue-Modèle. Il offre une expérience utilisateur riche grâce à sa capacité de liaison de données et de requêtes asynchrones. Angular garantie une flexibilité optimale en minimisant la quantité de code et en facilitant la réutilisation de ce dernier.
Depuis l’abandon de Flash et l’émergence des librairies Javascript de plus en plus performantes, AngularJS est devenu un framework incontournable notamment grâce à son apport en interactivité qui offre une nouvelle expérience utilisateur.
Qui dit AngularJS (ou Backbone, ReactJS, Ember.js), dit Single Page Application (SPA), principe qui consiste à intégrer l’ensemble des pages et rubriques du site sur une seule et unique page. Cela n’empêche pas la simulation d’une réelle navigation à plusieurs niveaux, mais cela se présente techniquement et dans tous les cas sous forme d’une seule et unique page.
AngularJS s’impose aujourd’hui comme l’un des principaux acteurs sur le marché.Édité par Google, AngularJS n’est paradoxalement pas très SEO-friendly, mais cette contrainte est aujourd’hui aisément contournable.
AngularJS vs SEO
Prenons l’exemple d’un micro site de 2 pages sous AngularJS contenant une page d’accueil et une page service.
<!DOCTYPE html>
<html>
<head>
<title>Bienvenue</title>
</head>
<body>
<!--
Ici sera chargé le template dont l'identifiant correspond à l'url demandée.
-->
<div ng-view>
</div>
</body>
</html>AngularJS va générer des pages avec un signe # (hash) entre le tld et le nom de la page :
Angular : .com/#page
Standard : .com/page
Ce signe permet à Angular d’identifier le template à injecter en JS dans le view (ng-view) de l’application.
Côté client, nous allons définir la destination de chaque url et le controller MVC correspondant.
Ici par exemple la page service.html est chargée lorsque l’url est identique à /service :
/*
* La gestion des correspondances url/page
**/
app.config( function( $routeProvider){
$routeProvider
/*
* Notre page Home
**/
.when('/' , {
//
templateUrl : "index.php",
controller : 'homeCtrl',
})
/*
* Le route de la page service
**/
.when('/contact' , {
template : 'service.php',
controller : 'serviceCtrl'
})Quand un moteur de recherche va crawler ce site, il indexera au mieux la page d’accueil, avec risque de perdre une partie de son contenu géré en JS qui ne sera pas pris en compte.
Indexer un site AngularJS
Il existe plusieurs solutions pour indexer un site en Angular, nous avons choisi de présenter celle qui nous semble la plus efficace et simple à mettre en place.
D’abord, un test est effectué côté serveur pour détecter l’user-agent, l’objectif est d’indiquer aux robots la page optimisée pour le SEO à crawler sur le serveur. Faites des tests avec votre navigateur à l’aide des extensions Chrome et Firefox permettant de simuler un affichage de l’user-agent de votre choix.
<?php
function verifyUrl($url){
/*
* Un test est effectué côté serveur pour détecter l'user-agent,
- Si c'est un robot, la page optimisée pour le SEO à crawler sur le serveur est affichée.
* Dans le cas inverse, la page Angular et affichée.
*/
if( isrobot() ){
// Ici, nous faisons appel à la page optimisée pour le SEO
}else{
// Sinon, un renvoi vers le front Angular.
redirect_to('/#contact');
}
}
/*
* La fonction qui permet de détecter les user-agent.
**/
public function isrobot(){
if (( isset($_SERVER['HTTP_USER_AGENT']) && preg_match('#Googlebot|bingbot|Googlebot-Mobile|Baiduspider|Yahoo|YahooSeeker|DoCoMo|Twitterbot|TweetmemeBot|Twikle|Netseer|Daumoa|SeznamBot|Ezooms|MSNBot|Exabot|MJ12bot|sogou\sspider|YandexBot|bitlybot|ia_archiver|proximic|spbot|ChangeDetection|NaverBot|MetaJobBot|magpie-crawler|Genieo\sWeb\sfilter|Qualidator.com\sBot|Woko|Vagabondo|360Spider|ExB\sLanguage\sCrawler|AddThis.com|aiHitBot|Spinn3r|BingPreview|GrapeshotCrawler|CareerBot|ZumBot|ShopWiki|bixocrawler|uMBot|sistrix|linkdexbot|AhrefsBot|archive.org_bot|SeoCheckBot|TurnitinBot|VoilaBot|SearchmetricsBot|Butterfly|Yahoo!|Plukkie|yacybot|trendictionbot|UASlinkChecker|Blekkobot|Wotbox|YioopBot|meanpathbot|TinEye|LuminateBot|FyberSpider|Infohelfer|linkdex.com|Curious\sGeorge|Fetch-Guess|ichiro|MojeekBot|SBSearch|WebThumbnail|socialbm_bot|SemrushBot|Vedma|alexa\ssite\saudit|SEOkicks-Robot|Browsershots|BLEXBot|woriobot|AMZNKAssocBot|Speedy|oBot|HostTracker|OpenWebSpider|WBSearchBot|FacebookExternalHit#i', $_SERVER['HTTP_USER_AGENT']) ) ||
( isset( $_SERVER['QUERY_STRING'] ) && strpos( $_SERVER['QUERY_STRING'],'_escaped_fragment_=') !== false )
) {
return true;
}else {
return false;
}
}Pour faire simple, il s’agit de générer une version de chaque page par pré-rendu côté serveur que les moteurs de recherche à peuvent crawler. Pour alléger la charge du serveur et éviter les erreurs en cas de quantité importante de pages à générer, il est recommandé d’exécuter le rendu des pages en amont de sorte que les pages soient prêtes au moment où les robots des moteurs de recherche commencent l’indexation.
En résumé , Angular peutêtre indexé par les moteurs de recherche, à condition de générer des pages « indexables ». Cependant, Google laisse croire que cette solution ne sera pas forcément supportée sur le long terme.