alexandrev-tibco
75 lines
2.6 KiB
Markdown
75 lines
2.6 KiB
Markdown
# 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.
|