面包屑导航实现：Claude Code 实战指南

用面包屑同时提升 UX 与 SEO

面包屑（Breadcrumb）是一种用于直观告诉用户当前所处位置的导航元素。只要实现得当，既能提升可用性又能改善 SEO，两者兼得。

基础面包屑组件

> 帮我写一个面包屑组件。
> 要支持结构化数据（JSON-LD），无障碍友好，并且适配移动端。

// components/Breadcrumb.tsx
interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface BreadcrumbProps {
  items: BreadcrumbItem[];
}

export function Breadcrumb({ items }: BreadcrumbProps) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: items.map((item, index) => ({
      '@type': 'ListItem',
      position: index + 1,
      name: item.label,
      item: item.href ? `https://example.com${item.href}` : undefined,
    })),
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <nav aria-label="面包屑导航" className="breadcrumb">
        <ol className="flex flex-wrap items-center gap-1 text-sm text-gray-600">
          {items.map((item, index) => (
            <li key={index} className="flex items-center">
              {index > 0 && (
                <span className="mx-2 text-gray-400" aria-hidden="true">/</span>
              )}
              {item.href && index < items.length - 1 ? (
                <a
                  href={item.href}
                  className="text-blue-600 hover:underline"
                >
                  {item.label}
                </a>
              ) : (
                <span aria-current="page" className="text-gray-800 font-medium">
                  {item.label}
                </span>
              )}
            </li>
          ))}
        </ol>
      </nav>
    </>
  );
}

根据 URL 自动生成面包屑

// utils/breadcrumb.ts
const labelMap: Record<string, string> = {
  blog: '博客',
  category: '分类',
  tags: '标签',
  about: '关于',
};

export function generateBreadcrumbs(pathname: string): BreadcrumbItem[] {
  const segments = pathname.split('/').filter(Boolean);

  const items: BreadcrumbItem[] = [
    { label: '首页', href: '/' },
  ];

  let currentPath = '';
  segments.forEach((segment, index) => {
    currentPath += `/${segment}`;
    const isLast = index === segments.length - 1;

    items.push({
      label: labelMap[segment] || decodeURIComponent(segment),
      href: isLast ? undefined : currentPath,
    });
  });

  return items;
}

在 Astro 中集成

---
// layouts/BlogPost.astro
import { Breadcrumb } from '../components/Breadcrumb';

const { frontmatter } = Astro.props;
const breadcrumbItems = [
  { label: '首页', href: '/' },
  { label: '博客', href: '/blog' },
  { label: frontmatter.category, href: `/blog/category/${frontmatter.category}` },
  { label: frontmatter.title },
];
---

<Breadcrumb items={breadcrumbItems} />

样式变体

/* 箭头风格 */
.breadcrumb-arrow li + li::before {
  content: '›';
  margin: 0 0.5rem;
  color: #9ca3af;
}

/* 图标风格 */
.breadcrumb-icon li:first-child a::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('/icons/home.svg') no-repeat center;
  margin-right: 4px;
  vertical-align: middle;
}

/* 移动端：只显示最后两级 */
@media (max-width: 640px) {
  .breadcrumb li:not(:nth-last-child(-n+2)) {
    display: none;
  }
  .breadcrumb li:nth-last-child(2)::before {
    content: '... / ';
  }
}

测试

import { describe, it, expect } from 'vitest';
import { generateBreadcrumbs } from './breadcrumb';

describe('generateBreadcrumbs', () => {
  it('首页', () => {
    const result = generateBreadcrumbs('/');
    expect(result).toEqual([{ label: '首页', href: '/' }]);
  });

  it('博客文章页', () => {
    const result = generateBreadcrumbs('/blog/my-article');
    expect(result).toHaveLength(3);
    expect(result[1]).toEqual({ label: '博客', href: '/blog' });
    expect(result[2].href).toBeUndefined();
  });
});

总结

面包屑导航是兼顾 SEO 优化 和 无障碍 的重要组件。让 Claude Code 一起把结构化数据也实现进去，Google 搜索结果就能正常显示面包屑。更多信息请参阅 Google 搜索中心。