Phase 7: SEO & Security

Optimize for search and secure your application

SEO Checklist

1. Meta Tags

// app/layout.tsx
export const metadata: Metadata = {
  title: {
    template: '%s | My App',
    default: 'My App - Best Product'
  },
  description: 'Description for search engines',
  keywords: ['keyword1', 'keyword2'],
  openGraph: {
    title: 'My App',
    description: 'Description for social sharing',
    images: ['/og-image.png']
  },
  twitter: {
    card: 'summary_large_image'
  }
};

2. Semantic HTML

• Use proper heading hierarchy (h1 → h2 → h3)
• Add alt text to images
• Use semantic elements (article, section, nav)
• Implement structured data (JSON-LD)

3. Performance

• Image optimization (next/image)
• Code splitting
• Lazy loading
• Core Web Vitals monitoring

Security Checklist

1. Headers

// next.config.js
const securityHeaders = [
  { key: 'X-Frame-Options', value: 'DENY' },
  { key: 'X-Content-Type-Options', value: 'nosniff' },
  { key: 'Strict-Transport-Security', value: 'max-age=31536000' },
  { key: 'Content-Security-Policy', value: "default-src 'self'" }
];

2. Input Validation

• Validate all user inputs
• Sanitize HTML content
• Use parameterized queries
• Implement rate limiting

3. Authentication

• Secure password hashing
• JWT token expiration
• CSRF protection
• Session management

Next Phase

After completion: /phase-8-review