# Social Media Share Images - Requirements

## Open Graph Image Specifications

### Primary OG Image (aktiv-og-image.jpg)
**Recommended Dimensions:** 1200 x 630 pixels
**Aspect Ratio:** 1.91:1
**Format:** JPG or PNG
**File Size:** Under 8MB (preferably under 300KB for faster loading)
**Location:** `/public/images/aktiv-og-image.jpg`

**Content Guidelines:**
- Include AKTIV logo prominently
- Use brand colors (#043F51 - Sherpa Blue)
- Add tagline: "Pouzdan partner knjigovodjama i preduzećima"
- Include visual elements related to accounting/bookkeeping
- Ensure text is readable at smaller sizes
- Leave 10% safe area around edges (avoid placing critical content near edges)

### Platform-Specific Requirements

#### Facebook
- **Recommended:** 1200 x 630 pixels
- **Minimum:** 600 x 315 pixels
- **Maximum:** 8MB
- Displays when shared in News Feed, Pages, Groups

#### Twitter (X)
- **Summary Card with Large Image:** 1200 x 628 pixels (1.91:1)
- **Summary Card:** 1:1 square (e.g., 500 x 500 pixels)
- **Maximum:** 5MB
- Supports JPG, PNG, WEBP, GIF

#### LinkedIn
- **Recommended:** 1200 x 627 pixels
- **Minimum:** 1200 x 628 pixels
- **Aspect Ratio:** 1.91:1
- **Maximum:** 5MB

#### WhatsApp
- Uses Open Graph image
- **Recommended:** 1200 x 630 pixels
- Smaller images may appear pixelated

## Blog Post Images

### Featured Images for Blog Posts
**Dimensions:** 1200 x 630 pixels (for consistency with OG image)
**Alternative:** 900 x 600 pixels (as seen in old blog)
**Format:** JPG
**File Size:** Under 200KB
**Location:** `https://media.aktiv.rs/` or `/public/images/blog/`

**Naming Convention:**
- Use descriptive names with hyphens
- Example: `trendovi-modernog-racunovodstva-cover.jpg`
- Include `-cover` suffix for main blog images

## Image Alt Text Best Practices

1. **Be Descriptive:** Describe what the image shows, not just what it's about
2. **Include Keywords:** Naturally incorporate relevant SEO keywords
3. **Keep it Concise:** 125 characters or less
4. **Don't Start with "Image of":** Screen readers already announce it's an image
5. **Context Matters:** Consider the surrounding content

### Examples:
- ✅ Good: "Profesionalna knjigovođa radi na računaru sa AKTIV programom za knjigovodstvo"
- ❌ Bad: "Image of person"

## Testing Your Images

### Tools to Test:
1. **Facebook Sharing Debugger:** https://developers.facebook.com/tools/debug/
2. **Twitter Card Validator:** https://cards-dev.twitter.com/validator
3. **LinkedIn Post Inspector:** https://www.linkedin.com/post-inspector/

### What to Check:
- Image loads correctly
- Dimensions are displayed accurately
- Title and description appear as expected
- No caching issues (use debugger tools to refresh cache)

## Current Image Locations

### Logo
- `/public/images/aktiv-logo.png` - Main logo (80px height)

### Open Graph
- `/public/images/aktiv-og-image.jpg` - **NEEDS TO BE CREATED**
  - Use as default OG image for all pages
  - Should represent AKTIV brand professionally

### Placeholders
- Default blog placeholder: `https://via.placeholder.com/800x400?text=Blog+Post`

## Image Optimization Tips

1. **Use WebP format** for smaller file sizes (with JPG fallback)
2. **Compress images** using tools like TinyPNG or ImageOptim
3. **Use responsive images** with different sizes for different devices
4. **Lazy load** images below the fold
5. **Use CDN** for faster delivery (e.g., media.aktiv.rs)

## Implementation Checklist

- [ ] Create main OG image (1200 x 630)
- [ ] Upload to `/public/images/aktiv-og-image.jpg`
- [ ] Create blog post default image
- [ ] Test sharing on Facebook
- [ ] Test sharing on Twitter
- [ ] Test sharing on LinkedIn
- [ ] Verify all images have alt tags
- [ ] Compress all images
- [ ] Set up CDN for blog images

## Notes

- The SEO component automatically uses `/images/aktiv-og-image.jpg` as the default image
- Blog posts should provide their own featured images via the API
- If no image is provided, the default OG image is used
- Images should be optimized for web delivery (compressed, properly sized)