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

[prudentbird]

Replaces #116, which GitHub auto-closed when its stacked base branch (#105) was deleted on merge. Same change, retargeted to dev.

Summary

Adds Open Graph + Twitter card tags to every public page and a branded default share image.

• Branded 1200×630 social card via next/og (app/opengraph-image.tsx), reused for Twitter.
• buildMetadata() helper emitting consistent title/description/canonical + OG/Twitter objects.
• Home + auth pages routed through the helper; root layout carries OG/Twitter defaults.

Closes #106

[claude]

Claude finished @prudentbird's task —— View job

---

PR Review: Social Cards Implementation ✅

I've completed a thorough review of the social cards implementation. Here's my detailed feedback:

Todo List:

• Read repository setup instructions (CLAUDE.md)
• Analyze new social card generation files
• Review metadata helper implementation
• Check auth page modifications
• Examine root layout changes
• Evaluate code quality and best practices
• Check for security concerns
• Assess performance implications
• Review test coverage considerations
• Provide comprehensive feedback

---

🎯 Code Quality & Best Practices

Excellent implementation overall! The code follows Next.js 14+ conventions and demonstrates good architectural decisions:

✅ Proper Next.js conventions: Uses next/og for dynamic image generation and follows App Router metadata patterns
✅ Clean abstraction: buildMetadata() helper centralizes metadata logic and prevents duplication
✅ Type safety: Proper TypeScript usage with well-defined interfaces
✅ Consistent styling: Uses Next.js Image Response API with inline styles appropriately

🐛 Potential Issues

Minor Issues:

1. Hard-coded content (opengraph-image.tsx:52-54): The description is hard-coded instead of using siteConfig.description
2. Twitter image redundancy: The twitter-image.tsx simply re-exports the OpenGraph image - consider if this file is necessary

Suggestions:

// In opengraph-image.tsx, line 52-54
<div style={{ fontSize: 30, color: '#94a3b8', maxWidth: 880 }}>
  {siteConfig.description} {/* Use config instead of hard-coded text */}
</div>

🔒 Security Considerations

✅ No security concerns identified:

• All data sources are internal configuration
• No user input is processed in image generation
• Metadata helper properly sanitizes inputs
• No external API calls or unsafe operations

⚡ Performance Considerations

Generally good, with one optimization opportunity:

✅ Efficient: Static exports for image dimensions and metadata
✅ Cached: Next.js automatically caches generated images
⚠️ Image generation: The OpenGraph image uses complex gradients and may be slow on first load

Suggestion: Consider adding export const runtime = 'edge' to opengraph-image.tsx for faster cold starts.

📝 Implementation Quality

Strengths:

• DRY principle: Metadata helper prevents code duplication across pages
• SEO optimization: Proper canonical URLs, robots directives, and social meta tags
• Accessibility: Alt text properly configured for social images
• Maintainability: Centralized configuration in siteConfig

Architecture decisions:

• ✅ Using buildMetadata() helper for consistency
• ✅ Proper separation of concerns (image generation vs. metadata)
• ✅ Following Next.js file-based conventions

🧪 Test Coverage

⚠️ No tests identified for the new functionality. Consider adding:

1. Unit tests for buildMetadata() helper:

   // Test various input combinations
   // Verify OpenGraph and Twitter card properties
   // Test canonical URL generation

2. Integration tests for social image generation:

   // Verify image dimensions and format
   // Test image rendering with different configurations

📋 Minor Code Quality Suggestions

1. Consistent exports (metadata.ts:11-16): Consider extracting the title construction logic
2. Type improvements: Add JSDoc comments for the buildMetadata function
3. Error handling: Consider adding error boundaries for image generation

✅ Summary

This is a high-quality implementation that properly adds social sharing functionality to the Next.js app. The code follows best practices, has good separation of concerns, and uses appropriate Next.js APIs.

Main recommendations:

1. Fix the hard-coded description in the OpenGraph image
2. Add test coverage for the new functionality
3. Consider edge runtime for better performance
4. Remove redundant twitter-image.tsx if not needed

Overall: ✅ Approved - Ready to merge with minor fixes suggested above.

---