Pour améliorer le référencement d’un de vos sites web qui utilise AngularJS, nous vous proposons la solution suivante.

Par défaut, AngularJS route les URL avec un hashtag – #. Par exemple:

  • http://votresite.fr/#/page1
  • http://votresite.fr/#/page2

Il est très facile d’obtenir des URLs propres en supprimer le hashtag de l’URL.

$locationProvider

Le première étape est de configurer $locationProvider et html5Mode dans application.

angular.module('app', [])
   .config(function($routeProvider, $locationProvider) {
       $routeProvider
           .when('/', {
               templateUrl : 'views/home.html',
               controller : pageController1
           })
           .when('/page1', {
               templateUrl : 'views/page1.html',
               controller : pageController2
           })
           .when('/page2', {
               templateUrl : 'partials/page2.html',
               controller : mainController
           });
       $locationProvider.html5Mode(true);
   });

Le html5Mode utilise le HTML5 History API. C’est un standard pour manipuler l’historique du navigateur à l’aide d’un script. Cela permet le changement du routage et les URL de nos pages sans rafraîchissement de la page.

<base> pour les liens relatifs

Le deuxième étape est de configurer le <base> tag dans la section <head> de votre page html.

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <base href="/">
</head>

Si la racine de votre application est différente, par exemple /mon-site, utiliser celle-ci comme base.

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <base href="/mon-site/">
</head>

Le service $location sera automatiquement envoyé à la méthode de Hashbang (HTML5 Fallback Mode) pour les navigateurs qui ne prennent pas en charge l’API HTML5 History. Le mécanisme est représenté ci-après :

hashbang_vs_regular_url

Serveur web

Le troisième étape est de configurer le serveur web pour permettre d’accéder à une sous-page  (par exemple : monsite.fr/page1) directement depuis la barre de navigation ou les favoris.

Apache Rewrites

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Ne pas réécrire des fichiers ou des répertoires
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Réécrire tout le reste vers index.html pour permettre des liens html5
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

Nginx Rewrites

server {
    server_name my-app;

    root /path/to/app;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Azure IIS Rewrites

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                                 
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

Express Rewrites

var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendfile('index.html', { root: __dirname });
});

app.listen(3006); //le port que vous souhaitez utiliser

ASP.Net C# Rewrites

Dans Global.asax

private const string ROOT_DOCUMENT = "/default.aspx";
protected void Application_BeginRequest( Object sender, EventArgs e )
{
    string url = Request.Url.LocalPath;
    if ( !System.IO.File.Exists( Context.Server.MapPath( url ) ) )
        Context.RewritePath( ROOT_DOCUMENT );
}
Mots clés

Découvrez nos préstations en régie ou au forfait

Audit, conseil, AMOA, AMOE, bases de données XML, solutions éditoriales, sites Responsive Web Design, ...

Nous consulter !
Découvrir !

Archives

Étiquettes

Mots clés