feat(seo): add Open Graph and Twitter social cards

[prudentbird]

Summary

Adds Open Graph + Twitter card tags to every public page and a branded default share image, so links unfurl with a real preview instead of a blank/broken one.

• Branded social card — generated at build/request time with next/og (app/opengraph-image.tsx, 1200×630), reused for Twitter via app/twitter-image.tsx. No binary asset to maintain; copy tracks the product.
• buildMetadata() helper (src/lib/metadata.ts) — produces consistent title / description / canonical plus matching openGraph and twitter objects (summary_large_image, @ajaREDiA) for each page.
• Home + auth pages routed through the helper; root layout carries OG/Twitter defaults for inheritance.

Done when (issue #106)

• Open Graph and Twitter card tags present on every public page (title, description, image, url).
• A branded 1200×630 social card image is used as the default preview.

Validation

• npm run typecheck ✅
• npm run build ✅ — /opengraph-image and /twitter-image routes generated.

Notes

Stacked on #105 (this PR targets feat/seo-105-page-titles-meta). Issue specifies 1200×628; used the canonical 1200×630 OG size (Next.js default) — functionally identical for unfurls.

Closes #106

[claude]

Claude finished @prudentbird's task —— View job

---

PR Review: Social Cards Implementation

This is a well-implemented social media preview feature that follows Next.js best practices. Here's my comprehensive review:

Todo List:

• Read and analyze all changed files
• Review metadata helper implementation
• Check social card generation code
• Assess Next.js best practices compliance
• Identify potential bugs or security issues
• Evaluate performance considerations
• Check test coverage needs
• Provide comprehensive feedback

🟢 Strengths

Excellent Architecture

• buildMetadata() helper (src/lib/metadata.ts:11-42) provides consistent metadata generation with sensible defaults
• DRY approach: Twitter image reuses OpenGraph image via simple re-export (src/app/twitter-image.tsx:1)
• Proper inheritance: Root layout sets defaults, pages override with specifics

Next.js Best Practices

• ✅ Uses next/og for dynamic image generation
• ✅ Correct exports for image routes (alt, size, contentType)
• ✅ Proper metadata structure with metadataBase in layout
• ✅ SEO-friendly: canonical URLs, proper robots directives, structured data

Clean Implementation

• Type safety: Proper TypeScript interfaces and return types
• Performance: Build-time image generation (no runtime overhead)
• Maintainable: Centralized config via siteConfig

🟡 Areas for Improvement

Social Card Content (src/app/opengraph-image.tsx:52-54)

// Hardcoded description doesn't match siteConfig.description
Store enumeration, field data collection, and market analysis in one platform.

Issue: This text differs from siteConfig.description. Consider using:

{siteConfig.description}

URL Sanitization (src/app/opengraph-image.tsx:66)

<span>{siteConfig.url.replace(/^https?:\/\//, '')}</span>

Potential Issue: Basic regex replacement. Consider more robust URL parsing:

<span>{new URL(siteConfig.url).hostname}</span>

Error Handling

No error boundaries around buildMetadata() calls. Consider validation for required siteConfig properties.

🔵 Minor Considerations

Performance

• ✅ Images generated at build time
• ✅ Lightweight helper function
• 📝 Consider: OG image caching strategy for dynamic content (future enhancement)

Accessibility

• ✅ Proper alt attributes exported
• ✅ Good color contrast in image design

Security

• ✅ No user input in image generation
• ✅ Static configuration prevents injection
• 📝 URL handling is safe but could be more robust

🧪 Test Coverage

Missing Tests: Consider adding:

• Unit tests for buildMetadata() with various inputs
• Tests for social card image generation
• Validation that metadata includes required OG/Twitter fields

Example test structure:

// Test buildMetadata with different scenarios
describe('buildMetadata', () => {
  it('should generate correct social title format')
  it('should handle missing title gracefully')
  it('should set robots noindex when index=false')
})

📋 Summary

This is a high-quality implementation that effectively solves the social sharing preview problem. The code follows Next.js conventions, uses appropriate tools (next/og), and maintains good separation of concerns.

Approval Recommendation: ✅ Approve with minor suggestions

The hardcoded description in the OG image is the only notable issue, but it doesn't impact functionality. The other suggestions are enhancements for future consideration.

---