- 使用
<nav> 标签包裹面包屑导航,并添加 aria-label="Breadcrumb" 属性,提升无障碍性。
- 每个面包屑元素使用
<ol> 或 <ul> 列表,并使用 <li> 标签包裹。
- 当前页面的面包屑元素使用
<strong> 标签强调,其他链接使用 <a> 标签。
- 合理使用
itemscope、itemtype 和 itemprop 属性,提升语义化和 Schema 标记。
如何在网站上添加 SEO 面包屑导航?常见的方式包括:
- 手动编写 HTML 代码,根据页面层级结构添加面包屑。
- 使用 JavaScript 动态生成面包屑导航,可以从 URL 或数据库中提取信息。
- 借助 WordPress、Drupal 等 CMS 平台的插件/扩展功能添加面包屑。
- 利用 Schema.org 的
BreadcrumbList 标记,提升搜索引擎的理解。
无论采用何种方式,面包屑导航的设计都应该让用户快速了解当前位置,也要注重 SEO 优化,为搜索引擎提供更好的页面结构信息。
