---
globs: src/app/**/page.tsx,src/app/**/layout.tsx
---

# SEO and Metadata

## Metadata API Requirements

Every page must define unique metadata using the Next.js Metadata API:

```typescript
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Unique Page Title | Biohazard VFX",
  description: "Unique, descriptive page description for SEO",
  metadataBase: new URL("https://biohazardvfx.com"),
  openGraph: {
    title: "Page Title",
    description: "Page description",
    type: "website",
    locale: "en_US",
    siteName: "Biohazard VFX",
  },
  twitter: {
    card: "summary_large_image",
    title: "Page Title",
    description: "Page description",
  },
}
```

## Root Layout Metadata

The root layout in [src/app/layout.tsx](mdc:src/app/layout.tsx) includes:
- Global site metadata
- Open Graph configuration
- Twitter card setup
- JSON-LD structured data
- Canonical URLs

## SEO Best Practices

1. **Unique Titles**: Each page must have a unique, descriptive title
2. **Descriptions**: Write compelling meta descriptions (150-160 characters)
3. **Structured Data**: Use JSON-LD for rich snippets
4. **Canonical URLs**: Set canonical URLs to prevent duplicate content
5. **Open Graph**: Include OG tags for social media sharing
6. **Twitter Cards**: Configure Twitter card metadata

## Structured Data Example

```typescript
const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Organization",
  name: "Biohazard VFX",
  description: "Visual effects studio",
  url: "https://biohazardvfx.com",
  logo: "https://biohazardvfx.com/logo.png",
  sameAs: ["https://instagram.com/biohazardvfx"],
}
```

## Page-Specific Metadata

- **Home**: Focus on main services and value proposition
- **Portfolio**: Highlight featured projects and capabilities
- **Services**: Target specific service keywords
- **About**: Include company information and team details
- **Contact**: Include location and contact information

## Image SEO

- Use descriptive alt text for all images
- Optimize image file names
- Include image dimensions
- Use appropriate image formats (WebP when possible)