Fil d’Ariane, Hn, attributs alt : comment bien structurer son HTML sur Magento 2

Sur un site e-commerce Magento 2, la qualité du balisage HTML joue un rôle crucial pour le référencement naturel et l’accessibilité. Un HTML bien structuré améliore la compréhension de vos pages par les moteurs de recherche, tout en facilitant la navigation pour les utilisateurs, notamment sur mobile et pour les personnes en situation de handicap.

Dans cet article, nous faisons le point sur trois éléments souvent négligés mais essentiels : le fil d’Ariane, les titres hiérarchisés (Hn) et les attributs alt sur les images.

Le fil d’Ariane : utile pour le SEO et l’UX

Le fil d’Ariane (breadcrumb) indique le chemin de navigation depuis la page d’accueil. C’est un élément de navigation secondaire, mais aux effets majeurs :

• Il améliore la compréhension structurelle du site pour les moteurs.
• Il réduit le taux de rebond en facilitant le retour vers une catégorie supérieure.
• Il s’affiche souvent dans les résultats Google (rich snippet si balisé en schema.org).

Bonnes pratiques dans Magento 2 :

• Assurez-vous qu’il soit visible sur les pages produits, catégories, CMS…
• Utilisez la structure JSON-LD recommandée par Google.
• Utilisez le bloc page.main.title et breadcrumbs de manière cohérente dans vos templates .phtml.

Titres Hn : une hiérarchie logique, pas décorative

Les balises h1, h2, h3, etc. structurent le contenu. Elles ne doivent pas être utilisées uniquement pour le style.

• 1 seul h1 par page, reflétant le contenu principal.
• Les autres balises (h2, h3) doivent suivre une hiérarchie logique, pas une cascade visuelle.
• Évitez de sauter des niveaux (ex : passer de h1 à h4).

Sur Magento 2 :

• Les pages catégories doivent avoir le nom de la catégorie en h1, pas en div.
• Les fiches produits : h1 = nom du produit, h2 = infos complémentaires.
• Le thème Breeze permet de modifier les h1/h2 facilement en .phtml ou via les layouts XML.

Attributs alt : ne négligez pas les images

L’attribut alt (texte alternatif) est crucial pour :

• L’accessibilité (lecteurs d’écran),
• Le SEO des images (Google Images génère beaucoup de trafic),
• Le fallback en cas de problème d’affichage.

Bonnes pratiques :

• Décrire l’image de façon précise mais utile.
• Éviter les répétitions (“image de produit”, “photo de logo…”).
• Magento 2 permet d’ajouter le texte alt depuis le back-office produit ou CMS (via WYSIWYG).

Conclusion

Structurer correctement le HTML sur Magento 2 n’est pas une question de “propreté” seulement : c’est un levier de performance SEO, d’accessibilité et de conversion. En combinant de bonnes pratiques de balisage avec un thème moderne comme Breeze, vous facilitez le travail de Google… et celui de vos utilisateurs.