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

Action	Description	Example
`start`	Begin Phase 7	`$phase-7-seo-security start`
`seo`	Implement SEO optimizations	`$phase-7-seo-security seo`
`security`	Implement security hardening	`$phase-7-seo-security security`
`audit`	Run SEO and security audit	`$phase-7-seo-security audit`
`checklist`	Review compliance checklist	`$phase-7-seo-security checklist`

Deliverables

Meta Tags Configuration - Title, description, Open Graph, Twitter Cards per page
Sitemap & Robots - Dynamic sitemap.xml and robots.txt
Structured Data - JSON-LD schemas (Organization, Article, Product, BreadcrumbList)
Security Headers - CSP, HSTS, X-Frame-Options, X-Content-Type-Options
Input Validation - Server-side validation on all endpoints
OWASP Compliance - Top 10 vulnerability assessment and mitigation
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

Metric	Target	Optimization Strategy
LCP	< 2.5s	Optimize images (next/image), preload fonts, SSR critical pages
INP	< 200ms	Code splitting, minimize main thread work, defer non-critical JS
CLS	< 0.1	Set explicit image dimensions, font-display: swap, reserve space

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

#	Vulnerability	Prevention	Implementation
A01	Broken Access Control	Role-based checks on every route and API	Middleware + API guards
A02	Cryptographic Failures	HTTPS everywhere, bcrypt for passwords	TLS, env variables
A03	Injection	Parameterized queries, Zod validation	ORM + schema validation
A04	Insecure Design	Threat modeling, least privilege	Design review in Phase 8
A05	Security Misconfiguration	Remove defaults, minimal permissions	Middleware + config audit
A06	Vulnerable Components	npm audit, Dependabot	CI pipeline checks
A07	Auth Failures	Rate limiting, MFA, secure sessions	Auth middleware + rate limiter
A08	Data Integrity	Input validation, signed JWTs	Zod + JWT verification
A09	Logging Failures	Structured logging, anomaly alerts	Logger + monitoring
A10	SSRF	URL allowlists, validate user URLs	Input validation

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

Security Checklist

Level-wise Application

Level	SEO Scope	Security Scope
Starter	Basic meta tags, robots.txt	Minimal (static site security)
Dynamic	Full SEO + sitemap + JSON-LD + Core Web Vitals	Full OWASP basics, auth security, input validation
Enterprise	Full SEO + multi-language + schema.org + analytics	Full OWASP, WAF, penetration testing, SOC2 compliance

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

Mistake	Solution
Missing meta descriptions	Add unique descriptions to every page
Blocking search engines	Check robots.txt is not blocking public pages
Exposing stack traces	Return generic error messages in production
Hardcoded secrets	Use environment variables exclusively
No rate limiting	Add rate limiting to login and API endpoints
Ignoring dependency vulnerabilities	Run npm audit in CI pipeline

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.

phase-7-seo-security