Breadcrumb Generator
Add, optimize, or audit breadcrumb trails and BreadcrumbList schema so crawlers and users understand your site hierarchy.
Overview
breadcrumb-generator is an agent skill most often used in Launch (also Build frontend, Grow content) that implements and audits breadcrumb navigation and BreadcrumbList-oriented SEO guidance.
Install
npx skills add https://github.com/kostja94/marketing-skills --skill breadcrumb-generatorWhat is this skill?
- Guides location-based breadcrumb UI (recommended for SEO) vs attribute-based patterns
- Covers BreadcrumbList JSON-LD alongside visual trail placement below header
- Cites UX/SEO impact: up to 20–30% CTR lift and up to 30% bounce reduction when well implemented
- Version 1.2.0 skill with scope split: UI trail, schema, and placement
- Points to schema-markup for JSON-LD depth and navigation-menu-generator for main nav
- Well-implemented breadcrumbs can increase CTR by 20–30%
- Bounce rates can drop by up to 30% with strong breadcrumb UX
- Skill metadata version 1.2.0
Adoption & trust: 747 installs on skills.sh; 586 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Visitors and search engines cannot see where a page sits in your hierarchy, hurting CTR, bounce rate, and internal link signals.
Who is it for?
Solo builders shipping multi-level blogs, docs, or storefronts who need hierarchy display and SEO-aligned trails.
Skip if: Single-page apps with no meaningful hierarchy, or jobs that are only main nav redesign—use navigation-menu-generator instead.
When should I use this skill?
User wants breadcrumbs, breadcrumb trail, breadcrumb nav, BreadcrumbList schema, breadcrumb SEO, or site hierarchy display.
What do I get? / Deliverables
You get a recommended breadcrumb type, placement pattern, and schema coordination plan—then pair with schema-markup for full BreadcrumbList JSON-LD.
- Breadcrumb implementation plan
- Audit notes on trail type and placement
- Handoff checklist for BreadcrumbList JSON-LD
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Launch SEO is the canonical shelf for breadcrumb strategy, rich results, and CTR-focused internal linking guidance. SEO subphase matches explicit triggers around breadcrumbs, BreadcrumbList schema, and breadcrumb SEO intent.
Where it fits
Ship BreadcrumbList-aligned trails on a new docs section before indexing push.
Place Home > Category > Page UI below the header on marketing templates.
Audit breadcrumb depth after adding a blog category tree.
Prove hierarchy clarity on a multi-page validation landing before paid traffic.
How it compares
SEO-focused breadcrumb implementation guide, not a full sitemap generator or primary navigation menu skill.
Common Questions / FAQ
Who is breadcrumb-generator for?
Indie builders and marketers optimizing content sites, SaaS marketing pages, or shops where hierarchy and internal linking matter for search.
When should I use breadcrumb-generator?
At Launch SEO when adding breadcrumbs or BreadcrumbList schema; during Build frontend when wiring hierarchy UI; in Grow content when new sections need audit-ready trails.
Is breadcrumb-generator safe to install?
It is documentation and procedural guidance—review Security Audits on this page and validate generated markup in staging before production deploy.
Workflow Chain
Then invoke: schema markup
SKILL.md
READMESKILL.md - Breadcrumb Generator
# 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. ## Scope - **Breadcrumb UI**: Visual trail (Home > Category > Page) - **BreadcrumbList schema**: JSON-LD structured data for rich results - **Placement**: Typically below header, above main content ## Breadcrumb Types | Type | Use case | Recommendation | |------|----------|----------------| | **Location-based** | Reflects site hierarchy (Home > Blog > SEO > Page) | **Recommended** — most SEO-friendly; clear structure | | **Attribute-based** | Shows product attributes (Home > Electronics > Phone > iPhone 15) | E-commerce; product classification | | **Path-based** | Shows user's browsing path | **Avoid** — different users, different paths; can cause confusion | **Default**: Use location-based for most sites. Use attribute-based for e-commerce product pages. ## Initial Assessment **Check for project context first:** If `.claude/project-context.md` or `.cursor/project-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 ## Best Practices ### Structure & Hierarchy | Practice | Guideline | |----------|-----------| | **Depth** | 3–5 levels optimal; avoid very long trails | | **Anchor text** | Keyword-rich, human-readable; descriptive | | **Consistency** | Same pattern across all pages (blog, category, product) | | **Canonical path** | For items in multiple categories, define one canonical breadcrumb to avoid diluted link equity | ### Schema (BreadcrumbList) See **schema-markup** for BreadcrumbList requirements, JSON-LD example, and multiple paths. Schema must match visible breadcrumbs exactly. ### Placement & Design | Practice | Guideline | |----------|-----------| | **Position** | Below nav bar or above page title; top of content area | | **Visual** | Smaller font, lighter color; avoid competing with main content | | **Separator** | Clear separator (>, /, ›); consistent across site | | **Naming** | Match page title or nav menu; concise, descriptive | ### UX & Accessibility | Practice | Guideline | |----------|-----------| | **Mobile** | Tappable; short, readable text; high contrast | | **Long trails** | Horizontal scroll container rather than truncating | | **Current page** | Last item non-linked; use `aria-current="page"` | | **Screen readers** | `nav` with `aria-label="Breadcrumb"`; proper landmark | ### SEO Impact - **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. See **serp-features** for breadcrumb SERP display. #