claude-workspace: Skill for Claude Code

SEO Fundamentals

The Frontend Developer's SEO Checklist

SEO isn't a marketing afterthought — it's structural. If you ship a client-rendered page with no meta tags, Google indexes an empty shell. This skill covers what frontend engineers need to get right in code for both React and Next.js projects.

Meta Tags — Next.js (App Router)

Static Metadata

// app/about/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'About Us | YourBrand',
  description: 'Learn about our mission, team, and values.',
  alternates: {
    canonical: 'https://yourdomain.com/about',
  },
  openGraph: {
    title: 'About Us | YourBrand',
    description: 'Learn about our mission, team, and values.',
    url: 'https://yourdomain.com/about',
    siteName: 'YourBrand',
    images: [{ url: '/og/about.png', width: 1200, height: 630, alt: 'About YourBrand' }],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'About Us | YourBrand',
    description: 'Learn about our mission, team, and values.',
    images: ['/og/about.png'],
  },
};

Dynamic Metadata

// app/products/[slug]/page.tsx
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const product = await getProduct(params.slug);

  return {
    title: `${product.name} | YourBrand`,
    description: product.summary.slice(0, 155),
    alternates: {
      canonical: `https://yourdomain.com/products/${params.slug}`,
    },
    openGraph: {
      title: product.name,
      description: product.summary.slice(0, 155),
      url: `https://yourdomain.com/products/${params.slug}`,
      siteName: 'YourBrand',
      images: [{ url: product.ogImage, width: 1200, height: 630, alt: product.name }],
      type: 'website',
    },
    twitter: {
      card: 'summary_large_image',
      title: product.name,
      description: product.summary.slice(0, 155),
      images: [product.ogImage],
    },
    robots: { index: product.isPublished, follow: true },
  };
}