Optimisation du code source HTML pour le référencement

L’importance du code source

L’optimisation du code source côté client, c’est-à-dire le code interprété par votre navigateur, est une étape importante dans le travail de référencement d’un site Internet.

Vous avez sans doute déjà entendu parler de l’importance de plusieurs éléments comme :

  • la balise title ;
  • la balise h1 ;
  • l’URL de la page, c’est-à-dire l’adresse affichée en haut de votre navigateur.

Nous allons détailler les principes de ces trois éléments importants pour le référencement.

L’URL, c’est quoi ?

L’URL correspond à l’adresse Internet de la page sur laquelle on se trouve.

Par exemple :

http://www.monsite.com/page.html

Cette adresse correspond à une page précise du site. Elle est généralement affichée dans la barre d’adresse de votre navigateur, située en haut de l’écran.

Une adresse web peut être composée :

  • d’un sous-domaine ;
  • d’un nom de domaine ;
  • d’une extension ;
  • d’un / ;
  • du nom de la page, aussi appelé slug.

L’optimisation peut donc intervenir à la fois sur le nom de domaine, mais aussi sur le nom de la page.

Les URL courtes

Lorsqu’une URL contient un identifiant, généralement un nombre, celui-ci correspond souvent au numéro d’enregistrement de la page ou de l’article en base de données.

Exemples d’URL avec identifiant

/page-info-20.html
/article-212.html
/blog/512.php

Dans ces exemples :

  • /page-info-20.html peut correspondre à une page d’information dont l’identifiant est 20 ;
  • /article-212.html peut correspondre à une fiche article, par exemple sur un site e-commerce ;
  • /blog/512.php peut correspondre à une page de blog.

L’identifiant n’est pas vraiment utile pour le visiteur, mais il permet au programme d’afficher le contenu concerné.

Il est bien entendu possible de faire sans identifiant, par exemple en recherchant directement le contenu via le champ slug.

Avantages des URL courtes

  • Elles sont plus faciles à retenir.
  • Elles sont plus simples à recopier.
  • Elles sont plus pratiques à copier-coller.
  • Elles limitent le risque de sur-optimisation.
  • Elles sont souvent plus faciles à mettre en place pour les développeurs, car elles ne nécessitent pas forcément de gérer un titre dans l’URL.

Inconvénients des URL courtes

  • Elles sont moins explicites.
  • Elles donnent peu ou pas d’informations sur le sujet de la page.
  • Elles peuvent être moins attractives dans les résultats de recherche.

Les URL propres

Les URL propres sont des URL contenant des mots-clés lisibles.

On parle souvent d’URL propres lorsque le nom de la page indique clairement le contenu traité.

Exemples d’URL propres

/infos/mentions-legales.php
/mentions-legales.html
/articles/chaussure-femme-rouge-13.html
/article-13-chaussure-femme-rouge.php

Dans ces exemples :

  • /infos/mentions-legales.php correspond à une page d’information sur les mentions légales ;
  • /mentions-legales.html correspond à la même page avec une structure différente ;
  • /articles/chaussure-femme-rouge-13.html peut correspondre à une page produit d’un site e-commerce ;
  • /article-13-chaussure-femme-rouge.php correspond à la même idée, avec une autre structure d’URL.

Avantages des URL propres

Les URL propres permettent de mieux renseigner l’internaute, même si celui-ci ne regarde pas toujours l’adresse de la page.

Elles peuvent aussi être utiles dans les résultats des moteurs de recherche. Lorsqu’une URL est lisible et compréhensible, elle peut inspirer davantage confiance qu’une URL composée uniquement d’identifiants.

Une URL propre peut également participer à l’optimisation du référencement, notamment lorsque les mots-clés présents dans l’URL sont cohérents avec le contenu de la page.

Enfin, une URL lisible est souvent plus attractive, à condition de ne pas tomber dans l’excès.

Précautions à prendre avec les URL

Il faut faire attention aux URL trop longues ou trop optimisées.

Prenons l’exemple d’un site de petites annonces lié à l’achat ou à la location de voitures.

Exemple d’URL trop longue

http://www.site.com/achat-voiture-acheter-voiture-ville-marseille-paca-provence-242.html

Une URL trop longue peut être problématique pour plusieurs raisons :

  • elle est difficile à lire ;
  • elle est difficile à communiquer oralement ;
  • elle peut être tronquée lors d’un partage ;
  • elle peut renvoyer vers une erreur 404 si elle est mal copiée ;
  • elle peut donner une impression de sur-optimisation.

Même si la plupart des internautes ajoutent les pages intéressantes à leurs favoris, ils peuvent parfois vouloir transmettre une URL par e-mail, téléphone, message ou messagerie instantanée. Dans ce cas, une adresse plus courte est préférable.

Risque de sur-optimisation

Une URL comme celle-ci peut être considérée comme trop optimisée :

http://www.site.com/achat-voiture-acheter-vehicule-ville-marseille-paca-provence-242.html

Elle contient trop de variantes proches autour du même sujet.

À l’inverse, une URL plus courte et plus claire est préférable :

http://www.site.com/achat-voiture-marseille-242.html

Il vaut mieux limiter le nombre de mots-clés importants dans une URL, afin d’éviter la sur-optimisation et la dilution du signal.

Utiliser des catégories pour structurer les URL

Pour éviter les URL longues et sur-optimisées, il est possible d’utiliser une structure par catégories.

Exemple de structure

http://www.site.com/achat-voiture
http://www.site.com/achat-voiture/marseille
http://www.site.com/achat-voiture/marseille/annonce-242.html

Dans cet exemple :

  • achat-voiture recense toutes les annonces d’achat de voitures ;
  • achat-voiture/marseille liste les annonces d’achat de voitures à Marseille ;
  • achat-voiture/marseille/annonce-242.html correspond à une annonce précise.

Pour la location, il suffirait par exemple de remplacer achat-voiture par location-voiture.

Cette façon de structurer les URL permet d’obtenir des adresses :

  • claires pour les visiteurs ;
  • compréhensibles pour les moteurs de recherche ;
  • organisées par catégories ;
  • optimisées sans abus.

Attention aux changements d’URL

Il faut éviter de modifier la structure des URL d’un site, sauf si cela est vraiment nécessaire.

La stabilité doit primer.

Les redirections 301 permettent de rediriger les visiteurs, les moteurs de recherche et une partie de la popularité des anciennes URL vers les nouvelles. Toutefois, changer une structure d’URL reste une opération sensible qui doit être réfléchie.

La balise title

La balise title correspond au titre de la page.

Elle s’affiche généralement :

  • dans l’onglet ou la barre de titre du navigateur ;
  • dans les résultats des moteurs de recherche.

Elle ne s’affiche pas directement dans le contenu visible de la page.

Cette balise est très importante pour le référencement. Elle est située dans la partie head du code source HTML.

Syntaxe

<title>Nom de votre page</title>

L’ordre des mots-clés qui composent la balise title est important. Les mots placés au début auront généralement plus de poids que ceux placés à la fin.

Il est conseillé de limiter le nombre de mots-clés pour éviter :

  • la sur-optimisation ;
  • la dilution du poids des mots-clés ;
  • les titres trop longs dans les résultats de recherche.

Il faut aussi éviter de dépasser environ 70 caractères afin que le titre puisse s’afficher correctement dans les SERP.

Exemple de balise title

<title>Achat d’une voiture à Marseille — annonce 242</title>

La balise h1

Les balises de type hX, où X correspond à un nombre, servent à structurer un texte en titres et sous-titres.

La balise h1 représente généralement le titre principal de la page. Les balises h2, h3, h4, etc. permettent ensuite de structurer les différentes parties du contenu.

En général, les webmasters utilisent une taille de police plus grande pour le h1, puis progressivement plus petite pour les niveaux inférieurs.

Exemple de structure de page

<h1>Mon exposé sur...</h1>

<h2>Préambule</h2>

<h2>Introduction</h2>

<h2>Les principes</h2>

<h2>Mes tests</h2>

<h3>Test 1</h3>

<h3>Test 2</h3>

<h3>Test 3</h3>

<h2>Conclusion</h2>

<h2>Définitions / lexique</h2>

Cette structure permet de hiérarchiser clairement le contenu de la page.

Le visiteur comprend plus facilement l’organisation du texte, et les moteurs de recherche peuvent mieux interpréter les différentes sections du document.

Conclusion

L’optimisation du code source côté client ne se limite pas à quelques ajustements techniques. Elle participe directement à la lisibilité, à la compréhension et à la qualité globale d’une page.

Les trois éléments présentés ici jouent un rôle important :

  • l’URL aide à identifier clairement le contenu de la page ;
  • la balise title donne un titre lisible et optimisé aux moteurs de recherche ;
  • la balise h1 et les autres balises de titres structurent le contenu.

Une bonne optimisation consiste à rester clair, cohérent et naturel, sans tomber dans la sur-optimisation.