Implementation SEO with 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: '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;
}

/* モバイル：最後の2つだけ表示 */
@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();
  });
});

Summary

パンくずリストはSEO対策とアクセシビリティの両面で重要なコンポーネントです。Claude Codeに構造化データ対応まで含めて実装を依頼すれば、Google検索結果にパンくずが表示されるようになります。構造化データの詳細はGoogle検索セントラルを参照してください。