phase-7-seo-security

name: phase-7-seo-security description: | Phase 7: SEO & Security. Implement search engine optimization, security hardening, and OWASP Top 10 compliance. Triggers: SEO, security, OWASP, XSS, CSRF, meta tags, sitemap, 보안, 검색엔진, セキュリティ, SEO, 安全, SEO, seguridad, sécurité, Sicherheit, sicurezza Do NOT use for: API auth design (use $phase-4-api), deployment (use $phase-9-deployment). Next: $phase-8-review

Phase 7: SEO & Security Hardening

Optimize for search engines and harden application security before production.

Purpose

Phase 7 ensures the application is discoverable by search engines and protected against common security vulnerabilities. This phase must be completed before any production deployment. SEO drives organic traffic; security protects your users and data.

Actions

Deliverables

1. Meta Tags Configuration - Title, description, Open Graph, Twitter Cards per page
2. Sitemap & Robots - Dynamic sitemap.xml and robots.txt
3. Structured Data - JSON-LD schemas (Organization, Article, Product, BreadcrumbList)
4. Security Headers - CSP, HSTS, X-Frame-Options, X-Content-Type-Options
5. Input Validation - Server-side validation on all endpoints
6. OWASP Compliance - Top 10 vulnerability assessment and mitigation
7. Accessibility Audit - WCAG AA compliance report

src/
├── app/
│   ├── layout.tsx             # Root metadata and security headers
│   ├── robots.ts              # Robots.txt generation
│   ├── sitemap.ts             # Sitemap generation
│   └── manifest.ts            # Web app manifest
├── middleware.ts               # Security headers middleware
└── lib/
    ├── metadata.ts            # Shared metadata helpers
    └── sanitize.ts            # Input sanitization utilities
docs/02-design/
├── seo-spec.md                # SEO strategy document
└── security-spec.md           # Security specifications

SEO Process

Step 1: Meta Tags

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

export const metadata: Metadata = {
  metadataBase: new URL('https://example.com'),
  title: { default: 'My App - Tagline', template: '%s | My App' },
  description: 'Application description for search engines (150-160 chars).',
  keywords: ['keyword1', 'keyword2', 'keyword3'],
  openGraph: {
    type: 'website', locale: 'en_US', url: 'https://example.com',
    siteName: 'My App',
    images: [{ url: '/og-image.png', width: 1200, height: 630, alt: 'My App' }],
  },
  twitter: { card: 'summary_large_image', creator: '@handle' },
  robots: { index: true, follow: true,
    googleBot: { index: true, follow: true, 'max-image-preview': 'large' } },
};

Step 2: Sitemap & Robots

// app/sitemap.ts
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPosts();
  return [
    { url: 'https://example.com', lastModified: new Date(), changeFrequency: 'daily', priority: 1.0 },
    { url: 'https://example.com/about', lastModified: new Date(), changeFrequency: 'monthly', priority: 0.8 },
    ...posts.map((post) => ({
      url: `https://example.com/blog/${post.slug}`,
      lastModified: post.updatedAt, changeFrequency: 'weekly' as const, priority: 0.7,
    })),
  ];
}

// app/robots.ts
export default function robots(): MetadataRoute.Robots {
  return {
    rules: [{ userAgent: '*', allow: '/', disallow: ['/api/', '/admin/', '/_next/'] }],
    sitemap: 'https://example.com/sitemap.xml',
  };
}

Step 3: Structured Data (JSON-LD)

export function ArticleJsonLd({ post }: { post: Post }) {
  const schema = {
    '@context': 'https://schema.org', '@type': 'Article',
    headline: post.title, description: post.excerpt, image: post.coverImage,
    datePublished: post.publishedAt, dateModified: post.updatedAt,
    author: { '@type': 'Person', name: post.author.name },
  };
  return <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} />;
}

Step 4: Core Web Vitals

Security Process

Step 5: Security Headers Middleware

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();
  const h = response.headers;
  h.set('X-Frame-Options', 'DENY');
  h.set('X-Content-Type-Options', 'nosniff');
  h.set('Referrer-Policy', 'strict-origin-when-cross-origin');
  h.set('Strict-Transport-Security', 'max-age=63072000; includeSubDomains; preload');
  h.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');
  h.set('Content-Security-Policy', [
    "default-src 'self'", "script-src 'self' 'unsafe-inline' 'unsafe-eval'",
    "style-src 'self' 'unsafe-inline'", "img-src 'self' data: https:",
    "font-src 'self'", "connect-src 'self' https://api.example.com",
    "frame-ancestors 'none'",
  ].join('; '));
  return response;
}

Step 6: OWASP Top 10 Compliance

Step 7: Input Validation and Sanitization

// lib/sanitize.ts
import { z } from 'zod';
import DOMPurify from 'isomorphic-dompurify';

export function sanitizeHtml(dirty: string): string {
  return DOMPurify.sanitize(dirty, { ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br'] });
}

export const emailSchema = z.string().email().max(255).toLowerCase().trim();
export const nameSchema = z.string().min(2).max(100).trim();
export const urlSchema = z.string().url().max(2048);
export const slugSchema = z.string().regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/).max(200);

SEO Checklist

• Title tag on every page (50-60 characters)
• Meta description on every page (150-160 characters)
• Open Graph tags (title, description, image, type)
• Twitter Card tags
• Canonical URLs set
• sitemap.xml with all public pages
• robots.txt with appropriate rules
• JSON-LD structured data
• Image alt texts on all images
• Semantic HTML (h1-h6 hierarchy, nav, main, article)
• Core Web Vitals passing (LCP < 2.5s, INP < 200ms, CLS < 0.1)

Security Checklist

• HTTPS enforced (HSTS header)
• Security headers configured (CSP, X-Frame-Options, etc.)
• All user inputs validated server-side (Zod)
• HTML content sanitized (DOMPurify)
• SQL injection prevented (parameterized queries/ORM)
• XSS prevention (React auto-escaping + CSP)
• CSRF protection (SameSite cookies, CSRF tokens)
• Rate limiting on auth endpoints
• Dependencies audited (npm audit)
• Secrets in environment variables (not in code)
• CORS properly configured
• Error messages do not leak implementation details

Level-wise Application

Security Patterns

See references/security-checklist.md for detailed patterns:

• Security headers reference
• OWASP Top 10 prevention matrix
• Input validation patterns
• Dependency audit procedures

PDCA Application

• Plan: Audit current SEO and security posture
• Design: Define optimization strategy and security requirements
• Do: Implement SEO metadata, security headers, input validation
• Check: Run Lighthouse audit, OWASP ZAP scan, dependency audit
• Act: Fix identified issues and proceed to Phase 8

Common Mistakes

Output Location

docs/02-design/
├── seo-spec.md                # SEO strategy and implementation
└── security-spec.md           # Security specifications and audit results

Next Phase

When SEO and security hardening is complete, proceed to $phase-8-review for comprehensive code and architecture review.