Implementation SEO avec Claude Code

Ameliorer l’UX et le SEO simultanement avec le fil d’Ariane

Le fil d’Ariane (breadcrumb) est un element de navigation qui montre visuellement a l’utilisateur sa position dans le site. S’il est correctement implemente, il ameliore l’utilisabilite et le SEO en meme temps.

Composant de base du fil d’Ariane

> Cree un composant de fil d'Ariane.
> Compatible avec les donnees structurees (JSON-LD), l'accessibilite et le design responsive.

// 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="Fil d'Ariane" 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>
    </>
  );
}

Generation automatique du fil d’Ariane a partir de l’URL

// utils/breadcrumb.ts
const labelMap: Record<string, string> = {
  blog: 'Blog',
  category: 'Categorie',
  tags: 'Tags',
  about: 'A propos',
};

export function generateBreadcrumbs(pathname: string): BreadcrumbItem[] {
  const segments = pathname.split('/').filter(Boolean);
  
  const items: BreadcrumbItem[] = [
    { label: 'Accueil', 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;
}

Exemple d’integration dans Astro

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

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

<Breadcrumb items={breadcrumbItems} />

Variations de styles

/* Style avec fleches */
.breadcrumb-arrow li + li::before {
  content: '>';
  margin: 0 0.5rem;
  color: #9ca3af;
}

/* Style avec icones */
.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;
}

/* Mobile : afficher seulement les 2 derniers */
@media (max-width: 640px) {
  .breadcrumb li:not(:nth-last-child(-n+2)) {
    display: none;
  }
  .breadcrumb li:nth-last-child(2)::before {
    content: '... / ';
  }
}

Tests

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

describe('generateBreadcrumbs', () => {
  it('page d\'accueil', () => {
    const result = generateBreadcrumbs('/');
    expect(result).toEqual([{ label: 'Accueil', href: '/' }]);
  });

  it('page d\'article de blog', () => {
    const result = generateBreadcrumbs('/blog/my-article');
    expect(result).toHaveLength(3);
    expect(result[1]).toEqual({ label: 'Blog', href: '/blog' });
    expect(result[2].href).toBeUndefined();
  });
});

Summary

Le fil d’Ariane est un composant important tant pour le SEO que pour l’accessibilite. Si vous demandez a Claude Code d’implementer egalement la compatibilite avec les donnees structurees, le fil d’Ariane apparaitra dans les resultats de recherche Google. Pour plus de details sur les donnees structurees, consultez Google Search Central.