Improve goal sharing experience

2026-02-01 11:14:48 +01:00
parent e328767c4a
commit f97f8026bc
7 changed files with 886 additions and 78 deletions
@@ -0,0 +1,74 @@
+# Open Graph Image Specification
+
+## Required Image: `og-share-card.png`
+
+Create this image and place it at: `https://portfoliojournal.app/images/og-share-card.png`
+
+### Dimensions
+- **Size:** 1200 x 630 pixels (Facebook/LinkedIn optimal)
+- **Format:** PNG or JPG
+- **File size:** Under 1MB recommended
+
+### Design Recommendations
+
+```
+----------------------------------------------------------+
+|                                                          |
+|     [App Icon]                                           |
+|                                                          |
+|     Portfolio Journal                                    |
+|     ─────────────────                                    |
+|                                                          |
+|     Track your investment goals                          |
+|     and celebrate your wins.                             |
+|                                                          |
+|     [Progress bar illustration]                          |
+|                                                          |
+|     ★ Goal Tracking  ★ Smart Predictions                 |
+|     ★ Portfolio Analytics  ★ Privacy Focused             |
+|                                                          |
+|                    [App Store Badge]                     |
+|                                                          |
+----------------------------------------------------------+
+```
+
+### Color Scheme
+- **Background:** Gradient from #667eea to #764ba2 (match your app branding)
+- **Text:** White
+- **Accent:** Your app's accent color
+
+### Elements to Include
+1. App icon (prominent, top-left or center)
+2. App name "Portfolio Journal"
+3. Tagline or value proposition
+4. Visual element (progress bar, chart icon, or screenshot)
+5. Feature highlights
+6. App Store badge (optional)
+
+### Tools to Create
+- Figma (free template available)
+- Canva
+- Adobe Illustrator/Photoshop
+
+## Testing Your OG Tags
+
+After deploying, test with these tools:
+- **Facebook:** https://developers.facebook.com/tools/debug/
+- **Twitter:** https://cards-dev.twitter.com/validator
+- **LinkedIn:** https://www.linkedin.com/post-inspector/
+- **General:** https://www.opengraph.xyz/
+
+## Files to Deploy
+
+1. `/share/index.html` (or configure your server to serve `share.html` at `/share`)
+2. `/images/og-share-card.png`
+3. `/images/app-icon.png` (your app icon, 120x120 or larger)
+
+## Apple Smart App Banner
+
+The HTML includes this meta tag:
+```html
+<meta name="apple-itunes-app" content="app-id=6744983373">
+```
+
+This shows a smart banner on iOS Safari prompting users to download your app.