Claude Code के साथ SEO Implementation

Breadcrumb से UX और SEO दोनों improve करें

Breadcrumb (पाथ navigation) एक navigation element है जो user को visually दिखाता है कि वो site में कहाँ है। सही implementation से usability improvement और SEO improvement दोनों simultaneously achieve हो सकते हैं।

Basic Breadcrumb Component

> Breadcrumb component बनाओ।
> Structured data (JSON-LD) support, accessibility consideration, responsive support के साथ।

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

URL से Breadcrumb Auto-Generate करना

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

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

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

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

<Breadcrumb items={breadcrumbItems} />

Styling Variations

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

/* Icon style */
.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: सिर्फ last 2 दिखाएं */
@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('Top page', () => {
    const result = generateBreadcrumbs('/');
    expect(result).toEqual([{ label: 'Home', href: '/' }]);
  });

  it('Blog article page', () => {
    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 SEO optimization और accessibility दोनों के लिए important component है। Claude Code से structured data support तक implement करवाने पर Google search results में breadcrumb display होने लगता है। Structured data की details के लिए Google Search Central देखें।