On a Magento 2 e-commerce website, clean and semantic HTML isn’t just a matter of code quality — it directly impacts SEO, accessibility, and user experience.
In this article, we’ll focus on three often overlooked yet essential HTML elements: breadcrumbs, headings (Hn), and alt attributes on images.
Breadcrumbs: Great for SEO and UX
Breadcrumbs indicate the navigation path from the homepage. They are a secondary navigation element, but with powerful benefits:
- Help search engines understand your site’s structure
- Reduce bounce rate by encouraging upward navigation
- Often appear in Google’s rich snippets (if marked with
schema.org)
Magento 2 tips:
- Make sure breadcrumbs are visible on product, category, CMS, and landing pages
- Use JSON-LD markup as recommended by Google
- Use
page.main.titleandbreadcrumbsblocks consistently in.phtmltemplates
Heading Tags (Hn): Not Just for Styling
Heading tags (h1, h2, h3, etc.) provide a content hierarchy. Don’t use them for design purposes only.
- Use one
h1per page representing the main subject - Ensure all other headings follow a logical structure
- Don’t skip heading levels (e.g., avoid jumping from
h1toh4)
On Magento 2:
- Category pages: the category name should be inside an
h1 - Product pages:
h1= product name,h2= additional info - The Breeze theme makes it easy to adjust heading tags via
.phtmlor layout XML
Alt Attributes: Accessibility Meets SEO
The alt attribute (alternative text) is key for:
- Accessibility (screen readers)
- Image SEO (Google Images drives traffic)
- Fallback content if images fail to load
Best practices:
- Write concise, useful descriptions
- Avoid redundancy (“image of product”, “logo photo”)
- Magento 2 allows setting
alttext in the backend (product or CMS)
Conclusion
Proper HTML structure in Magento 2 boosts SEO, enhances accessibility, and improves conversion rates. Combine good markup with a modern theme like Breeze, and you offer both Google and users a better experience.