203 lines
4.7 KiB
Markdown
203 lines
4.7 KiB
Markdown
# Generate Required Images for SEO
|
||
|
||
## Quick Start
|
||
|
||
Run the image generation script:
|
||
|
||
```bash
|
||
# Navigate to project root
|
||
cd C:\dev\mazer
|
||
|
||
# Run the image generator
|
||
python generate_images.py
|
||
```
|
||
|
||
This will create all required images in `web/static/images/`:
|
||
|
||
## Generated Images
|
||
|
||
### Favicons
|
||
- ✅ `favicon-16x16.png` - Browser tab icon (16×16)
|
||
- ✅ `favicon-32x32.png` - Browser tab icon (32×32)
|
||
|
||
### Social Media
|
||
- ✅ `twitter-image.png` - Twitter card preview (1200×675)
|
||
- ✅ `og-image.png` - Facebook/LinkedIn preview (1200×630)
|
||
|
||
### Mobile & PWA
|
||
- ✅ `apple-touch-icon.png` - iOS home screen icon (180×180)
|
||
- ✅ `icon-192x192.png` - PWA icon (192×192)
|
||
- ✅ `icon-512x512.png` - PWA icon (512×512)
|
||
|
||
### Other
|
||
- ✅ `screenshot.png` - General screenshot (1280×720)
|
||
|
||
## Design Features
|
||
|
||
All images follow the **Neo-Brutalism** design aesthetic:
|
||
|
||
### Color Palette
|
||
- **Yellow**: #FFE500 (Neon yellow - primary brand color)
|
||
- **Black**: #000000 (Borders and text)
|
||
- **Pink**: #FF10F0 (Neon pink - accent)
|
||
- **Cyan**: #00F0FF (Neon cyan - accent)
|
||
- **Green**: #39FF14 (Neon green - accent)
|
||
- **White**: #FFFFFF (Background)
|
||
|
||
### Design Elements
|
||
- ✅ Thick black borders (6-10px)
|
||
- ✅ Hard drop shadows (no blur)
|
||
- ✅ Flat colors (no gradients)
|
||
- ✅ Bold typography
|
||
- ✅ High contrast
|
||
|
||
## Manual Creation (Optional)
|
||
|
||
If you prefer to create custom images manually:
|
||
|
||
### Twitter Image (1200×675)
|
||
1. Use Canva, Figma, or Photoshop
|
||
2. Set canvas to 1200×675 pixels
|
||
3. Add yellow background (#FFE500)
|
||
4. Add title "MAZE GENERATOR" in bold black text
|
||
5. Add 3 boxes with features: "8 ALGORITHMS", "ANIMATED SOLVING", "NEO-BRUTALISM"
|
||
6. Use colors: pink, cyan, green for the boxes
|
||
7. Add thick black borders (6-8px)
|
||
8. Export as PNG
|
||
|
||
### OG Image (1200×630)
|
||
1. Set canvas to 1200×630 pixels
|
||
2. Yellow background with black border
|
||
3. Title: "MAZE GENERATOR"
|
||
4. Subtitle: "8 ALGORITHMS • ANIMATED SOLVING"
|
||
5. Optional: Add simple maze pattern
|
||
6. Export as PNG
|
||
|
||
### Favicons
|
||
1. Create 32×32 and 16×16 versions
|
||
2. Yellow background
|
||
3. Simple "M" letter or maze pattern
|
||
4. Black border
|
||
5. Export as PNG
|
||
|
||
### Apple Touch Icon (180×180)
|
||
1. Create 180×180 canvas
|
||
2. Yellow background
|
||
3. Large "M" letter in center
|
||
4. Thick black border
|
||
5. Export as PNG
|
||
|
||
## Image Optimization
|
||
|
||
After generating, optimize for web:
|
||
|
||
```bash
|
||
# Using ImageOptim (Mac)
|
||
imageoptim web/static/images/*.png
|
||
|
||
# Using pngquant (cross-platform)
|
||
pngquant --quality=80-95 web/static/images/*.png
|
||
|
||
# Using TinyPNG web service
|
||
# Upload to https://tinypng.com/
|
||
```
|
||
|
||
## Verification
|
||
|
||
Check that all images exist:
|
||
|
||
```bash
|
||
ls -lh web/static/images/
|
||
```
|
||
|
||
Expected output:
|
||
```
|
||
favicon-16x16.png
|
||
favicon-32x32.png
|
||
apple-touch-icon.png
|
||
icon-192x192.png
|
||
icon-512x512.png
|
||
twitter-image.png
|
||
og-image.png
|
||
screenshot.png
|
||
```
|
||
|
||
## Testing
|
||
|
||
### Test Favicons
|
||
1. Start server: `python api/app.py`
|
||
2. Visit: `http://localhost:5000`
|
||
3. Check browser tab for favicon
|
||
|
||
### Test Social Media Previews
|
||
1. Deploy to production
|
||
2. Test Twitter Card: https://cards-dev.twitter.com/validator
|
||
3. Test Open Graph: https://developers.facebook.com/tools/debug/
|
||
4. Test LinkedIn: Share URL and check preview
|
||
|
||
### Test PWA Icons
|
||
1. Visit site on mobile
|
||
2. Use "Add to Home Screen"
|
||
3. Check icon appears correctly
|
||
|
||
## Alternative: Use Online Tools
|
||
|
||
If Python isn't available, use these online tools:
|
||
|
||
### Favicon Generator
|
||
- https://favicon.io/
|
||
- https://realfavicongenerator.net/
|
||
|
||
### Social Media Image Generator
|
||
- https://www.canva.com/ (templates for Twitter/OG images)
|
||
- https://www.figma.com/ (free design tool)
|
||
|
||
### Icon Generator
|
||
- https://www.pwabuilder.com/ (PWA icon generator)
|
||
|
||
## Troubleshooting
|
||
|
||
### Script Fails to Run
|
||
**Problem**: `python: command not found`
|
||
|
||
**Solution**:
|
||
```bash
|
||
# Windows
|
||
py generate_images.py
|
||
|
||
# Or install Python from python.org
|
||
# Or use Windows Store Python
|
||
```
|
||
|
||
### Images Not Showing
|
||
**Problem**: 404 error for images
|
||
|
||
**Solution**:
|
||
1. Check files exist in `web/static/images/`
|
||
2. Check Flask is serving static files
|
||
3. Clear browser cache (Ctrl+Shift+R)
|
||
|
||
### Low Quality Images
|
||
**Problem**: Images look pixelated
|
||
|
||
**Solution**:
|
||
1. Re-run script with PIL (Pillow) installed
|
||
2. Or create manually at higher DPI
|
||
3. Use vector graphics tools (Figma, Illustrator)
|
||
|
||
## Next Steps After Generation
|
||
|
||
1. ✅ Verify all 8 images are created
|
||
2. ✅ Check file sizes (should be <100KB each)
|
||
3. ✅ Test locally at `http://localhost:5000`
|
||
4. ✅ Deploy to production
|
||
5. ✅ Test with social media validators
|
||
6. ✅ Submit to Google Search Console
|
||
|
||
## Additional Resources
|
||
|
||
- **Neo-Brutalism Design**: https://neobrutalism.dev/
|
||
- **PWA Icons Guide**: https://web.dev/add-manifest/
|
||
- **OG Image Best Practices**: https://ogp.me/
|
||
- **Twitter Cards Guide**: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards
|