Sitemap HTML Shopify : des bénéfices SEO considérables pour votre boutique

Lorsque vous créez votre boutique Shopify, un sitemap XML est généré automatiquement. Mais pour obtenir un sitemap HTML Shopify pour votre boutique, vous devrez peut-être aller un peu plus loin. Vous vous demandez peut-être ce qu’est exactement un sitemap ? Comme son nom l’indique, c’est littéralement une carte de votre boutique.

Les sites web contiennent aujourd’hui tellement de contenus, d’informations et de produits qu’il peut être difficile de trouver ce que l’on cherche. Un sitemap HTML Shopify aide les robots d’exploration des moteurs de recherche à parcourir toutes les pages de votre boutique.

Qu’est-ce qu’un sitemap HTML pour une boutique Shopify ?

Le sitemap HTML de votre boutique Shopify est une table des matières qui propose des liens cliquables vers les différentes pages de votre site, souvent accompagnés de courtes descriptions.

Disposer d’un sitemap HTML permet aux visiteurs de naviguer plus facilement sur votre site et leur offre une expérience agréable.

Notez que les sitemaps HTML sont créés pour les utilisateurs, et non pour Google ou les autres moteurs de recherche. Contrairement aux sitemaps XML, vous ne pouvez pas soumettre un sitemap HTML au programme Google Sitemaps en tant que tel, mais il est fortement recommandé pour améliorer la navigation des utilisateurs. Les moteurs de recherche comme Google préfèrent les sites dotés d’une structure claire et de liens textuels, qui leur permettent d’indexer et de comprendre plus facilement votre contenu.

Si la création d’un Google Sitemap au format XML correct vous semble compliquée, il existe une alternative. Vous pouvez soumettre un simple fichier texte qui liste les URL de votre site. Ainsi, même si vous ne parvenez pas à créer le fichier XML idéal, les moteurs de recherche pourront tout de même trouver et indexer vos pages. En résumé, les Google Sitemaps s’adressent aux moteurs de recherche, tandis que les sitemaps HTML s’adressent aux visiteurs de votre site, et les deux contribuent à une meilleure expérience en ligne.

Exemples de sitemaps HTML Shopify

Le sitemap HTML est une aide à la navigation qui ressemble à une page web classique et affiche une liste complète des pages essentielles pour faciliter la navigation des utilisateurs sur l’ensemble du site. Voici un exemple avec le sitemap d’Apple.

Pour de grandes entreprises comme Microsoft et Airbnb, le sitemap HTML peut jouer un rôle clé dans l’organisation de la grande quantité d’informations et de produits présents sur leurs sites. Il peut inclure des catégories, des sous-catégories et des liens vers les sections principales afin de simplifier l’expérience utilisateur. C’est particulièrement important pour les plateformes de e-commerce comme Walmart, où les clients recherchent souvent des produits ou des catégories précis.

Sitemap HTML, sitemap XML et sitemap d’images

Les sitemaps HTML améliorent la navigation des utilisateurs, les sitemaps XML aident les moteurs de recherche et les sitemaps d’images optimisent la visibilité des images de votre site.

Sitemap HTML

Un sitemap HTML est comme une carte pratique pour les personnes qui visitent un site. C’est une page spéciale qui liste tous les endroits importants du site et renvoie vers chacun d’eux. Tout comme la table des matières d’un livre, un sitemap HTML permet aux utilisateurs de trouver facilement ce qu’ils cherchent et d’explorer rapidement les différentes parties du site.

Sitemap XML

Voyez le sitemap XML comme un guide secret destiné aux moteurs de recherche. C’est un fichier qui contient la liste de toutes les pages d’un site, avec quelques informations supplémentaires comme la date de dernière mise à jour de chaque page. Il aide les moteurs de recherche à comprendre la structure du site et à trouver facilement toutes les pages, pour qu’ils ne passent à côté de rien d’important.

Sitemap d’images

Un sitemap d’images est une carte spéciale réservée aux images d’un site. C’est un peu comme le guide d’une galerie : il liste toutes les images et fournit des détails à leur sujet. Il aide les moteurs de recherche à reconnaître ces images et à les afficher dans les résultats de recherche, ce qui augmente les chances que les internautes les découvrent quand ils cherchent quelque chose de précis.

Critères de comparaison	Sitemap HTML	Sitemap XML	Sitemap d'images
URL du sitemap	L'URL d'un sitemap HTML mène directement à une page web conviviale qui liste tous les liens importants pour faciliter la navigation.	L'URL d'un sitemap XML mène à un fichier conçu avant tout pour les moteurs de recherche, qui contient des URL et des informations supplémentaires pour faciliter une exploration et une indexation efficaces.	L'URL d'un sitemap d'images mène à un fichier qui organise les URL des images et leurs détails pour améliorer leur visibilité dans la recherche d'images.
Contenu	Contient des liens cliquables et des informations simples qui aident les utilisateurs à trouver les différentes pages du site et à y naviguer.	Contient des URL et des détails supplémentaires qui fournissent aux moteurs de recherche des informations essentielles sur la structure et la dernière modification des pages.	Contient les URL des images ainsi que des détails associés, ce qui aide les moteurs de recherche à indexer et à classer les images pour une meilleure visibilité.
Conçu pour	Conçu pour une navigation facile par les utilisateurs, afin qu'ils trouvent et atteignent rapidement les différentes sections ou pages du site.	Conçu principalement pour les moteurs de recherche, afin de faciliter l'exploration, l'indexation et la compréhension de la hiérarchie et des modifications du site.	Conçu spécialement pour organiser les images, afin que les moteurs de recherche puissent plus facilement les indexer et les afficher dans les résultats.
Bénéfice SEO	Améliore l'expérience utilisateur grâce à une meilleure navigation, ce qui contribue indirectement à de meilleures performances SEO via un engagement accru.	Améliore le référencement en fournissant des informations précieuses aux moteurs de recherche, pour une indexation plus précise et plus complète des pages web.	Renforce le SEO des images en organisant leurs informations, ce qui améliore leur visibilité et leur classement dans les résultats de recherche d'images.

Pourquoi votre boutique a besoin d’un sitemap HTML

Un sitemap HTML sert de guide convivial : il regroupe tous les liens importants au même endroit et rend la navigation sur le site très simple pour les visiteurs.

Il améliore l’expérience utilisateur

Un sitemap HTML joue un rôle essentiel dans l’amélioration de l’expérience utilisateur globale sur le site de votre boutique. Il agit comme une feuille de route et guide les visiteurs grâce à une présentation claire et organisée de tous les liens importants. Les utilisateurs peuvent ainsi parcourir facilement les différentes sections, découvrir vos produits sans effort et profiter d’une navigation agréable.

Il aide à organiser les sites qui ont un large catalogue

Pour les boutiques qui proposent un très grand nombre de produits, un sitemap HTML fait office de rangement virtuel. Il classe et présente proprement tous les produits dans un seul endroit accessible, ce qui permet aux utilisateurs de parcourir le catalogue et de trouver rapidement des articles précis. Cette organisation simplifie le parcours d’achat, surtout dans les boutiques au catalogue très étendu.

Il accélère l’exploration et l’indexation pour un meilleur SEO

Le sitemap HTML sert de guide rapide aux moteurs de recherche et accélère l’exploration et l’indexation des pages. Cette efficacité est essentielle pour le SEO, car elle garantit que les moteurs de recherche comprennent vite le contenu et la structure de votre site, ce qui améliore votre visibilité et votre classement dans les résultats.

Il crée des liens internes

Un sitemap HTML crée des liens internes précieux au sein de votre site. Ces liens servent de passerelles entre les différentes pages et sections. En créant ce réseau de liens internes, le sitemap renforce les connexions entre vos contenus, favorise une navigation fluide pour les utilisateurs et soutient vos efforts d’optimisation pour les moteurs de recherche.

Comprendre le sitemap HTML avec StoreSEO : la solution SEO Shopify ultime

Comprendre le SEO Shopify peut être difficile pour n’importe quel entrepreneur du e-commerce. Se former au SEO technique et en particulier à la création de sitemaps pour Shopify peut s’avérer très compliqué si vous ne connaissez pas ces sujets.

Pour vous aider, vous pouvez lire notre guide complet qui vous apprendra tout ce qu’il faut savoir sur les sitemaps Shopify et leur effet sur le classement de votre boutique en ligne dans les résultats de recherche.

La meilleure façon de créer un sitemap HTML sur Shopify : guide en 4 étapes

Voici le guide simplifié en 4 étapes que nous avons préparé pour créer sans effort un sitemap HTML pour votre boutique Shopify :

Étape 1 : installez l’application StoreSEO sur votre boutique

StoreSEO est une application qui vous permet de créer un sitemap HTML pour votre boutique Shopify, en plus de nombreux autres avantages SEO.

Pour installer l’application StoreSEO, vous devez d’abord créer un compte de boutique Shopify.

Commencez par cliquer sur l’option « Applications » dans le tableau de bord de votre interface d’administration Shopify.

Vous serez redirigé vers la page du Shopify App Store.

Recherchez alors « StoreSEO » dans la barre de recherche et cliquez sur l’application. Cliquez ensuite sur le bouton « Installer ».

Vous serez redirigé vers Shopify, où vous pourrez installer l’application en cliquant sur le bouton « Installer l’application ».

Vous devez maintenant remplir tous les formulaires nécessaires en donnant des informations exactes sur votre boutique.

Étape 2 : générez le sitemap HTML

Connectez-vous à votre boutique Shopify et ouvrez l’onglet « Sitemap » du tableau de bord de l’application StoreSEO. Cliquez sur le bouton « HTML Sitemap » pour générer un sitemap.

Cliquez sur le bouton « Generate Now » et le sitemap sera généré automatiquement. Copiez ensuite l’URL de votre sitemap.

Une fois l’URL copiée, cliquez sur le bouton « Edit Navigation ». Vous serez redirigé vers l’onglet Navigation de votre boutique Shopify.

Étape 3 : personnalisez votre sitemap

L’application StoreSEO crée automatiquement une URL de sitemap par défaut, mais vous êtes libre de la personnaliser selon vos préférences ou vos besoins. Pour personnaliser l’URL du sitemap, allez dans Manage Apps -> Apps et Sales Channels -> App Proxy dans l’onglet « Sitemap ». Cliquez sur le bouton « Customize URL », apportez les modifications souhaitées à l’URL du sitemap et enregistrez.

Étape 4 : ajoutez le lien du sitemap HTML à votre boutique

Créez un nouveau menu ou sélectionnez-en un existant à l’emplacement souhaité pour le sitemap HTML. Dans cet exemple, intégrons le sitemap dans le « Footer ». Choisissez le menu et ajoutez un élément en lui donnant un nom et en collant le lien de l’URL du sitemap. Enregistrez ensuite les paramètres du menu pour terminer.

Après avoir ajouté le lien du sitemap HTML à votre boutique, cliquez sur le bouton « Confirm » pour passer à l’étape suivante de personnalisation.

Personnaliser le sitemap HTML

Adaptez le sitemap HTML à votre boutique en ajustant des éléments comme le titre (Heading), la description, le titre de section et en choisissant des couleurs conformes à votre identité de marque. Personnalisez le style et configurez la visibilité pour certains groupes si besoin. Une fois toutes vos préférences définies, cliquez sur le bouton « Save » pour appliquer les modifications.

La création d’un sitemap HTML est une fonctionnalité offerte dans l’application StoreSEO pour votre boutique Shopify. Notez qu’une mention « Powered by StoreSEO » apparaîtra dans votre boutique. Si vous souhaitez la supprimer, il vous suffit de cliquer sur le bouton « Send request » pour transmettre votre demande à l’équipe StoreSEO.

Une fois le sitemap HTML ajouté et personnalisé, la page sitemap de votre boutique ressemblera à l’exemple ci-dessous.

Voilà avec quelle facilité vous pouvez générer un sitemap HTML pour votre boutique Shopify avec StoreSEO.

Méthode alternative : ajouter un sitemap HTML manuellement

Créer un nouveau modèle dans Shopify pour votre sitemap est une opération simple. Commencez par aller dans « Boutique en ligne », puis sélectionnez « Thèmes » dans votre interface d’administration Shopify. Dans la section « Thème en ligne », cliquez sur « Actions », puis sur « Modifier le code. » Ensuite, dans le dossier « Templates », ajoutez un nouveau modèle, choisissez « page » dans le menu déroulant et nommez-le « sitemap ».

Cliquez sur le bouton « Créer le modèle » pour finaliser la configuration. Cette procédure simple vous permet de personnaliser le sitemap de votre boutique en ajoutant quelques lignes de code spécifiques pour améliorer son fonctionnement et son apparence.

C’est dans ce modèle spécial que vous allez placer un code spécifique. Il est essentiel d’insérer le code juste sous la ligne {{ page.content }} afin de conserver le style habituel de la page. Pour afficher tous vos produits et collections, ajoutez le code ci-dessous dans votre nouveau modèle de page :

<div class=”row”><div class=”col-md-6″><h2>Collections</h2><ul>{% for c in collections %}<li><a href=”{{ c.url }}”>{{ c.title }}</a></li>{% endfor %}</ul></div><div class=”col-md-6″><h2>Products</h2><ul>{% for product in collections.all.products %}<li><a href=”{{ product.url }}”>{{ product.title }}</a></li>{% endfor %}</ul></div></div>

Remarque : le code fourni utilise la mise en forme Bootstrap, et si vous souhaitez l’afficher en deux colonnes distinctes, vous devrez peut-être ajuster les classes des div.

Maintenant que le modèle est prêt, il est temps de créer une nouvelle page pour votre sitemap. Voici comment faire : allez dans « Boutique en ligne » dans votre interface d’administration Shopify, cliquez sur « Pages », puis sur le bouton « Ajouter une page » en haut à droite. Intitulez la page « Sitemap » et laissez la zone de contenu vide. Sur la droite, dans la section Modèle, choisissez « page.sitemap ».

Comment personnaliser le sitemap HTML Shopify

Personnaliser votre sitemap HTML Shopify est simple et vous permet de l’adapter à vos besoins précis. Que vous vouliez ajouter des produits, des collections, des pages, des blogs, des pages essentielles comme les mentions légales et la politique de confidentialité, ou encore des liens personnalisés, voici un guide étape par étape

Pour ajouter des produits, des collections, des pages ou des blogs

Étape 1 : accédez au modèle du sitemap

Commencez par retrouver le modèle de sitemap que vous avez créé. Dans votre interface d’administration Shopify, allez dans « Boutique en ligne », puis « Thèmes ». Cliquez sur « Actions », puis sur « Modifier le code ». Recherchez votre modèle de sitemap.

Étape 2 : insérez le code du contenu

Sous {{ page.content }}, ajoutez le code nécessaire pour le contenu que vous voulez afficher, qu’il s’agisse de produits, de collections, de pages ou de blogs. Veillez à une mise en forme correcte et n’hésitez pas à ajuster les classes Bootstrap pour le style.

<div class=”row”><div class=”col-md-6″><h2>Collections</h2><ul>{% for c in collections %}<li><a href=”{{ c.url }}”>{{ c.title }}</a></li>{% endfor %}</ul></div><div class=”col-md-6″><h2>Products</h2><ul>{% for product in collections.all.products %}<li><a href=”{{ product.url }}”>{{ product.title }}</a></li>{% endfor %}</ul></div></div>

Étape 3 : enregistrez et prévisualisez

Après avoir ajouté le contenu souhaité, enregistrez les modifications de votre modèle. Prévisualisez la page pour vérifier que tout s’affiche comme prévu. Vous pouvez faire des ajustements si nécessaire.

Pour ajouter des pages essentielles comme les mentions légales ou la politique de confidentialité

Étape 1 : créez les pages essentielles

Allez dans « Boutique en ligne » dans votre interface d’administration Shopify, cliquez sur « Pages, » puis sélectionnez « Ajouter une page » en haut à droite. Créez les pages de mentions légales ou de politique de confidentialité et laissez la zone de contenu vide.

Étape 2 : liez-les au modèle du sitemap

Saisissez « Politique de confidentialité » dans le champ du titre de la page, puis cliquez sur l’icône de code dans le menu du champ de contenu pour afficher le HTML.

Une fois votre politique de confidentialité rédigée, récupérons son texte. Dans la section « Copiez votre politique de confidentialité », sélectionnez « Copier dans le presse-papiers ».

Revenez sur la page de la boutique Shopify. Collez le code HTML dans le champ de l’éditeur de contenu, puis cliquez sur le bouton Enregistrer.

Étape 3 : enregistrez et vérifiez

Enregistrez la page et vérifiez que les pages essentielles font désormais partie de votre sitemap HTML personnalisé.

Pour ajouter des liens personnalisés

Étape 1 : définissez la structure des liens

Choisissez les liens personnalisés que vous voulez inclure dans votre sitemap HTML, comme des références externes ou des pages supplémentaires de votre site.

Étape 2 : insérez les liens dans le modèle du sitemap

Ouvrez le modèle du sitemap et ajoutez le code des liens personnalisés sous {{ page.content }}, en veillant à une mise en forme et un emplacement corrects.

Étape 3 : vérifiez et enregistrez

Vérifiez que les liens personnalisés s’affichent comme prévu en enregistrant vos modifications et en prévisualisant le sitemap. Faites les ajustements nécessaires : votre sitemap HTML Shopify personnalisé est désormais prêt à améliorer la navigation dans votre boutique.

Comment supprimer le lien vers votre sitemap HTML sur Shopify

Voici une procédure simple, étape par étape, pour supprimer ce lien de votre boutique Shopify.

Étape 1 : accédez à la section Navigation

Connectez-vous à votre interface d’administration Shopify, allez dans « Boutique en ligne », puis cliquez sur « Navigation ».

Étape 2 : choisissez le menu à modifier

Sur la page Navigation, repérez le menu que vous souhaitez modifier et cliquez sur son titre.

Étape 3 : repérez et supprimez l’élément de menu

Dans le menu sélectionné, repérez l’élément précis que vous voulez retirer, puis cliquez sur « Supprimer » à côté de cet élément.

Étape 4 : confirmez la suppression

Après avoir cliqué sur « Supprimer », une demande de confirmation s’affiche : cliquez alors sur « Retirer » pour confirmer la suppression de l’élément de menu sélectionné.

Étape 5 : enregistrez les modifications

Pour que les modifications prennent effet, cliquez sur « Enregistrer le menu » après avoir retiré l’élément souhaité.

Bonnes pratiques de sitemap HTML pour améliorer l’expérience client

Lorsque vous concevez votre sitemap HTML pour améliorer l’expérience client, gardez en tête ces pratiques simples mais efficaces

Une structure claire et organisée

Assurez-vous que votre sitemap HTML a une structure simple, à la manière d’une table des matières, pour que les clients puissent facilement naviguer entre les différentes sections de votre site.

Des libellés de liens descriptifs

Utilisez des libellés clairs et descriptifs pour chaque lien de votre sitemap HTML. Les clients comprennent ainsi facilement quel contenu ils trouveront en cliquant sur un lien.

Un ordre alphabétique ou logique

Classez les liens de votre sitemap HTML par ordre alphabétique ou dans un ordre logique. Les clients trouvent ainsi rapidement ce qu’ils cherchent, ce qui améliore leur navigation.

Un design adapté aux mobiles

Optimisez votre sitemap HTML pour les appareils mobiles afin qu’il reste pratique et facile à parcourir pour les clients qui visitent votre site depuis un smartphone ou une tablette.

Un contenu mis à jour régulièrement

Tenez votre sitemap HTML à jour en ajoutant régulièrement les nouvelles pages et en retirant celles qui sont obsolètes. Vos clients ont ainsi toujours accès aux informations les plus récentes, ce qui améliore leur expérience sur votre site.

Voilà qui conclut notre guide sur le sitemap HTML Shopify. Nous espérons qu’il vous sera utile. Pour recevoir d’autres tutoriels et guides Shopify, abonnez-vous à notre blog.