🚀 Feature Description

When exporting a project to React, automatically generate proper OpenGraph and Twitter Card meta tags in the index.html file based on the user's profile and OpenGraph settings.

💡 Problem / Motivation

Currently, exported projects have minimal meta tags. When users deploy their bento page and share it on social media, the preview cards are empty or show default browser/hosting information. This makes shared links look unprofessional and reduces engagement.

📋 Proposed Solution

1. Update the index.html template

Modify services/export/templates/indexHtml.ts to generate these meta tags dynamically:

Primary Meta Tags:

• <title> - Page title
• <meta name="description"> - Page description

OpenGraph Tags:

• og:type - "website"
• og:url - Page URL (use environment variable)
• og:title - Share title
• og:description - Share description
• og:image - Share image URL
• og:site_name - Site name

Twitter Card Tags:

• twitter:card - "summary" or "summary_large_image"
• twitter:title - Share title
• twitter:description - Share description
• twitter:image - Share image URL
• twitter:site - Twitter handle
• twitter:creator - Twitter handle

2. Handle image URLs

• Warn users if they use data URLs (not supported by social platforms)
• Convert relative URLs to absolute URLs when possible
• Default to avatar image if no OG image is set

3. Add helper function

Create an escapeHtml utility to safely escape user content in meta tags.

4. Update generated README

Add a section explaining:

• OG image requirements (1200x630px, PNG/JPG, publicly accessible)
• How to update meta tags manually
• Links to testing tools (Facebook Debugger, Twitter Card Validator, LinkedIn Inspector)

📝 Additional Context

Files to modify:

• services/export/templates/indexHtml.ts - Main template generation
• services/export/index.ts - Pass profile data to template
• services/export/helpers.ts - Add escapeHtml utility

Dependencies:

• Requires the builder OpenGraph configuration feature to be implemented first (see related issue)

Testing:

1. Export a project with OG settings configured
2. Deploy to any hosting (Vercel, Netlify, etc.)
3. Test with:
   • Facebook Sharing Debugger
   • Twitter Card Validator
   • LinkedIn Post Inspector

✅ Checklist

• I have searched for existing issues to avoid duplicates
• I have read the Contributing Guide