Sitemap HTML : avantages, différence avec le sitemap XML et création

Le terme sitemap est utilisé pour désigner différentes formes de plans d'un site web, créés à différents stades de développement du site. Quel qu'il soit, un sitemap est utile à des fins SEO.

Quelle différence entre un sitemap HTML et un sitemap XML ?

Le sitemap HTML et le sitemap XML désignent tous les deux un plan du site, et ont en commun de jouer un rôle SEO. Sitemap HTML et sitemap XML, toutefois, ne sont pas créés au même moment et ne s'adressent pas aux mêmes destinataires.

Exemple de sitemap HTML :

Le sitemap HTML est créé pendant la phase de développement du site web. Le développeur intègre, généralement dans le footer, une liste de liens de redirection vers des pages du site. La liste, bien entendu, est structurée de manière logique et affichée de manière esthétique. Le sitemap HTML s'adresse aux visiteurs du site : ils peuvent consulter le sitemap pour accéder facilement à une page qu'ils recherchent. Le menu principal de navigation est ainsi allégé, et l'expérience utilisateur est améliorée.

Exemple de sitemap XML :

Le sitemap XML est un plan de site créé majoritairement au format XML, et dans une moindre mesure aux formats RSS, mRSS, Atom 1.0 ou encore au format texte. En tant que plan de site, le sitemap XML liste les pages du site web : c'est une succession d'URLs, enregistrée telle quelle dans un fichier en .xml. Le sitemap XML est envoyé à Google au moment de la mise en ligne du site web, en intégrant une commande sitemap dans le fichier robots.txt. Le sitemap XML s'adresse aux robots d'indexation : il présente le plan du site aux robots, pour leur permettre de référencer l'ensemble des pages.

Quand Google parle de sitemap, il est fait référence au sitemap XML. Quand un UX designer parle de sitemap, il fait probablement référence au sitemap HTML. Des éditeurs de logiciels, également, parlent de sitemap. Ces éditeurs proposent des « sitemap builders », c'est-à-dire des outils de conception de l'architecture d'un site. Il s'agit dans ce contexte de sitemap visuel, ou de plan de site visuel.

Exemple de sitemap visuel :

Le sitemap visuel est créé avant de développer le site, et s'adresse au développeur web. Le plan est une représentation graphique de l'arborescence du site web.

Quels sont les avantages d'un sitemap HTML ?

Alléger le menu principal de navigation

Un internaute qui arrive sur un site web doit pouvoir accéder à la totalité des pages sans quitter le site. Le menu de navigation, le maillage interne ainsi que les boutons d'action permettent de rendre chaque page trouvable sans sortir du site web. Quand un site est particulièrement volumineux, néanmoins, il peut s'avérer complexe, ou néfaste sur le plan de l'UX design, de lier chaque page. Le sitemap HTML est une possibilité supplémentaire de lier chaque page, sans nuire à l'esthétique ni à l'ergonomie du site.

Grâce au sitemap HTML, au moins un lien pointe vers chaque page : le risque d'avoir des pages orphelines est écarté. Éviter les pages orphelines facilite la navigation de l'internaute, et la localisation de toutes les pages par les moteurs de recherche. Le sitemap HTML, à cet égard, joue un rôle bénéfique sur le plan du parcours utilisateur d'une part, du SEO d'autre part.

Guider la navigation des visiteurs du site

Le sitemap HTML offre l'avantage de lier des pages orphelines, mais aussi de mettre en avant des pages stratégiques. Intégrer dans le sitemap HTML un lien vers une page fréquemment consultée ou vers la page de contact, par exemple, est bénéfique en matière d'UX. L'internaute en effet accède plus rapidement à un contenu stratégique, dans la mesure où le sitemap apparaît dans le footer, où que l'internaute se trouve sur le site. La navigation est plus facile.

À cet égard, le sitemap HTML permet en outre de développer chaque onglet du menu de navigation, sans l'alourdir. Cette pratique est particulièrement utile quand le site web est très volumineux. Exemple : un site de e-commerce vend des dizaines de catégories de vêtements ; au lieu de dérouler ces dizaines de catégories sous un onglet « Catégories », les dizaines de catégories sont listées dans le sitemap HTML en footer. Le nom de chaque catégorie apparaît, et chaque catégorie est accessible facilement, sans perturber l'UX. Au contraire, l'utilisateur est guidé dans sa navigation.

Garantir une bonne expérience utilisateur pour améliorer le SEO

Le sitemap HTML, globalement, améliore l'UX, notamment sur un site très volumineux. Or améliorer l'UX contribue à optimiser un site web pour les moteurs de recherche. Le sitemap HTML, indirectement, améliore donc le SEO.

Comment créer un sitemap HTML ?

1 - Définir l'objectif et l'emplacement du sitemap HTML

Le sitemap, par convention, est intégré dans le footer du site web. Les internautes y sont habitués : ils consultent le bas de page pour trouver un plan de site. L'avantage du footer, en outre, est d'être accessible sur toutes les pages du site : comme le menu de navigation principal, le sitemap HTML est ainsi accessible pendant tout le parcours de navigation.

Le sitemap HTML peut poursuivre divers objectifs.

• Éviter les pages orphelines, quand le site est déjà chargé visuellement.
• Mettre en valeur des pages stratégiques, pour permettre aux visiteurs du site d'y accéder facilement et rapidement.
• Développer un onglet du menu principal de navigation, pour l'alléger tout en facilitant le parcours utilisateur.

Déterminer l'objectif permet de lister les pages à afficher dans le sitemap HTML.

2 - Lister les pages à afficher dans le sitemap HTML

Un sitemap HTML ne présente pas systématiquement le plan exhaustif du site web. Il faut alors lister les pages à intégrer, en se basant sur l'objectif du plan de site. Illustrations :

• Si le sitemap HTML est créé pour aider le visiteur à trouver son chemin sur un site très dense, il faut afficher les contenus les plus consultés.
• Si le sitemap HTML au contraire sert à mailler des pages orphelines, ce sont les contenus les moins consultés qui y figurent.

Concrètement, cette étape de création de sitemap HTML consiste à faire la liste des URLs du site web à intégrer dans le plan de site. Quand le nombre de pages est très important, il est judicieux d'utiliser un outil générateur de sitemaps XML pour accélérer et fiabiliser le travail. Il est alors possible de déterminer, URL après URL, l'intérêt de lier les pages dans le sitemap HTML. Les URLs pertinentes peuvent alors être copiées-collées.

3 - Intégrer les liens de redirection dans le footer

Le développeur code les liens de redirection dans la balise >footer< du fichier HTML.

• Sur le plan technique, il s'agit d'intégrer les liens de redirection avec l'élément HTML a href.
• Sur le plan de l'UX, il faut choisir le texte cliquable à afficher, c'est-à-dire les titres des pages tels qu'ils apparaissent dans le plan de site.

Il faut garder en tête que le sitemap HTML est destiné aux utilisateurs du site web. Il doit donc être structuré, pour clarifier la lecture. Il doit également s'afficher de manière esthétique et harmonieuse, pour être agréable visuellement.

Le développeur veille à vérifier le sitemap HTML quand il met à jour le site web.

Pour aller plus loin, découvrez comment créer des contenus parfaitement optimisés pour les moteurs de recherche en téléchargeant la checklist de rédaction SEO, ou découvrez l'outil SEO de HubSpot.