Code-Web.org - référencement

De belles URL sous Dotclear 2

Thierry Geindre — Tue, 01 Apr 2008 07:10:00 +0200

On sait aujourd'hui que, pour un meilleur référencement, il est important d'utiliser des URL human friendly. Vos visiteurs en seront ravis également. Pour cela, Dotclear vous propose les URL au format PATH_INFO. Nous allons voir dans ce petit billet comment activer les URL au format PATH_INFO et se débarrasser du vilain index.php.

Réécriture d'URL

Ce premier paragraphe ne vous intéressera que si vous souhaitez utiliser la réécriture d'URL, c'est à dire faire disparaître le vilain index.php de vos URL. Si ce n'est pas le cas, vous pouvez sauter au second paragraphe.

Dans le répertoire contenant votre Dotclear 2, créez un fichier nommé .htaccess. Placez-y le contenu suivant :

# Activation du moteur de réécriture
RewriteEngine on

# Si le fichier demandé n'existe pas physiquement
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# On envoie la demande à l'index de Dotclear
RewriteRule (.*) /index.php/$1 [L]

Si votre Dotclear est situé dans un sous répertoire et que vous souhaitez que votre site soit accessible par un répertoire de plus haut niveau, vous devrez placer le fichier .htaccess que vous venez de créer dans ce répertoire de plus haut niveau puis remplacer la dernière ligne par ces deux lignes :

RewriteRule (.*) /sous-repertoire/index.php/$1 [L]
RewriteRule ^$ /sous-repertoire/index.php   [L]

Enfin, pour que cela fonctionne, vous devrez également activer les URL au format PATH_INFO.

Activer les URL au format PATH_INFO

La première étape consiste tout naturellement à activer ce format d'URL. Pour ce faire, rendez-vous dans les paramètres du blog accessibles via le tableau de bord. Pour l'option Méthode de lecture de l'URL, choisissez bien sur PATH_INFO. Comme vous pourrez le voir dans l'aide, l'activation de cette option nécessite également que l'URL de votre blog, définit dans la même page de configuration, se termine par un /.

Pour ce dernier paramètre, tout dépend de si vous souhaitez utiliser la réécriture d'URL ou pas. Si c'est la cas, vous pouvez indiquer une URL comme suit : http://www.mon-site.com/ suivit d'un éventuel sous répertoire mais toujours terminé par un /.Si vous n'utiliserez pas de réécriture d'URL, saisissez une URL comme suit : http://www.mon-site.com/index.php/ ou avec un sous répertoire : http://www.mon-site.com/sous-repertoire/index.php/.

Une fois cette nouvelle configuration enregistrée, vous devrez éditer le fichier /inc/config.php de Dotclear et y dé commenter les dernières lignes suivant les indications que vous trouverez dans ce même fichier.

Des problèmes?

Assurez-vous d'avoir bien suivit toutes les indications données dans ce billet. Si c'est bien le cas, vous devrez aussi vous assurer que la réécriture d'URL (aussi appelé URL Rewriting) est disponible et active chez votre hébergeur. Vérifiez également que l'emploi de fichiers .htaccess est permis.

Évitez les URL multiples et le contenu dupliqué

Thierry Geindre — Sun, 09 Mar 2008 16:12:00 +0000

L'un des points nuisant au référencement est le contenu dupliqué ou duplicate content dans le jargon. En effet, plusieurs pages ayant le même contenu sur un même site pénalisent le référencement de ce site. Malheureusement, on trouve très souvent sur un seule site plusieurs URL permettant d'accéder à la page d'accueil. Comme http://www.lesite.com/, http://lesite.com/ ou encore http://www.lesite.come/index.php etc. Nous allons voir comment régler ce problème.

Plusieurs solutions sont disponibles pour régler ce problème mais toujours du côté du serveur. Nous allons voir le cas d'apache.

Il est généralement possible de personnaliser le fonctionnement d'Apache pour un répertoire en particulier en plaçant un fichier .htaccess dans ce répertoire. Il suffira alors d'indiquer dans ce fichier de rediriger le visiteur vers la bonne URL lorsque celle qu'il utilise ne nous satisfait pas.

Pour cela, il faudra d'abord déterminer l'URL que l'on souhaite utiliser. On choisira www.le-site.com, c'est à dire l'URL contenant le www car c'est la forme la plus connu et la plus employée.

Nous allons donc créer un fichier nommé .htaccess. Pour ce faire, il suffit d'ouvrir un éditeur de fichiers texte et d'enregistrer le fichier créé sous ce nom. A noter que sous Windows, il n'est pas possible de créer des fichiers portant ce nom. Vous pourrez le renommer une fois présent sur votre FTP ou exploiter la commande rename qui autorise ce genre de nom. Placez dans ce fichiers les lignes suivantes :

# Activation du moteur de réécriture d'URL
RewriteEngine On

# On insère une condition de réécriture
# Si le nom de serveur indiqué ne commence
# pas par www
RewriteCond %{SERVER_NAME} !^www

# Nous allons rediriger le visiteur vers le site avec
# les www
RewriteRule ^(.*)$  http://www.le-site.comg/$1 [R=301,L]

Avec ces lignes, n'importe quelle page à laquelle un client accède via un nom de serveur sans les www sera automatiquement redirigé vers la même page mais avec le bon nom de serveur. D'autre part, vous aurez peut être remarqué que l'erreur 301 est renvoyée au client. Elle signifie Has moved permanently, et indique aux clients, les moteurs de recherche en particulier, que la page demandée a définitivement été déplacé vers la nouvelle adresse indiquée.

Les Pseudo Frames

Thierry Geindre — Thu, 27 Dec 2007 20:18:00 +0000

Vous connaissez peut-être les frames. Il s'agit d'un système fournit par le langage html permettant de découper une page en plusieurs autres pages. Bien que présentant un certain nombres d'avantages, ce système apporte également son lot d'inconvénients qui nous pousserons à utiliser une autre méthode que constituent les pseudo frames.

Pourquoi utiliser des frames?

Comme je le disais, les frames permettent de mettre en place un découpage d'une page en plusieurs autres. Ceci permet de régler certains problèmes de maintenances d'un site. En effet lorsqu'un menu apparaît sur de nombreuses pages, il peut être fastidieux de le modifier sur chacune de ces pages.

Grâce aux frames, il est possible de n'avoir ce menu que sur une seule page. Les autres pages du site seront toujours affichées accompagnées de ce menu grâce à un système de cadres.

Cependant, les frames posent un certain nombre de problèmes.

Pourquoi ne pas utiliser les frames?

En règle générale, il est bon de développer un site Web en respectant une norme la plus strict et la plus récente possible. Le XHTML 1.0 Strict est un bon exemple, et cette norme interdit l'utilisation des frames ou frameset. Ceci n'explique pas pourquoi faut-il se priver des frames mais constitue déjà un premier argument.

Les frames posent tout une série de problèmes :

Des problèmes d'accessibilité

Un certain nombre de navigateurs sont incapables d'interpréter les frames. En les utilisant, vous réduisez ainsi le nombre potentiel de visiteurs que votre site pourrait accueillir.

De référencement

On sait aujourd'hui que les bot des différents moteurs de recherche existant sur le Web ne sont pas vraiment friant des frames. De plus, un visiteur qui cliquera sur un résultat d'une recherche pourra arriver directement sur une page sans avoir les frames affichées. Il perdra ainsi le menu et, là, aucune chance pour qu'il visite d'autre pages de votre site.

Il existe bien un moyen de régler ce second problème à l'aide de java script, mais on en revient alors à des problèmes d'accessibilité.

Les frames posent encore d'autre problèmes, une petite recherche vous en donnera certainement la liste complète. Nous avons vu ici les principaux.

Les pseudo frames

Pour palier aux problèmes des frames, il nous faut une solution qui apporte les mêmes avantages sans les inconvénients bien sur. C'est justement là qu'interviennent les pseudo frames. Il s'agit d'un système qui consiste à construire une page à partir de plusieurs fichiers mais côté serveur uniquement. Ainsi, le mécanisme est totalement invisible pour le client qui ne verra qu'une page correctement construite et sans frame.

Pour ce faire, nous allons devoir utiliser un langage côté serveur. PHP satisfera parfaitement ce besoin, mais il faut tout de même savoir que n'importe quel autre langage côté serveur pourra faire l'affaire suivant le même principe.

Fichiers et arborescence

Classiquement, on retrouve pour une page quatre parties biens distinctes :

L'en-tête (header)
Le pied de page (footer)
Le menu
Le contenu de la page

On aura donc 3 fichiers qui seront systématiquement les mêmes pour toutes les pages d'un site, à savoir :

header.html (L'en-tête)
footer.html (Le pied de page)
menu.html (Le menu)

Et un quatrième fichier sera utilisé pour construire une page, il ne s'agira pas du même fichier en fonction de la page que l'on souhaite afficher. Pour structurer un peu l'arborescence de notre site, ou pourra créer deux répertoires. L'un contenant les fichier communs à toute les pages du site et l'autre contenant les différents fichiers qui contiendront les contenus des pages. Ces répertoires pourront être nommés respectivement includes (du verbe To Include (inclure) de l'anglais) et pages.

En plus de ces répertoires et fichiers, il nous faudra un fichier supplémentaire qui contiendra les instructions de constructions de la page à partir des différents fichiers. Nous utiliserons pour cela un fichier index.php placé à la racine de notre arborescence.

On obtiendra donc l'arborescence suivante :

index.php
includes/
- header.html
- footer.html
- menu.html
pages/
- accueil.html
- autre.html
- etc.html

Bien entendu, d'autres arborescences pourront être mises en place mais celle-ci satisfera la majorité des cas.

Contenu des fichiers

Excepté le fichier index.php, tout les autres fichiers devront être remplis avec le code html qui compose les pages de votre site. Cependant, vous ne devrez pas y placer exactement le même contenu que si vous aviez utilisé des frames. En effet, il ne faudra pas placer les en-têtes de pages dans chacun des fichiers mais seulement dans header.html. Un exemple sera certainement plus parlant :

includes/header.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>Le titre de la page</title>
  <link rel="stylesheet" type="text/css" href="/dotclear/themes/CodeWeb/style.css" media="screen" 
</head>
<body>

Comme nous l'avons déjà vu, notre script index.php vas se charger de construire une seule page à partir des fichiers que nous avons énuméré. Il ne s'agit donc plus de créer plusieurs pages et de les afficher dans des cadres. Ainsi, le code d'en-tête (<head>) ne devra se trouver que dans le fichier header.html et dans aucun autre. De même, le code qui sera destiné à fermer le <body> et <html> ne devra se trouver que dans le fichier footer.html.

includes/footer.html

</body>
</html>

Notre menu pourra être formé d'une simple liste :

includes/menu.html

<ul id="menu">
  <li><a href="index.php">Accueil</a></li>
  <li><a href="index.php?page=autre">Autre</a></li>
</ul>

Il ne nous restera ensuite plus qu'a créer autant de pages que nous le souhaitons dans le répertoire pages. Le minimum serait une page index.html qui sera celle qui sera affichée par défaut. C'est à dire lorsque la page demandée au script index.php ne correspond à aucune page connue ou lorsqu'aucune page n'est demandée. On créera ici une page supplémentaire nommée autre.html pour coller au menu que je vous proposé en exemple.

pages/index.html

<h1>Accueil</h1>
<p>Bienvenue sur l'accueil.</p>

pages/autre.html

<h1>Autre</h1>
<p>Une autre page.</p>

Construction de la page

Comme nous l'avons vu, c'est le script index.php placé à la racine de notre arborescence qui sera chargé de construire une page à partir de tout les fichiers dont il dispose. Ainsi, pour afficher une page on fera toujours appel au fichier index.php avec un paramètre page dans l'URL (méthode GET). On pourra ensuite lire ce paramètre dans notre script via la variable $_GET['page'].

Par exemple, pour afficher la page autre.html, on utilisera le lien suivant : http://www.site.com/index.php?page=autre Il s'agit du second lien proposé dans le menu d'exemple.

index.php

<?php
 
  // On définit une liste de pages autorisées au moyen d'un tableau
  // Vous devrez ajouter toutes les pages se trouvant dans le répertoire
  // pages pour les rendre accessibles.
  // Vous pouvez également automatiser la génération de ce tableau
  // en lisant le contenu du répertoire pages/
  $pagesOk = array('index','autre');
 
  // On commence par lire la page demandée
  // Si ce n'est pas vide
  if(!empty($_GET['page']))
    // On lit la valeur demandée
    $page = $_GET['page'];
  else
   // Sinon on utiliser index comme page par défaut
   $page = 'index';
 
  // On vérifie que la page demandée se trouve dans les pages autorisées
  if(!in_array($page,$pagesOk))
  {
 
    // Elle n'y est pas, dans ce cas on peut renvoyer une erreur 404
    header("HTTP/1.0 404 Not Found");
 
    // On stop l'exécution du script ici
    exit;
 
  }
 
  // Arrivé ici, on sait que la page demandée existe forcément.
  // On va donc pouvoir commencer la construction de la page.
 
  // On commence par inclure l'entête
  require('./includes/header.html');
 
  // Puis le menu
  require('./includes/menu.html');
 
  // On inclut la page demandée
  require('./pages/'.$page.'.html');
 
  // On inclut enfin le pied de page
  require('./includes/footer.html');
 
?>

Pour aller plus loin

Protéger vos répertoires contre les accès directes

En l'état, un visiteur peut toujours se rendre dans l'arborescence de votre site, et plus particulière dans le répertoire pages ou encore includes. Il pourra donc visualiser n'importe quel page seule. Pour pallier à ce problème, il vous suffira de placer dans chacun des deux répertoires un fichier nommé .htaccess et contenant les instructions suivantes :

deny from all

Vos répertoires seront ainsi totalement inaccessibles publiquement. Ils le resteront bien sur via FTP et pour votre script index.php.

Réécriture d'URL

Il pourrait être intéressant de simuler l'existence de chacune des pages sur notre site. En effet, ceci facilite généralement la mémorisation des URL et améliore le référencement. Pour ce faire, nous allons exploiter une fonctionnalité offerte par Apache. Il s'agit de la réécriture d'URL, aussi appelée URL Rewriting en anglais. Il faut savoir que cette fonctionnalité est désactivées sur certaines formules d'hébergement, le plus souvent les gratuites. A vous de tester.

Pour mettre en oeuvre cette fonctionnalité, placez un fichier nommé .htacces à la racine de votre arborescence. Placez-y les instructions suivantes :

# On active la réécriture d'URL
RewriteEngine on

# On définit une seule règle de réécriture
RewriteRule (.*)\.html index.php?page=$1 [L]

Vous pourrez alors utiliser directement l'URL suivante pour afficher la page autre avec l'en-tête, le menu et le pied de page : http://www.site.com/autre.html. Le serveur appellera en fait index.php?page=autre de façon totalement invisible pour le visiteur.

Lister automatiquement les pages autorisées

Plutôt que de créer une liste figée dans votre script index.php, vous pouvez également générer dynamiquement la liste des pages autorisées en lisant le contenu du répertoire pages. Le script index.php pourra alors contenir les instructions suivantes :

<?php
 
  // On initialise la liste des pages valides à un tableau vide
  $pagesOk = array();
 
  // On ouvre le répertoire des pages
  $pagesDir = opendir('./pages/');
 
  // On lit le répertoire
  while($file = readdir($pagesDir))
  {
 
    // On vérifie qu'il s'agit bien d'un fichier
    // et que son extension est bien .html
    if( is_file($file) && substr($file,-4,4)=='.html')
 
      // Si c'est bien le cas, on ajoute la page à la liste des pages autorisées
      $pagesOk[] = $file;
  }
 
  // On commence par lire la page demandée
  // Si ce n'est pas vide
  if(!empty($_GET['page']))
    // On lit la valeur demandée
    $page = $_GET['page'];
  else
   // Sinon on utiliser index comme page par défaut
   $page = 'index';
 
  // On vérifie que la page demandée se trouve dans les pages autorisées
  // La liste contient désormais l'extension des fichiers, on ajoute donc '.html'
  // a la variable $page à contrôler.
  if(!in_array($page.'.html',$pagesOk))
  {
 
    // Elle n'y est pas, dans ce cas on peut renvoyer une erreur 404
    header("HTTP/1.0 404 Not Found");
 
    // On stop l'exécution du script ici
    exit;
 
  }
 
  // Arrivé ici, on sait que la page demandée existe forcément.
  // On va donc pouvoir commencer la construction de la page.
 
  // On commence par inclure l'entête
  require('./includes/header.html');
 
  // Puis le menu
  require('./includes/menu.html');
 
  // On inclut la page demandée
  require('./pages/'.$page.'.html');
 
  // On inclut enfin le pied de page
  require('./includes/footer.html');
 
?>

A noter que la fonction glob() pourra également servir à créer la liste des pages autorisées.

On pourra également mettre en place un système de cache permettant de sauvegarder la liste des pages autorisées plutôt que de chercher à la reconstruire pour chaque appel.

Conclusion

Une fois ce système en place, vous pouvez simplement modifier les fichier d'en-tête (header.html), de menu (menu.html) et de pied de page (footer.html). Ces modifications seront automatiquement répliquées sur l'ensemble des pages qui composent votre site.

Déplacement de pages, utiliser l'erreur 301

Thierry Geindre — Tue, 13 Nov 2007 08:24:00 +0000

CodeWeb change d'ici quelques jours de nom de domaine et de serveur. Le site deviendra alors code-web.org. C'est justement l'occasion de faire le point sur les bonnes choses à faire en cas de déplacement de pages. Je pense notamment à l'erreur HTTP 301 et la redirection vers le nouvel emplacement. L'objectif étant bien sur de conserver le référencement acquis et surtout de ne pas créer de liens morts.

Nous prendrons pour exemple notre cas. Vous verrez donc les quelques éléments que nous avons préparés et que nous allons mettre en place dès que le nouveau nom de domaine sera opérationnel. Mais avant tout, voyons l'objectif à atteindre.

Objectif

Lorsque vous créez un site sur la toile, il est possible qu'avec le temps des liens externes existent vers vos pages. Les moteurs de recherche constituent l'exemple le plus évident de liens externes. Mais pensons aussi aux liens dans les favoris de vos visiteurs, etc. L'ennui lorsque vous souhaitez déplacer vos pages, c'est que vous n'avez pas le contrôle sur les liens dont nous venons de parler. Notre objectif sera donc de faire en sorte que ces liens fonctionnent toujours.

Redirection bien sur!

En effet, nous utiliserons une redirection. Ici à l'aide de la fonction header de PHP. Pour vos visiteurs, pas de problème ils pourront être redirigés avec ce seul code :

<?php
header('location: http://www.nouveau-domain.com/');
?>

En revanche, les moteurs de recherche ne vont certainement pas apprécier et vous risquez de perdre le référencement de vos pages. Pou remédier à cela, il faudra renvoyer une erreur 301 du protocole HTTP. Ce code correspond à l'erreur "Moved Permanently", comprenez "Déplacé définitivement". La redirection qui suivra cette erreur prendra donc tout son sens pour un moteur de recherche qui pourra ainsi mettre à jour son index.

L'exemple

Prenons donc CodeWeb comme exemple. Remarquez que les adresses de nos pages sont actuellement construites ainsi :

http://codeweb.free.fr/dotclear/index.php/2007/11/12/24-deplacement-de-pages-utiliser-l-erreur-301

Sur notre nouveau nom de domaine elles seront formées ainsi :

http://www.code-web.org/index.php/2007/11/12/24-deplacement-de-pages-utiliser-l-erreur-301

On peut donc constater qu'elle possède une partie commune. C'est la partie de l'URL qui est totalement indépendant du nom de domaine. C'est celle-ci que nous allons récupérer pour effectuer la redirection vers la bonne page. Nous remplacerons donc le fichiers index.php actuellement en place dans le répertoire /dotclear/ par le script suivant :

<?php
	// On créé la nouvelle URL à partir de l'ancienne que l'on vient de récupérer
	// via $_SERVER['REQUEST_URI']
	$link = 'http://www.code-web.org/'.str_replace('/dotclear/','',$_SERVER['REQUEST_URI']);
 
	// L'erreur 301
	header("HTTP/1.1 301 Moved Permanently");
 
	// La redirection
	header('location: '.$link);
 
	// On indique qu'il n'y a plus rien à voir ici
	header("Connection: close");
?>

Ainsi, lorsqu'un visiteur tentera de se rendre sur http://codeweb.free.fr/dotclear/index.php il sera automatiquement redirigé ver http://www.code-web.org/index.php. De même pour les moteurs de recherche qui pourront, en plus, mettre a jour leur index avec les nouvelles adresses.