Back to Details

breadcrumb-generator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Components: Breadcrumb Navigation

组件：面包屑导航

Guides breadcrumb implementation for SEO, UX, and GEO. Breadcrumbs show users their location in the site hierarchy and help search engines understand content taxonomy. Well-implemented breadcrumbs can increase CTR by 20–30%, reduce bounce rates by up to 30%, and strengthen internal linking.
When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
本指南针对SEO、UX和GEO场景提供面包屑导航的实现方案。面包屑能让用户清楚自己在站点层级中的位置，同时帮助搜索引擎理解内容分类体系。实现良好的面包屑可将点击率提升20-30%，降低跳出率最高达30%，并强化内部链接。
调用时机：首次使用时，如果有帮助，可先用1-2句话说明本技能涵盖的内容及其重要性，再提供主要输出内容。后续使用或用户要求跳过说明时，直接输出主要内容。

Scope

适用范围

  • Breadcrumb UI: Visual trail (Home > Category > Page)
  • BreadcrumbList schema: JSON-LD structured data for rich results
  • Placement: Typically below header, above main content
  • 面包屑UI：可视化路径（首页 > 分类 > 页面）
  • BreadcrumbList schema：用于富结果展示的JSON-LD结构化数据
  • 放置位置：通常位于页眉下方、主内容上方

Breadcrumb Types

面包屑类型

TypeUse caseRecommendation
Location-basedReflects site hierarchy (Home > Blog > SEO > Page)Recommended — most SEO-friendly; clear structure
Attribute-basedShows product attributes (Home > Electronics > Phone > iPhone 15)E-commerce; product classification
Path-basedShows user's browsing pathAvoid — different users, different paths; can cause confusion
Default: Use location-based for most sites. Use attribute-based for e-commerce product pages.
类型使用场景推荐建议
Location-based（基于位置）反映站点层级结构（首页 > 博客 > SEO > 页面）推荐 — 对SEO最友好；结构清晰
Attribute-based（基于属性）展示产品属性（首页 > 电子产品 > 手机 > iPhone 15）适用于电商场景；产品分类展示
Path-based（基于路径）展示用户的浏览路径避免使用 — 不同用户的浏览路径不同；易造成混淆
默认方案：大多数站点使用基于位置的面包屑。电商产品页面使用基于属性的面包屑。

Initial Assessment

初始评估

Check for product marketing context first: If 
.claude/product-marketing-context.md
or 
.cursor/product-marketing-context.md
exists, read it for site structure and key pages.
Identify:
  1. Site structure: Hierarchy depth (e.g., Home > Category > Subcategory > Product)
  2. Page types: Blog, e-commerce, docs, etc.
  3. Multi-category: Products in multiple categories—need canonical path
优先检查产品营销上下文：如果存在
.claude/product-marketing-context.md
或
.cursor/product-marketing-context.md
文件，请读取该文件以了解站点结构和关键页面信息。
需要明确：
  1. 站点结构：层级深度（例如：首页 > 分类 > 子分类 > 产品）
  2. 页面类型：博客、电商、文档等
  3. 多分类情况：产品属于多个分类时，需要定义规范路径

Best Practices

最佳实践

Structure & Hierarchy

结构与层级

PracticeGuideline
Depth3–5 levels optimal; avoid very long trails
Anchor textKeyword-rich, human-readable; descriptive
ConsistencySame pattern across all pages (blog, category, product)
Canonical pathFor items in multiple categories, define one canonical breadcrumb to avoid diluted link equity
实践方案指导原则
层级深度最优为3-5层；避免过长的路径
锚文本包含关键词、易读；描述性强
一致性所有页面（博客、分类、产品）使用相同的模式
规范路径对于属于多个分类的条目，定义唯一的规范面包屑路径，避免链接权重分散

Schema (BreadcrumbList)

Schema（BreadcrumbList）

RequirementGuideline
FormatJSON-LD in 
<script type="application/ld+json">
URLsAbsolute URLs with https:// for each item
PositionSequential integers starting from 1
MatchSchema must match visible breadcrumbs exactly
OrderItemListOrderAscending (position 1 first)
要求指导原则
格式使用
<script type="application/ld+json">
包裹的JSON-LD
URL每个条目使用带https://的绝对URL
位置序号从1开始的连续整数
匹配性Schema必须与可见的面包屑完全匹配
顺序使用ItemListOrderAscending（序号1的条目排在最前面）

Placement & Design

放置与设计

PracticeGuideline
PositionBelow nav bar or above page title; top of content area
VisualSmaller font, lighter color; avoid competing with main content
SeparatorClear separator (>, /, ›); consistent across site
NamingMatch page title or nav menu; concise, descriptive
实践方案指导原则
位置位于导航栏下方或页面标题上方；内容区域顶部
视觉样式较小字体、浅色调；避免与主内容竞争注意力
分隔符使用清晰的分隔符（>、/、›）；全站保持一致
命名与页面标题或导航菜单匹配；简洁、描述性强

UX & Accessibility

UX与可访问性

PracticeGuideline
MobileTappable; short, readable text; high contrast
Long trailsHorizontal scroll container rather than truncating
Current pageLast item non-linked; use 
aria-current="page"
Screen readers
nav
with 
aria-label="Breadcrumb"
; proper landmark
实践方案指导原则
移动端适配可点击；文字简短易读；高对比度
长路径处理使用水平滚动容器，而非截断文字
当前页面最后一个条目不设置链接；使用
aria-current="page"
屏幕阅读器适配使用带有
aria-label="Breadcrumb"
的
nav
标签；正确设置地标

SEO Impact

SEO影响

  • Internal linking: Breadcrumbs distribute link equity
  • Crawlability: Helps crawlers understand taxonomy
  • GEO: BreadcrumbList appears frequently on pages cited by Google AI Mode
  • Note: Google removed visual breadcrumbs from mobile SERPs (Jan 2025) to save space, but schema and algorithmic value remain important for crawlers and AI
  • 内部链接：面包屑可分配链接权重
  • 可爬取性：帮助爬虫理解站点分类体系
  • GEO：BreadcrumbList经常出现在Google AI模式引用的页面中
  • 注意：Google于2025年1月移除了移动端搜索结果页（SERP）中的可视化面包屑以节省空间，但Schema和算法价值对爬虫和AI仍然重要

Implementation

实现方案

Semantic HTML

语义化HTML

html
<nav aria-label="Breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/"><span itemprop="name">Home</span></a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/category/"><span itemprop="name">Category</span></a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
      <span itemprop="name">Current Page</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>
html
<nav aria-label="Breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/"><span itemprop="name">Home</span></a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/category/"><span itemprop="name">Category</span></a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
      <span itemprop="name">Current Page</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

BreadcrumbList JSON-LD

BreadcrumbList JSON-LD

html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Category",
      "item": "https://example.com/category/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Current Page",
      "item": "https://example.com/category/current-page/"
    }
  ]
}
</script>
html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Category",
      "item": "https://example.com/category/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Current Page",
      "item": "https://example.com/category/current-page/"
    }
  ]
}
</script>

Next.js (dynamic)

Next.js（动态实现）

Generate BreadcrumbList from route segments or page metadata. Ensure 
item
URLs are absolute. Use 
next-seo
BreadcrumbJsonLd or custom component.
从路由段或页面元数据生成BreadcrumbList。确保
item
的URL为绝对路径。使用
next-seo
的BreadcrumbJsonLd组件或自定义组件。

Multiple Breadcrumb Paths

多面包屑路径

When a page is reachable via multiple paths (e.g., product in multiple categories), Google supports multiple BreadcrumbList on the same page. Use an array of BreadcrumbList objects; define a canonical path to avoid diluted link equity when possible.
html
<script type="application/ld+json">
[
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [ /* path A */ ]
  },
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [ /* path B */ ]
  }
]
</script>
当一个页面可通过多条路径访问时（例如：产品属于多个分类），Google支持在同一页面使用多个BreadcrumbList。使用BreadcrumbList对象数组；尽可能定义规范路径以避免链接权重分散。
html
<script type="application/ld+json">
[
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [ /* path A */ ]
  },
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [ /* path B */ ]
  }
]
</script>

When to Use Breadcrumbs

何时使用面包屑

Site typeUse case
E-commerceCategory > Subcategory > Product
BlogHome > Blog > Category > Post (see article-page-generator for article page structure)
DocsHome > Docs > Section > Page
Large sitesAny site with 3+ level hierarchy
Skip on flat sites (e.g., single-page, 1–2 level depth).
Deep pages: For 6+ levels, consider omitting middle levels; show only the most important categories to avoid clutter.
站点类型使用场景
电商站点分类 > 子分类 > 产品
博客站点首页 > 博客 > 分类 > 文章（文章页面结构可参考article-page-generator）
文档站点首页 > 文档 > 章节 > 页面
大型站点任何层级深度≥3的站点
无需使用：扁平化站点（例如：单页站点、1-2层深度的站点）。
深层页面：对于层级≥6的页面，可考虑省略中间层级；仅显示最重要的分类以避免界面杂乱。

Platform Notes

平台说明

PlatformOptions
WordPressYoast SEO, Rank Math, Breadcrumb NavXT
Next.jsnext-seo BreadcrumbJsonLd, custom from route segments
Shopify, Drupal, JoomlaBuilt-in or plugin support
平台实现选项
WordPressYoast SEO、Rank Math、Breadcrumb NavXT
Next.jsnext-seo的BreadcrumbJsonLd组件、从路由段自定义实现
Shopify、Drupal、Joomla内置支持或插件支持

Common Errors

常见错误

ErrorFix
Relative URLs in schemaUse absolute URLs (https://)
Schema doesn't match visible trailKeep schema and UI in sync
Missing positionInclude sequential position (1, 2, 3…)
Last item linkedCurrent page typically not a link
Too many levelsLimit to 5–7; omit middle levels for deep paths
Inaccurate pathBreadcrumb must reflect actual site structure
No schemaAdd BreadcrumbList; otherwise no SERP breadcrumbs
错误修复方案
Schema中使用相对URL使用绝对URL（https://开头）
Schema与可见路径不匹配保持Schema和UI同步
缺少位置序号添加连续的位置序号（1、2、3…）
最后一个条目设置了链接当前页面通常不设置为链接
层级过多限制在5-7层；对于深层路径可省略中间层级
路径不准确面包屑必须反映实际的站点结构
未添加Schema添加BreadcrumbList；否则搜索结果页不会显示面包屑

Output Format

输出格式

  • Structure recommendation (levels, labels)
  • BreadcrumbList JSON-LD (with absolute URLs)
  • HTML structure (semantic, accessible)
  • Placement (below header, above main)
  • Validation: Rich Results Test, Schema Markup Validator, Search Console enhanced report
  • 结构建议（层级、标签）
  • BreadcrumbList JSON-LD（包含绝对URL）
  • HTML结构（语义化、可访问）
  • 放置位置（页眉下方、主内容上方）
  • 验证工具：富结果测试、Schema标记验证器、搜索控制台增强报告

Related Skills

相关技能

  • article-page-generator: Article pages use breadcrumbs (Home > Blog > Category > Post)
  • schema-markup: BreadcrumbList is a core schema type
  • navigation-menu-generator: Header nav; breadcrumbs complement primary nav
  • internal-links: Breadcrumbs are internal links; distribute link equity
  • site-crawlability: Breadcrumbs help crawlers understand structure
  • category-page-generator: Category hierarchy in breadcrumbs
  • products-page-generator: Product pages often need breadcrumbs (Category > Product)
  • article-page-generator：文章页面使用面包屑（首页 > 博客 > 分类 > 文章）
  • schema-markup：BreadcrumbList是核心Schema类型
  • navigation-menu-generator：页眉导航；面包屑是主导航的补充
  • internal-links：面包屑属于内部链接；可分配链接权重
  • site-crawlability：面包屑帮助爬虫理解站点结构
  • category-page-generator：面包屑中的分类层级
  • products-page-generator：产品页面通常需要面包屑（分类 > 产品）