Implementasi SEO dengan Claude Code

Meningkatkan UX dan SEO Sekaligus dengan Breadcrumb

Breadcrumb adalah elemen navigasi yang secara visual menunjukkan posisi pengguna di dalam situs. Jika diimplementasikan dengan benar, peningkatan usability dan SEO bisa dicapai secara bersamaan.

Component Breadcrumb Dasar

> Buat component breadcrumb.
> Dengan dukungan structured data (JSON-LD), pertimbangan accessibility, dan dukungan responsif.

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

Auto-Generate Breadcrumb dari URL

// utils/breadcrumb.ts
const labelMap: Record<string, string> = {
  blog: 'Blog',
  category: 'Kategori',
  tags: 'Tag',
  about: 'Tentang',
};

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

Contoh Integrasi di Astro

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

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

<Breadcrumb items={breadcrumbItems} />

Variasi Styling

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

/* Style ikon */
.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: hanya tampilkan 2 terakhir */
@media (max-width: 640px) {
  .breadcrumb li:not(:nth-last-child(-n+2)) {
    display: none;
  }
  .breadcrumb li:nth-last-child(2)::before {
    content: '... / ';
  }
}

Testing

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

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

  it('Halaman artikel 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

Breadcrumb adalah component penting baik untuk optimasi SEO maupun accessibility. Dengan meminta Claude Code mengimplementasikan hingga dukungan structured data, breadcrumb akan ditampilkan di hasil pencarian Google. Untuk detail structured data, lihat Google Search Central.