面包屑导航通过语义化HTML结构提升可访问性和SEO，推荐使用<ol>或<ul>构建层级链接，配合<nav>与aria-label明确导航区域，当前页面用aria-current="page"标识，并可通过JSON-LD添加Schema标记优化搜索引擎展示。
面包屑导航能帮助用户了解当前页面在网站结构中的位置，并快速返回上级页面。用HTML实现面包屑导航，关键在于语义化结构和适当的标记方式。
使用ol或ul构建层级结构
面包屑通常是一组按层级排列的链接，适合使用有序列表<ol>或无序列表<ul>来组织。推荐使用<ol>，因为它体现了浏览路径的顺序性。
基本结构如下：
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">首页</a></li>
<li><a href="/products/">产品</a></li>
<li><a href="/products/electronics/">电子产品</a></li>
<li><span aria-current="page">手机</span></li>
</ol>
</nav>
说明：
立即学习“前端免费学习笔记（深入）”；
-
<nav>标签标明这是一个导航区域，提升可访问性。 -
aria-label="Breadcrumb"让屏幕阅读器能正确识别用途。 - 当前页面项使用
<span>并添加aria-current="page"，表示当前位置，避免重复链接。
使用div配合a标签的简洁写法
如果不需要列表样式，也可以用<div>包裹链接，通过CSS控制分隔符。
示例：
<nav aria-label="Breadcrumb">
<div>
<a href="/">首页</a> >
<a href="/products/">产品</a> >
<a href="/products/electronics/">电子产品</a> >
<span aria-current="page">手机</span>
</div>
</nav>
这种写法更直观，但语义稍弱，适合简单场景。
结合微数据或Schema增强SEO
为了让搜索引擎更好理解面包屑结构，可以添加Schema.org的BreadcrumbList标记。
示例（使用JSON-LD）：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "首页",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "产品",
"item": "https://example.com/products/"
},
{
"@type": "ListItem",
"position": 3,
"name": "电子产品",
"item": "https://example.com/products/electronics/"
},
{
"@type": "ListItem",
"position": 4,
"name": "手机"
}
]
}
</script>
这不会影响页面显示，但有助于在搜索结果中展示更清晰的路径。
基本上就这些。结构清晰、语义正确、兼顾可访问性和SEO，是高质量面包屑导航的关键。不复杂但容易忽略细节。
