78 lines
2.1 KiB
Plaintext
78 lines
2.1 KiB
Plaintext
---
|
|
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) |