Implementação de SEO com Claude Code

Melhorando UX e SEO Simultaneamente com Breadcrumbs

Breadcrumbs são elementos de navegação que mostram visualmente ao usuário onde ele está no site. Implementados corretamente, melhoram simultaneamente a usabilidade e o SEO.

Componente Básico de Breadcrumb

> Crie um componente de breadcrumb.
> Com dados estruturados (JSON-LD), acessibilidade e design responsivo.

// 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="Breadcrumb" 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>
    </>
  );
}

Gerando Breadcrumbs Automaticamente a partir da URL

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

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

Exemplo de Integração no Astro

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

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

<Breadcrumb items={breadcrumbItems} />

Variações de Estilo

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

/* Estilo ícone */
.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: mostrar apenas os últimos 2 */
@media (max-width: 640px) {
  .breadcrumb li:not(:nth-last-child(-n+2)) {
    display: none;
  }
  .breadcrumb li:nth-last-child(2)::before {
    content: '... / ';
  }
}

Testes

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

describe('generateBreadcrumbs', () => {
  it('página inicial', () => {
    const result = generateBreadcrumbs('/');
    expect(result).toEqual([{ label: 'Início', href: '/' }]);
  });

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

Resumo

Breadcrumbs são um componente importante tanto para otimização de SEO quanto para acessibilidade. Se você pedir ao Claude Code para implementar incluindo dados estruturados, os breadcrumbs aparecerão nos resultados de busca do Google. Para detalhes sobre dados estruturados, consulte o Google Search Central.