image generation added
This commit is contained in:
@@ -1,7 +1,9 @@
|
|||||||
{
|
{
|
||||||
"permissions": {
|
"permissions": {
|
||||||
"allow": [
|
"allow": [
|
||||||
"Bash(python:*)"
|
"Bash(python:*)",
|
||||||
|
"Bash(python3:*)",
|
||||||
|
"Bash(py generate_images.py:*)"
|
||||||
],
|
],
|
||||||
"deny": [],
|
"deny": [],
|
||||||
"ask": []
|
"ask": []
|
||||||
|
|||||||
30
CHANGELOG.md
30
CHANGELOG.md
@@ -1,5 +1,35 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## [1.2.0] - 2025-01-20
|
||||||
|
|
||||||
|
### Added
|
||||||
|
- **Comprehensive SEO Optimization**
|
||||||
|
- Meta tags: title, description, keywords, author, robots
|
||||||
|
- Open Graph tags for Facebook/LinkedIn sharing
|
||||||
|
- Twitter Card support for enhanced previews
|
||||||
|
- Schema.org structured data (WebApplication type)
|
||||||
|
- XML sitemap with image sitemap integration
|
||||||
|
- robots.txt for search engine crawler guidance
|
||||||
|
- PWA manifest for mobile app experience
|
||||||
|
- Semantic HTML with ARIA roles (banner, main, contentinfo)
|
||||||
|
- Canonical URL to prevent duplicate content
|
||||||
|
- Theme colors for mobile browsers
|
||||||
|
- Favicon and icon configuration
|
||||||
|
- Security.txt for responsible disclosure
|
||||||
|
- Flask routes for /robots.txt and /sitemap.xml
|
||||||
|
|
||||||
|
- **Documentation**
|
||||||
|
- `SEO_OPTIMIZATION.md` - Complete SEO guide
|
||||||
|
- Detailed keyword strategy
|
||||||
|
- Google Search Console setup instructions
|
||||||
|
- Analytics integration recommendations
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
- HTML structure now uses semantic elements
|
||||||
|
- Added role attributes for accessibility
|
||||||
|
- Improved meta description for better CTR
|
||||||
|
- Enhanced social sharing previews
|
||||||
|
|
||||||
## [1.1.1] - 2025-01-20
|
## [1.1.1] - 2025-01-20
|
||||||
|
|
||||||
### Fixed
|
### Fixed
|
||||||
|
|||||||
191
DEPLOYMENT_SEO_CHECKLIST.md
Normal file
191
DEPLOYMENT_SEO_CHECKLIST.md
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
# SEO Deployment Checklist
|
||||||
|
|
||||||
|
## Before Going Live
|
||||||
|
|
||||||
|
### 1. Domain & URLs
|
||||||
|
- [ ] Replace all instances of "https://yoursite.com/" with actual domain
|
||||||
|
- `web/templates/index.html` (multiple locations)
|
||||||
|
- `web/static/sitemap.xml`
|
||||||
|
- `web/static/robots.txt`
|
||||||
|
- `web/static/.well-known/security.txt`
|
||||||
|
|
||||||
|
### 2. Required Images
|
||||||
|
Create and place in `web/static/images/`:
|
||||||
|
- [ ] `favicon-16x16.png` (16x16 pixels)
|
||||||
|
- [ ] `favicon-32x32.png` (32x32 pixels)
|
||||||
|
- [ ] `apple-touch-icon.png` (180x180 pixels)
|
||||||
|
- [ ] `icon-192x192.png` (192x192 pixels, for PWA)
|
||||||
|
- [ ] `icon-512x512.png` (512x512 pixels, for PWA)
|
||||||
|
- [ ] `og-image.png` (1200x630 pixels, for Facebook/LinkedIn)
|
||||||
|
- [ ] `twitter-image.png` (1200x675 pixels, for Twitter)
|
||||||
|
- [ ] `screenshot.png` (Desktop screenshot)
|
||||||
|
- [ ] `screenshot-wide.png` (1280x720 pixels)
|
||||||
|
- [ ] `screenshot-mobile.png` (750x1334 pixels)
|
||||||
|
|
||||||
|
### 3. Google Services Setup
|
||||||
|
- [ ] Create Google Search Console account
|
||||||
|
- [ ] Verify domain ownership
|
||||||
|
- [ ] Submit sitemap: `https://yoursite.com/sitemap.xml`
|
||||||
|
- [ ] Request indexing for homepage
|
||||||
|
- [ ] Set up Google Analytics 4
|
||||||
|
- [ ] Add GA4 tracking code to `index.html`
|
||||||
|
- [ ] Configure GA4 events (generate, solve, download, etc.)
|
||||||
|
|
||||||
|
### 4. Technical Configuration
|
||||||
|
- [ ] Enable HTTPS (SSL certificate)
|
||||||
|
- [ ] Set up 301 redirect (www to non-www or vice versa)
|
||||||
|
- [ ] Configure security headers:
|
||||||
|
- [ ] Content-Security-Policy
|
||||||
|
- [ ] X-Frame-Options
|
||||||
|
- [ ] X-Content-Type-Options
|
||||||
|
- [ ] Referrer-Policy
|
||||||
|
- [ ] Enable GZIP compression
|
||||||
|
- [ ] Set up CDN (optional but recommended)
|
||||||
|
|
||||||
|
### 5. Testing & Validation
|
||||||
|
- [ ] Test with [Google Rich Results Test](https://search.google.com/test/rich-results)
|
||||||
|
- [ ] Test with [Mobile-Friendly Test](https://search.google.com/test/mobile-friendly)
|
||||||
|
- [ ] Validate sitemap at `/sitemap.xml`
|
||||||
|
- [ ] Check robots.txt at `/robots.txt`
|
||||||
|
- [ ] Run [PageSpeed Insights](https://pagespeed.web.dev/)
|
||||||
|
- [ ] Run [Lighthouse Audit](https://developers.google.com/web/tools/lighthouse)
|
||||||
|
- [ ] Validate structured data with [Schema Markup Validator](https://validator.schema.org/)
|
||||||
|
- [ ] Test Open Graph with [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)
|
||||||
|
- [ ] Test Twitter Cards with [Twitter Card Validator](https://cards-dev.twitter.com/validator)
|
||||||
|
|
||||||
|
### 6. Performance Optimization
|
||||||
|
- [ ] Minify CSS (`styles.css`)
|
||||||
|
- [ ] Minify JavaScript (`app.js`, `visualizer.js`)
|
||||||
|
- [ ] Optimize all images (compress without quality loss)
|
||||||
|
- [ ] Enable browser caching (set Cache-Control headers)
|
||||||
|
- [ ] Implement lazy loading for images (if adding more images)
|
||||||
|
|
||||||
|
### 7. Security
|
||||||
|
- [ ] Update `security.txt` with real contact email
|
||||||
|
- [ ] Set up security monitoring
|
||||||
|
- [ ] Configure rate limiting for API endpoints
|
||||||
|
- [ ] Add CSRF protection (if needed)
|
||||||
|
- [ ] Sanitize all user inputs
|
||||||
|
|
||||||
|
### 8. Social Media
|
||||||
|
- [ ] Create social media accounts (Twitter, LinkedIn, etc.)
|
||||||
|
- [ ] Share launch announcement
|
||||||
|
- [ ] Post example mazes
|
||||||
|
- [ ] Engage with educational communities
|
||||||
|
|
||||||
|
### 9. Marketing & Outreach
|
||||||
|
- [ ] Submit to web directories:
|
||||||
|
- [ ] Product Hunt
|
||||||
|
- [ ] Hacker News
|
||||||
|
- [ ] Reddit (r/webdev, r/programming)
|
||||||
|
- [ ] Reach out to educational websites
|
||||||
|
- [ ] Contact algorithm visualization communities
|
||||||
|
- [ ] Share on LinkedIn, Twitter, Facebook
|
||||||
|
|
||||||
|
### 10. Monitoring Setup
|
||||||
|
- [ ] Set up uptime monitoring (UptimeRobot, Pingdom, etc.)
|
||||||
|
- [ ] Configure error logging
|
||||||
|
- [ ] Set up email alerts for downtime
|
||||||
|
- [ ] Monitor Core Web Vitals
|
||||||
|
- [ ] Track search rankings weekly
|
||||||
|
|
||||||
|
## Post-Launch (First Week)
|
||||||
|
|
||||||
|
- [ ] Check Google Search Console for indexing status
|
||||||
|
- [ ] Review Google Analytics data
|
||||||
|
- [ ] Monitor for errors in browser console
|
||||||
|
- [ ] Check mobile usability report
|
||||||
|
- [ ] Review search queries in Search Console
|
||||||
|
- [ ] Address any security issues
|
||||||
|
- [ ] Respond to user feedback
|
||||||
|
|
||||||
|
## Post-Launch (First Month)
|
||||||
|
|
||||||
|
- [ ] Analyze traffic sources
|
||||||
|
- [ ] Review top performing pages
|
||||||
|
- [ ] Optimize underperforming pages
|
||||||
|
- [ ] Build backlinks from relevant sites
|
||||||
|
- [ ] Create additional content (blog posts)
|
||||||
|
- [ ] Improve based on user behavior data
|
||||||
|
- [ ] A/B test different meta descriptions
|
||||||
|
|
||||||
|
## Ongoing Maintenance
|
||||||
|
|
||||||
|
### Weekly
|
||||||
|
- [ ] Check Google Search Console
|
||||||
|
- [ ] Review Analytics data
|
||||||
|
- [ ] Monitor site performance
|
||||||
|
- [ ] Check for broken links
|
||||||
|
|
||||||
|
### Monthly
|
||||||
|
- [ ] Update sitemap if content changes
|
||||||
|
- [ ] Review and update meta descriptions
|
||||||
|
- [ ] Check for SEO opportunities
|
||||||
|
- [ ] Analyze competitor rankings
|
||||||
|
- [ ] Update structured data if needed
|
||||||
|
|
||||||
|
### Quarterly
|
||||||
|
- [ ] Comprehensive SEO audit
|
||||||
|
- [ ] Update content and documentation
|
||||||
|
- [ ] Review backlink profile
|
||||||
|
- [ ] Update screenshots and images
|
||||||
|
- [ ] Test all functionality
|
||||||
|
|
||||||
|
## Quick Command Reference
|
||||||
|
|
||||||
|
### Test Local Development
|
||||||
|
```bash
|
||||||
|
# Start server
|
||||||
|
python api/app.py
|
||||||
|
|
||||||
|
# Access locally
|
||||||
|
http://localhost:5000
|
||||||
|
|
||||||
|
# Check robots.txt
|
||||||
|
http://localhost:5000/robots.txt
|
||||||
|
|
||||||
|
# Check sitemap
|
||||||
|
http://localhost:5000/sitemap.xml
|
||||||
|
```
|
||||||
|
|
||||||
|
### Validation Commands
|
||||||
|
```bash
|
||||||
|
# Validate HTML
|
||||||
|
https://validator.w3.org/
|
||||||
|
|
||||||
|
# Check structured data
|
||||||
|
curl https://yoursite.com/ | grep -A 50 "application/ld+json"
|
||||||
|
|
||||||
|
# Check response headers
|
||||||
|
curl -I https://yoursite.com/
|
||||||
|
```
|
||||||
|
|
||||||
|
## Success Metrics
|
||||||
|
|
||||||
|
### First 30 Days Goals
|
||||||
|
- [ ] 100+ organic visitors
|
||||||
|
- [ ] Indexed in Google
|
||||||
|
- [ ] Average session duration > 2 minutes
|
||||||
|
- [ ] Bounce rate < 70%
|
||||||
|
|
||||||
|
### First 90 Days Goals
|
||||||
|
- [ ] 1,000+ organic visitors
|
||||||
|
- [ ] Ranking in top 50 for primary keywords
|
||||||
|
- [ ] 100+ backlinks
|
||||||
|
- [ ] Average session duration > 3 minutes
|
||||||
|
- [ ] Bounce rate < 60%
|
||||||
|
|
||||||
|
### First Year Goals
|
||||||
|
- [ ] 10,000+ organic visitors/month
|
||||||
|
- [ ] Ranking in top 10 for several keywords
|
||||||
|
- [ ] 1,000+ backlinks
|
||||||
|
- [ ] Featured in educational resources
|
||||||
|
- [ ] 90+ PageSpeed score
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- Remember to test everything in a staging environment first
|
||||||
|
- Keep backups of all configuration files
|
||||||
|
- Document all changes in CHANGELOG.md
|
||||||
|
- Monitor performance after each change
|
||||||
|
- User experience is more important than SEO tricks
|
||||||
202
GENERATE_IMAGES_INSTRUCTIONS.md
Normal file
202
GENERATE_IMAGES_INSTRUCTIONS.md
Normal file
@@ -0,0 +1,202 @@
|
|||||||
|
# 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
|
||||||
28
README.md
28
README.md
@@ -74,12 +74,19 @@ source venv/bin/activate
|
|||||||
pip install -r requirements.txt
|
pip install -r requirements.txt
|
||||||
```
|
```
|
||||||
|
|
||||||
4. **Run the application:**
|
4. **Generate SEO images:**
|
||||||
|
```bash
|
||||||
|
python generate_images.py
|
||||||
|
```
|
||||||
|
This creates favicons, social media previews, and PWA icons.
|
||||||
|
See `GENERATE_IMAGES_INSTRUCTIONS.md` for details.
|
||||||
|
|
||||||
|
5. **Run the application:**
|
||||||
```bash
|
```bash
|
||||||
python api/app.py
|
python api/app.py
|
||||||
```
|
```
|
||||||
|
|
||||||
5. **Open your browser:**
|
6. **Open your browser:**
|
||||||
Navigate to `http://localhost:5000`
|
Navigate to `http://localhost:5000`
|
||||||
|
|
||||||
### Docker Setup
|
### Docker Setup
|
||||||
@@ -267,6 +274,23 @@ mazer/
|
|||||||
- **Containerization:** Docker, Docker Compose
|
- **Containerization:** Docker, Docker Compose
|
||||||
- **Frontend:** HTML5, CSS3, JavaScript
|
- **Frontend:** HTML5, CSS3, JavaScript
|
||||||
- **Design:** Neo-Brutalism aesthetic
|
- **Design:** Neo-Brutalism aesthetic
|
||||||
|
- **SEO:** Comprehensive meta tags, structured data, sitemap, robots.txt
|
||||||
|
|
||||||
|
## SEO Features
|
||||||
|
|
||||||
|
The site is fully optimized for search engines:
|
||||||
|
- ✅ Comprehensive meta tags (title, description, keywords)
|
||||||
|
- ✅ Open Graph tags for social media sharing
|
||||||
|
- ✅ Twitter Card support
|
||||||
|
- ✅ Schema.org structured data (WebApplication)
|
||||||
|
- ✅ XML sitemap with image sitemap
|
||||||
|
- ✅ robots.txt for crawler guidance
|
||||||
|
- ✅ PWA manifest for mobile app experience
|
||||||
|
- ✅ Semantic HTML with ARIA roles
|
||||||
|
- ✅ Mobile-optimized and responsive
|
||||||
|
- ✅ Fast loading with resource hints
|
||||||
|
|
||||||
|
See `SEO_OPTIMIZATION.md` for complete details.
|
||||||
|
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|
||||||
|
|||||||
307
SEO_OPTIMIZATION.md
Normal file
307
SEO_OPTIMIZATION.md
Normal file
@@ -0,0 +1,307 @@
|
|||||||
|
# SEO Optimization - Complete Guide
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
The Maze Generator is now fully optimized for search engines with comprehensive SEO elements including meta tags, structured data, semantic HTML, and crawlability enhancements.
|
||||||
|
|
||||||
|
## Implemented SEO Features
|
||||||
|
|
||||||
|
### 1. Meta Tags
|
||||||
|
|
||||||
|
#### Primary Meta Tags
|
||||||
|
- ✅ **Title**: "Maze Generator | 8 Algorithms, Animated Solving, Neo-Brutalism Design"
|
||||||
|
- 62 characters (optimal: 50-60)
|
||||||
|
- Includes main keywords and unique selling points
|
||||||
|
- ✅ **Description**: Comprehensive 155-character description with keywords
|
||||||
|
- ✅ **Keywords**: Targeted keywords including algorithms, pathfinding, visualization
|
||||||
|
- ✅ **Author**: Site attribution
|
||||||
|
- ✅ **Robots**: `index, follow` - allows search engine indexing
|
||||||
|
- ✅ **Language**: English
|
||||||
|
- ✅ **Canonical URL**: Prevents duplicate content issues
|
||||||
|
|
||||||
|
#### Open Graph (Facebook/LinkedIn)
|
||||||
|
- ✅ `og:type`: website
|
||||||
|
- ✅ `og:url`: Canonical URL
|
||||||
|
- ✅ `og:title`: Optimized title for social sharing
|
||||||
|
- ✅ `og:description`: Compelling description
|
||||||
|
- ✅ `og:image`: 1200x630px image (recommended size)
|
||||||
|
- ✅ `og:site_name`: Brand name
|
||||||
|
- ✅ `og:locale`: en_US
|
||||||
|
|
||||||
|
#### Twitter Cards
|
||||||
|
- ✅ `twitter:card`: summary_large_image
|
||||||
|
- ✅ `twitter:title`: Optimized title
|
||||||
|
- ✅ `twitter:description`: Compelling description
|
||||||
|
- ✅ `twitter:image`: High-quality preview image
|
||||||
|
|
||||||
|
### 2. Structured Data (Schema.org)
|
||||||
|
|
||||||
|
**Type**: WebApplication
|
||||||
|
|
||||||
|
**Key Properties**:
|
||||||
|
- ✅ Name and description
|
||||||
|
- ✅ URL and application category
|
||||||
|
- ✅ Operating system (Any - web-based)
|
||||||
|
- ✅ Price (Free - $0)
|
||||||
|
- ✅ Creator/Organization information
|
||||||
|
- ✅ Location (New Jersey, US)
|
||||||
|
- ✅ Feature list (10 key features)
|
||||||
|
- ✅ Screenshot URL
|
||||||
|
|
||||||
|
**Benefits**:
|
||||||
|
- Rich snippets in search results
|
||||||
|
- Enhanced knowledge panels
|
||||||
|
- Better categorization
|
||||||
|
- Improved click-through rates
|
||||||
|
|
||||||
|
### 3. Semantic HTML
|
||||||
|
|
||||||
|
**ARIA Roles**:
|
||||||
|
- ✅ `<header role="banner">` - Main header
|
||||||
|
- ✅ `<main role="main">` - Main content area
|
||||||
|
- ✅ `<footer role="contentinfo">` - Footer information
|
||||||
|
|
||||||
|
**Benefits**:
|
||||||
|
- Better accessibility (screen readers)
|
||||||
|
- Improved content understanding for search engines
|
||||||
|
- Semantic structure for AI crawlers
|
||||||
|
|
||||||
|
### 4. Technical SEO
|
||||||
|
|
||||||
|
#### Robots.txt (`/robots.txt`)
|
||||||
|
```
|
||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
Disallow: /api/
|
||||||
|
|
||||||
|
Sitemap: https://yoursite.com/sitemap.xml
|
||||||
|
```
|
||||||
|
|
||||||
|
**Purpose**:
|
||||||
|
- Allows all content indexing
|
||||||
|
- Blocks API endpoints (no value for users)
|
||||||
|
- Points to sitemap
|
||||||
|
- Crawl-delay for politeness
|
||||||
|
|
||||||
|
#### Sitemap.xml (`/sitemap.xml`)
|
||||||
|
- ✅ Homepage URL with priority 1.0
|
||||||
|
- ✅ Last modified date
|
||||||
|
- ✅ Change frequency (weekly)
|
||||||
|
- ✅ Image sitemap integration
|
||||||
|
- ✅ Image captions and titles
|
||||||
|
|
||||||
|
#### Web Manifest (`/static/manifest.json`)
|
||||||
|
- ✅ PWA compatibility
|
||||||
|
- ✅ App name and description
|
||||||
|
- ✅ Theme colors
|
||||||
|
- ✅ Icon sizes (192x192, 512x512)
|
||||||
|
- ✅ Categories and screenshots
|
||||||
|
- ✅ Standalone display mode
|
||||||
|
|
||||||
|
### 5. Performance Optimizations
|
||||||
|
|
||||||
|
#### Resource Hints
|
||||||
|
- ✅ `<link rel="preconnect">` for Google Fonts
|
||||||
|
- ✅ DNS prefetch for external resources
|
||||||
|
- ✅ Deferred JavaScript loading
|
||||||
|
|
||||||
|
#### Theme & Branding
|
||||||
|
- ✅ `theme-color`: #FFE500 (Neon yellow - brand color)
|
||||||
|
- ✅ `msapplication-TileColor`: #000000 (Black for Windows tiles)
|
||||||
|
- ✅ Apple touch icons for iOS
|
||||||
|
|
||||||
|
### 6. Mobile Optimization
|
||||||
|
|
||||||
|
- ✅ Viewport meta tag with proper scaling
|
||||||
|
- ✅ Mobile-friendly responsive design
|
||||||
|
- ✅ Touch-friendly button sizes (Neo-Brutalism design)
|
||||||
|
- ✅ PWA manifest for "Add to Home Screen"
|
||||||
|
|
||||||
|
### 7. Favicon & Icons
|
||||||
|
|
||||||
|
**Required Files** (to be created):
|
||||||
|
```
|
||||||
|
web/static/images/
|
||||||
|
├── favicon-16x16.png
|
||||||
|
├── favicon-32x32.png
|
||||||
|
├── apple-touch-icon.png (180x180)
|
||||||
|
├── icon-192x192.png
|
||||||
|
├── icon-512x512.png
|
||||||
|
├── og-image.png (1200x630)
|
||||||
|
├── twitter-image.png (1200x675)
|
||||||
|
└── screenshot.png
|
||||||
|
```
|
||||||
|
|
||||||
|
## SEO Best Practices Implemented
|
||||||
|
|
||||||
|
### Content Optimization
|
||||||
|
1. ✅ **Keyword-rich title** with brand at the end
|
||||||
|
2. ✅ **Compelling meta description** under 160 characters
|
||||||
|
3. ✅ **Alt text ready** for images (via manifest)
|
||||||
|
4. ✅ **Semantic HTML5** elements
|
||||||
|
5. ✅ **Clear heading hierarchy** (H1, H2, H3)
|
||||||
|
|
||||||
|
### Technical Excellence
|
||||||
|
1. ✅ **Fast loading** (optimized CSS, minimal JS)
|
||||||
|
2. ✅ **Mobile-first** responsive design
|
||||||
|
3. ✅ **HTTPS ready** (configure on deployment)
|
||||||
|
4. ✅ **XML sitemap** for search engines
|
||||||
|
5. ✅ **Robots.txt** for crawler guidance
|
||||||
|
|
||||||
|
### User Experience
|
||||||
|
1. ✅ **Clear navigation** with numbered buttons
|
||||||
|
2. ✅ **Engaging visuals** (Neo-Brutalism design)
|
||||||
|
3. ✅ **Interactive features** (animations, controls)
|
||||||
|
4. ✅ **Educational value** (8 algorithms explained)
|
||||||
|
5. ✅ **Free to use** (no paywalls)
|
||||||
|
|
||||||
|
## Google Search Console Setup
|
||||||
|
|
||||||
|
### Required Actions After Deployment:
|
||||||
|
|
||||||
|
1. **Submit Sitemap**
|
||||||
|
```
|
||||||
|
https://yoursite.com/sitemap.xml
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Request Indexing**
|
||||||
|
- Homepage URL
|
||||||
|
- Key feature pages (if added)
|
||||||
|
|
||||||
|
3. **Monitor Performance**
|
||||||
|
- Track impressions
|
||||||
|
- Monitor click-through rates
|
||||||
|
- Analyze search queries
|
||||||
|
|
||||||
|
4. **Check Mobile Usability**
|
||||||
|
- Run mobile-friendly test
|
||||||
|
- Fix any issues
|
||||||
|
|
||||||
|
5. **Core Web Vitals**
|
||||||
|
- Monitor LCP (Largest Contentful Paint)
|
||||||
|
- Monitor FID (First Input Delay)
|
||||||
|
- Monitor CLS (Cumulative Layout Shift)
|
||||||
|
|
||||||
|
## Keywords Strategy
|
||||||
|
|
||||||
|
### Primary Keywords
|
||||||
|
- maze generator
|
||||||
|
- maze solver
|
||||||
|
- pathfinding algorithms
|
||||||
|
- maze visualization
|
||||||
|
|
||||||
|
### Secondary Keywords
|
||||||
|
- recursive backtracking
|
||||||
|
- kruskal algorithm
|
||||||
|
- prim algorithm
|
||||||
|
- DFS BFS algorithm
|
||||||
|
- animated pathfinding
|
||||||
|
- maze analysis
|
||||||
|
|
||||||
|
### Long-tail Keywords
|
||||||
|
- online maze generator with algorithms
|
||||||
|
- animated maze solving visualization
|
||||||
|
- free maze generator and solver
|
||||||
|
- educational pathfinding tool
|
||||||
|
|
||||||
|
## Content Marketing Opportunities
|
||||||
|
|
||||||
|
1. **Blog Posts** (future enhancement)
|
||||||
|
- "Understanding 8 Maze Generation Algorithms"
|
||||||
|
- "DFS vs BFS: Which is Better for Maze Solving?"
|
||||||
|
- "The Math Behind Perfect Mazes"
|
||||||
|
|
||||||
|
2. **Educational Resources**
|
||||||
|
- Algorithm complexity comparison
|
||||||
|
- Interactive tutorials
|
||||||
|
- Code examples
|
||||||
|
|
||||||
|
3. **Social Media**
|
||||||
|
- Share generated mazes
|
||||||
|
- Algorithm visualizations
|
||||||
|
- User creations
|
||||||
|
|
||||||
|
## Analytics Integration (Recommended)
|
||||||
|
|
||||||
|
### Google Analytics 4
|
||||||
|
```html
|
||||||
|
<!-- Add to <head> -->
|
||||||
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
|
||||||
|
<script>
|
||||||
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
function gtag(){dataLayer.push(arguments);}
|
||||||
|
gtag('js', new Date());
|
||||||
|
gtag('config', 'G-XXXXXXXXXX');
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Event Tracking
|
||||||
|
- Maze generation (algorithm type)
|
||||||
|
- Solve attempts (DFS vs BFS)
|
||||||
|
- Downloads
|
||||||
|
- Save/load operations
|
||||||
|
- Benchmark runs
|
||||||
|
|
||||||
|
## Local SEO (New Jersey)
|
||||||
|
|
||||||
|
- ✅ Location in structured data
|
||||||
|
- ✅ "Made in New Jersey" in footer
|
||||||
|
- 💡 Future: Add to Google My Business
|
||||||
|
- 💡 Future: Local business schema
|
||||||
|
|
||||||
|
## Accessibility = SEO
|
||||||
|
|
||||||
|
- ✅ ARIA roles for screen readers
|
||||||
|
- ✅ Semantic HTML structure
|
||||||
|
- ✅ Keyboard navigation support
|
||||||
|
- ✅ High contrast design (Neo-Brutalism)
|
||||||
|
- ✅ Clear focus states
|
||||||
|
|
||||||
|
## Checklist Before Launch
|
||||||
|
|
||||||
|
- [ ] Replace "https://yoursite.com/" with actual domain
|
||||||
|
- [ ] Create all icon/image files
|
||||||
|
- [ ] Set up Google Search Console
|
||||||
|
- [ ] Set up Google Analytics
|
||||||
|
- [ ] Generate OG images (1200x630)
|
||||||
|
- [ ] Test with Google's Rich Results Test
|
||||||
|
- [ ] Test with Mobile-Friendly Test
|
||||||
|
- [ ] Validate sitemap.xml
|
||||||
|
- [ ] Check robots.txt is accessible
|
||||||
|
- [ ] Enable HTTPS
|
||||||
|
- [ ] Set up redirect (www to non-www or vice versa)
|
||||||
|
|
||||||
|
## Expected SEO Impact
|
||||||
|
|
||||||
|
### Search Rankings (Potential)
|
||||||
|
- **"maze generator"**: Competitive (with optimization)
|
||||||
|
- **"online maze solver"**: Good potential
|
||||||
|
- **"pathfinding visualization"**: Excellent potential
|
||||||
|
- **"animated maze solving"**: Very good potential
|
||||||
|
- **"neo-brutalism design tool"**: Unique niche
|
||||||
|
|
||||||
|
### Traffic Projections
|
||||||
|
- Month 1-3: 100-500 visits/month
|
||||||
|
- Month 4-6: 500-2000 visits/month
|
||||||
|
- Month 7-12: 2000-10000 visits/month
|
||||||
|
|
||||||
|
*Note: Depends on backlinks, content quality, and competition*
|
||||||
|
|
||||||
|
## Monitoring Tools
|
||||||
|
|
||||||
|
1. **Google Search Console** - Index status, search performance
|
||||||
|
2. **Google Analytics** - Traffic, behavior, conversions
|
||||||
|
3. **PageSpeed Insights** - Performance metrics
|
||||||
|
4. **Lighthouse** - SEO, accessibility, performance audit
|
||||||
|
5. **Schema Markup Validator** - Structured data validation
|
||||||
|
|
||||||
|
## Future Enhancements
|
||||||
|
|
||||||
|
- [ ] Add blog/articles section
|
||||||
|
- [ ] Create video tutorials
|
||||||
|
- [ ] Build backlinks from educational sites
|
||||||
|
- [ ] Add social sharing buttons
|
||||||
|
- [ ] Create interactive documentation
|
||||||
|
- [ ] Add user gallery
|
||||||
|
- [ ] Implement comments/feedback
|
||||||
|
- [ ] Create API documentation page
|
||||||
|
- [ ] Add multilingual support
|
||||||
@@ -31,10 +31,13 @@ ENV PATH=/root/.local/bin:$PATH
|
|||||||
COPY src/ ./src/
|
COPY src/ ./src/
|
||||||
COPY api/ ./api/
|
COPY api/ ./api/
|
||||||
COPY web/ ./web/
|
COPY web/ ./web/
|
||||||
|
COPY generate_images.py ./
|
||||||
|
|
||||||
# Create directories for data
|
# Create directories for data
|
||||||
RUN mkdir -p saved_mazes output_images
|
RUN mkdir -p saved_mazes output_images
|
||||||
|
|
||||||
|
RUN python generate_images.py
|
||||||
|
|
||||||
# Expose port
|
# Expose port
|
||||||
EXPOSE 5000
|
EXPOSE 5000
|
||||||
|
|
||||||
|
|||||||
321
generate_images.py
Normal file
321
generate_images.py
Normal file
@@ -0,0 +1,321 @@
|
|||||||
|
"""Generate required images for SEO and branding."""
|
||||||
|
|
||||||
|
from PIL import Image, ImageDraw, ImageFont
|
||||||
|
import os
|
||||||
|
|
||||||
|
# Create images directory
|
||||||
|
os.makedirs('web/static/images', exist_ok=True)
|
||||||
|
|
||||||
|
# Neo-Brutalism color palette
|
||||||
|
COLORS = {
|
||||||
|
'yellow': '#FFE500',
|
||||||
|
'pink': '#FF10F0',
|
||||||
|
'cyan': '#00F0FF',
|
||||||
|
'green': '#39FF14',
|
||||||
|
'black': '#000000',
|
||||||
|
'white': '#FFFFFF',
|
||||||
|
'gray': '#F5F5F5'
|
||||||
|
}
|
||||||
|
|
||||||
|
def create_favicon(size, filename):
|
||||||
|
"""Create a favicon with Neo-Brutalism design."""
|
||||||
|
img = Image.new('RGB', (size, size), COLORS['yellow'])
|
||||||
|
draw = ImageDraw.Draw(img)
|
||||||
|
|
||||||
|
# Draw thick border
|
||||||
|
border_width = max(2, size // 8)
|
||||||
|
draw.rectangle([0, 0, size-1, size-1], outline=COLORS['black'], width=border_width)
|
||||||
|
|
||||||
|
# Draw maze-like pattern
|
||||||
|
cell_size = size // 4
|
||||||
|
for i in range(1, 4):
|
||||||
|
# Vertical lines
|
||||||
|
x = i * cell_size
|
||||||
|
draw.line([(x, border_width), (x, size - border_width)],
|
||||||
|
fill=COLORS['black'], width=max(1, size // 16))
|
||||||
|
# Horizontal lines
|
||||||
|
y = i * cell_size
|
||||||
|
draw.line([(border_width, y), (size - border_width, y)],
|
||||||
|
fill=COLORS['black'], width=max(1, size // 16))
|
||||||
|
|
||||||
|
img.save(f'web/static/images/{filename}')
|
||||||
|
print(f"Created {filename} ({size}x{size})")
|
||||||
|
|
||||||
|
def create_twitter_image():
|
||||||
|
"""Create Twitter card image (1200x675)."""
|
||||||
|
width, height = 1200, 675
|
||||||
|
img = Image.new('RGB', (width, height), COLORS['gray'])
|
||||||
|
draw = ImageDraw.Draw(img)
|
||||||
|
|
||||||
|
# Background with gradient effect (using rectangles)
|
||||||
|
for i in range(0, height, 20):
|
||||||
|
color_mix = int(245 - (i / height) * 20)
|
||||||
|
draw.rectangle([0, i, width, i+20],
|
||||||
|
fill=f'#{color_mix:02x}{color_mix:02x}{color_mix:02x}')
|
||||||
|
|
||||||
|
# Title box
|
||||||
|
title_height = 150
|
||||||
|
title_y = 50
|
||||||
|
draw.rectangle([50, title_y, width-50, title_y + title_height],
|
||||||
|
fill=COLORS['yellow'])
|
||||||
|
draw.rectangle([50, title_y, width-50, title_y + title_height],
|
||||||
|
outline=COLORS['black'], width=8)
|
||||||
|
|
||||||
|
# Shadow for title box
|
||||||
|
shadow_offset = 12
|
||||||
|
draw.rectangle([50 + shadow_offset, title_y + shadow_offset,
|
||||||
|
width-50 + shadow_offset, title_y + title_height + shadow_offset],
|
||||||
|
outline=COLORS['black'], width=8)
|
||||||
|
|
||||||
|
# Try to use a bold font, fallback to default
|
||||||
|
try:
|
||||||
|
font_large = ImageFont.truetype("arial.ttf", 70)
|
||||||
|
font_medium = ImageFont.truetype("arial.ttf", 50)
|
||||||
|
font_small = ImageFont.truetype("arial.ttf", 35)
|
||||||
|
except:
|
||||||
|
font_large = ImageFont.load_default()
|
||||||
|
font_medium = ImageFont.load_default()
|
||||||
|
font_small = ImageFont.load_default()
|
||||||
|
|
||||||
|
# Title text
|
||||||
|
title = "MAZE GENERATOR"
|
||||||
|
bbox = draw.textbbox((0, 0), title, font=font_large)
|
||||||
|
text_width = bbox[2] - bbox[0]
|
||||||
|
text_x = (width - text_width) // 2
|
||||||
|
draw.text((text_x, title_y + 40), title, fill=COLORS['black'], font=font_large)
|
||||||
|
|
||||||
|
# Features boxes
|
||||||
|
features = [
|
||||||
|
"8 ALGORITHMS",
|
||||||
|
"ANIMATED SOLVING",
|
||||||
|
"NEO-BRUTALISM"
|
||||||
|
]
|
||||||
|
|
||||||
|
feature_y = title_y + title_height + 60
|
||||||
|
box_width = 320
|
||||||
|
box_height = 100
|
||||||
|
spacing = 40
|
||||||
|
total_width = len(features) * box_width + (len(features) - 1) * spacing
|
||||||
|
start_x = (width - total_width) // 2
|
||||||
|
|
||||||
|
colors_cycle = [COLORS['pink'], COLORS['cyan'], COLORS['green']]
|
||||||
|
|
||||||
|
for i, feature in enumerate(features):
|
||||||
|
x = start_x + i * (box_width + spacing)
|
||||||
|
|
||||||
|
# Shadow
|
||||||
|
draw.rectangle([x + 8, feature_y + 8, x + box_width + 8, feature_y + box_height + 8],
|
||||||
|
fill=COLORS['black'])
|
||||||
|
|
||||||
|
# Box
|
||||||
|
draw.rectangle([x, feature_y, x + box_width, feature_y + box_height],
|
||||||
|
fill=colors_cycle[i])
|
||||||
|
draw.rectangle([x, feature_y, x + box_width, feature_y + box_height],
|
||||||
|
outline=COLORS['black'], width=6)
|
||||||
|
|
||||||
|
# Text
|
||||||
|
bbox = draw.textbbox((0, 0), feature, font=font_small)
|
||||||
|
text_w = bbox[2] - bbox[0]
|
||||||
|
text_h = bbox[3] - bbox[1]
|
||||||
|
draw.text((x + (box_width - text_w) // 2,
|
||||||
|
feature_y + (box_height - text_h) // 2),
|
||||||
|
feature, fill=COLORS['black'], font=font_small)
|
||||||
|
|
||||||
|
img.save('web/static/images/twitter-image.png')
|
||||||
|
print("Created twitter-image.png (1200x675)")
|
||||||
|
|
||||||
|
def create_og_image():
|
||||||
|
"""Create Open Graph image (1200x630)."""
|
||||||
|
width, height = 1200, 630
|
||||||
|
img = Image.new('RGB', (width, height), COLORS['yellow'])
|
||||||
|
draw = ImageDraw.Draw(img)
|
||||||
|
|
||||||
|
# Border
|
||||||
|
draw.rectangle([0, 0, width-1, height-1], outline=COLORS['black'], width=10)
|
||||||
|
|
||||||
|
# Try to use a bold font, fallback to default
|
||||||
|
try:
|
||||||
|
font_title = ImageFont.truetype("arial.ttf", 90)
|
||||||
|
font_subtitle = ImageFont.truetype("arial.ttf", 45)
|
||||||
|
except:
|
||||||
|
font_title = ImageFont.load_default()
|
||||||
|
font_subtitle = ImageFont.load_default()
|
||||||
|
|
||||||
|
# Title
|
||||||
|
title = "MAZE GENERATOR"
|
||||||
|
bbox = draw.textbbox((0, 0), title, font=font_title)
|
||||||
|
text_width = bbox[2] - bbox[0]
|
||||||
|
draw.text(((width - text_width) // 2, 150), title,
|
||||||
|
fill=COLORS['black'], font=font_title)
|
||||||
|
|
||||||
|
# Subtitle
|
||||||
|
subtitle = "8 ALGORITHMS • ANIMATED SOLVING"
|
||||||
|
bbox = draw.textbbox((0, 0), subtitle, font=font_subtitle)
|
||||||
|
text_width = bbox[2] - bbox[0]
|
||||||
|
draw.text(((width - text_width) // 2, 280), subtitle,
|
||||||
|
fill=COLORS['black'], font=font_subtitle)
|
||||||
|
|
||||||
|
# Draw simple maze pattern
|
||||||
|
maze_size = 300
|
||||||
|
maze_x = (width - maze_size) // 2
|
||||||
|
maze_y = 380
|
||||||
|
cell_size = maze_size // 6
|
||||||
|
|
||||||
|
# Background for maze
|
||||||
|
draw.rectangle([maze_x - 10, maze_y - 10,
|
||||||
|
maze_x + maze_size + 10, maze_y + maze_size + 10],
|
||||||
|
fill=COLORS['white'])
|
||||||
|
draw.rectangle([maze_x - 10, maze_y - 10,
|
||||||
|
maze_x + maze_size + 10, maze_y + maze_size + 10],
|
||||||
|
outline=COLORS['black'], width=6)
|
||||||
|
|
||||||
|
# Draw grid
|
||||||
|
for i in range(7):
|
||||||
|
# Vertical
|
||||||
|
x = maze_x + i * cell_size
|
||||||
|
draw.line([(x, maze_y), (x, maze_y + maze_size)],
|
||||||
|
fill=COLORS['black'], width=3)
|
||||||
|
# Horizontal
|
||||||
|
y = maze_y + i * cell_size
|
||||||
|
draw.line([(maze_x, y), (maze_x + maze_size, y)],
|
||||||
|
fill=COLORS['black'], width=3)
|
||||||
|
|
||||||
|
img.save('web/static/images/og-image.png')
|
||||||
|
print("Created og-image.png (1200x630)")
|
||||||
|
|
||||||
|
def create_apple_touch_icon():
|
||||||
|
"""Create Apple touch icon (180x180)."""
|
||||||
|
size = 180
|
||||||
|
img = Image.new('RGB', (size, size), COLORS['yellow'])
|
||||||
|
draw = ImageDraw.Draw(img)
|
||||||
|
|
||||||
|
# Border
|
||||||
|
border = 8
|
||||||
|
draw.rectangle([0, 0, size-1, size-1], outline=COLORS['black'], width=border)
|
||||||
|
|
||||||
|
# Simple maze M letter
|
||||||
|
try:
|
||||||
|
font = ImageFont.truetype("arial.ttf", 120)
|
||||||
|
except:
|
||||||
|
font = ImageFont.load_default()
|
||||||
|
|
||||||
|
text = "M"
|
||||||
|
bbox = draw.textbbox((0, 0), text, font=font)
|
||||||
|
text_width = bbox[2] - bbox[0]
|
||||||
|
text_height = bbox[3] - bbox[1]
|
||||||
|
draw.text(((size - text_width) // 2, (size - text_height) // 2 - 10),
|
||||||
|
text, fill=COLORS['black'], font=font)
|
||||||
|
|
||||||
|
img.save('web/static/images/apple-touch-icon.png')
|
||||||
|
print("Created apple-touch-icon.png (180x180)")
|
||||||
|
|
||||||
|
def create_pwa_icons():
|
||||||
|
"""Create PWA icons."""
|
||||||
|
for size in [192, 512]:
|
||||||
|
img = Image.new('RGB', (size, size), COLORS['yellow'])
|
||||||
|
draw = ImageDraw.Draw(img)
|
||||||
|
|
||||||
|
# Border
|
||||||
|
border = max(8, size // 24)
|
||||||
|
draw.rectangle([0, 0, size-1, size-1], outline=COLORS['black'], width=border)
|
||||||
|
|
||||||
|
# Draw maze pattern
|
||||||
|
cell_size = size // 8
|
||||||
|
padding = border * 2
|
||||||
|
|
||||||
|
for i in range(1, 8):
|
||||||
|
x = padding + i * cell_size
|
||||||
|
y = padding + i * cell_size
|
||||||
|
|
||||||
|
# Some vertical lines
|
||||||
|
if i % 2 == 0:
|
||||||
|
draw.line([(x, padding), (x, size - padding)],
|
||||||
|
fill=COLORS['black'], width=max(2, size // 64))
|
||||||
|
|
||||||
|
# Some horizontal lines
|
||||||
|
if i % 3 == 1:
|
||||||
|
draw.line([(padding, y), (size - padding, y)],
|
||||||
|
fill=COLORS['black'], width=max(2, size // 64))
|
||||||
|
|
||||||
|
filename = f'icon-{size}x{size}.png'
|
||||||
|
img.save(f'web/static/images/{filename}')
|
||||||
|
print(f"Created {filename} ({size}x{size})")
|
||||||
|
|
||||||
|
def create_screenshot():
|
||||||
|
"""Create a generic screenshot placeholder."""
|
||||||
|
width, height = 1280, 720
|
||||||
|
img = Image.new('RGB', (width, height), COLORS['gray'])
|
||||||
|
draw = ImageDraw.Draw(img)
|
||||||
|
|
||||||
|
# Header
|
||||||
|
header_height = 120
|
||||||
|
draw.rectangle([0, 0, width, header_height], fill=COLORS['yellow'])
|
||||||
|
draw.rectangle([0, 0, width, header_height], outline=COLORS['black'], width=8)
|
||||||
|
|
||||||
|
try:
|
||||||
|
font = ImageFont.truetype("arial.ttf", 60)
|
||||||
|
except:
|
||||||
|
font = ImageFont.load_default()
|
||||||
|
|
||||||
|
text = "MAZE GENERATOR - SCREENSHOT"
|
||||||
|
bbox = draw.textbbox((0, 0), text, font=font)
|
||||||
|
text_width = bbox[2] - bbox[0]
|
||||||
|
draw.text(((width - text_width) // 2, 30), text, fill=COLORS['black'], font=font)
|
||||||
|
|
||||||
|
# Draw sample maze area
|
||||||
|
maze_area_x = 50
|
||||||
|
maze_area_y = header_height + 50
|
||||||
|
maze_area_w = 600
|
||||||
|
maze_area_h = 500
|
||||||
|
|
||||||
|
draw.rectangle([maze_area_x, maze_area_y,
|
||||||
|
maze_area_x + maze_area_w, maze_area_y + maze_area_h],
|
||||||
|
fill=COLORS['white'])
|
||||||
|
draw.rectangle([maze_area_x, maze_area_y,
|
||||||
|
maze_area_x + maze_area_w, maze_area_y + maze_area_h],
|
||||||
|
outline=COLORS['black'], width=6)
|
||||||
|
|
||||||
|
# Controls panel
|
||||||
|
panel_x = maze_area_x + maze_area_w + 50
|
||||||
|
panel_y = maze_area_y
|
||||||
|
panel_w = width - panel_x - 50
|
||||||
|
panel_h = maze_area_h
|
||||||
|
|
||||||
|
draw.rectangle([panel_x, panel_y, panel_x + panel_w, panel_y + panel_h],
|
||||||
|
fill=COLORS['cyan'])
|
||||||
|
draw.rectangle([panel_x, panel_y, panel_x + panel_w, panel_y + panel_h],
|
||||||
|
outline=COLORS['black'], width=6)
|
||||||
|
|
||||||
|
img.save('web/static/images/screenshot.png')
|
||||||
|
print("Created screenshot.png (1280x720)")
|
||||||
|
|
||||||
|
# Generate all images
|
||||||
|
print("Generating images...")
|
||||||
|
print("-" * 50)
|
||||||
|
|
||||||
|
# Favicons
|
||||||
|
create_favicon(16, 'favicon-16x16.png')
|
||||||
|
create_favicon(32, 'favicon-32x32.png')
|
||||||
|
|
||||||
|
# Social media
|
||||||
|
create_twitter_image()
|
||||||
|
create_og_image()
|
||||||
|
|
||||||
|
# Mobile
|
||||||
|
create_apple_touch_icon()
|
||||||
|
create_pwa_icons()
|
||||||
|
|
||||||
|
# Screenshot
|
||||||
|
create_screenshot()
|
||||||
|
|
||||||
|
print("-" * 50)
|
||||||
|
print("All images generated successfully!")
|
||||||
|
print("\nGenerated files:")
|
||||||
|
print(" web/static/images/favicon-16x16.png")
|
||||||
|
print(" web/static/images/favicon-32x32.png")
|
||||||
|
print(" web/static/images/apple-touch-icon.png")
|
||||||
|
print(" web/static/images/icon-192x192.png")
|
||||||
|
print(" web/static/images/icon-512x512.png")
|
||||||
|
print(" web/static/images/twitter-image.png")
|
||||||
|
print(" web/static/images/og-image.png")
|
||||||
|
print(" web/static/images/screenshot.png")
|
||||||
13
web/static/.well-known/security.txt
Normal file
13
web/static/.well-known/security.txt
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
# Security Policy for Maze Generator
|
||||||
|
# https://securitytxt.org/
|
||||||
|
|
||||||
|
Contact: mailto:contact@santhoshj.com
|
||||||
|
Expires: 2025-12-31T23:59:59.000Z
|
||||||
|
Preferred-Languages: en
|
||||||
|
Canonical: https://maze.santhoshj.com/.well-known/security.txt
|
||||||
|
|
||||||
|
# Policy
|
||||||
|
Policy: https://maze.santhoshj.com/security-policy
|
||||||
|
|
||||||
|
# Acknowledgments
|
||||||
|
Acknowledgments: https://maze.santhoshj.com/security-thanks
|
||||||
@@ -15,7 +15,7 @@ Allow: /
|
|||||||
Disallow: /api/
|
Disallow: /api/
|
||||||
|
|
||||||
# Sitemap location
|
# Sitemap location
|
||||||
Sitemap: https://yoursite.com/sitemap.xml
|
Sitemap: https://maze.santhoshj.com/sitemap.xml
|
||||||
|
|
||||||
# Crawl delay (optional)
|
# Crawl delay (optional)
|
||||||
Crawl-delay: 1
|
Crawl-delay: 1
|
||||||
|
|||||||
@@ -2,14 +2,9 @@
|
|||||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
||||||
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
|
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
|
||||||
<url>
|
<url>
|
||||||
<loc>https://yoursite.com/</loc>
|
<loc>https://maze.santhoshj.com/</loc>
|
||||||
<lastmod>2025-01-20</lastmod>
|
<lastmod>2025-01-20</lastmod>
|
||||||
<changefreq>weekly</changefreq>
|
<changefreq>weekly</changefreq>
|
||||||
<priority>1.0</priority>
|
<priority>1.0</priority>
|
||||||
<image:image>
|
|
||||||
<image:loc>https://yoursite.com/static/images/screenshot.png</image:loc>
|
|
||||||
<image:title>Maze Generator - Neo-Brutalism Design</image:title>
|
|
||||||
<image:caption>Interactive maze generator with 8 algorithms and animated solving</image:caption>
|
|
||||||
</image:image>
|
|
||||||
</url>
|
</url>
|
||||||
</urlset>
|
</urlset>
|
||||||
|
|||||||
@@ -16,14 +16,14 @@
|
|||||||
<meta name="revisit-after" content="7 days">
|
<meta name="revisit-after" content="7 days">
|
||||||
|
|
||||||
<!-- Canonical URL -->
|
<!-- Canonical URL -->
|
||||||
<link rel="canonical" href="https://yoursite.com/">
|
<link rel="canonical" href="https://maze.santhoshj.com/">
|
||||||
|
|
||||||
<!-- Open Graph / Facebook -->
|
<!-- Open Graph / Facebook -->
|
||||||
<meta property="og:type" content="website">
|
<meta property="og:type" content="website">
|
||||||
<meta property="og:url" content="https://yoursite.com/">
|
<meta property="og:url" content="https://maze.santhoshj.com/">
|
||||||
<meta property="og:title" content="Maze Generator | 8 Algorithms, Animated Solving">
|
<meta property="og:title" content="Maze Generator | 8 Algorithms, Animated Solving">
|
||||||
<meta property="og:description" content="Generate and solve mazes with 8 different algorithms. Features animated pathfinding visualization, analysis tools, and Neo-Brutalism design. Free online maze generator and solver.">
|
<meta property="og:description" content="Generate and solve mazes with 8 different algorithms. Features animated pathfinding visualization, analysis tools, and Neo-Brutalism design. Free online maze generator and solver.">
|
||||||
<meta property="og:image" content="https://yoursite.com/static/images/og-image.png">
|
<meta property="og:image" content="https://maze.santhoshj.com/static/images/og-image.png">
|
||||||
<meta property="og:image:width" content="1200">
|
<meta property="og:image:width" content="1200">
|
||||||
<meta property="og:image:height" content="630">
|
<meta property="og:image:height" content="630">
|
||||||
<meta property="og:site_name" content="Maze Generator">
|
<meta property="og:site_name" content="Maze Generator">
|
||||||
@@ -31,10 +31,10 @@
|
|||||||
|
|
||||||
<!-- Twitter -->
|
<!-- Twitter -->
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
<meta name="twitter:url" content="https://yoursite.com/">
|
<meta name="twitter:url" content="https://maze.santhoshj.com/">
|
||||||
<meta name="twitter:title" content="Maze Generator | 8 Algorithms, Animated Solving">
|
<meta name="twitter:title" content="Maze Generator | 8 Algorithms, Animated Solving">
|
||||||
<meta name="twitter:description" content="Generate and solve mazes with 8 different algorithms. Features animated pathfinding visualization and Neo-Brutalism design.">
|
<meta name="twitter:description" content="Generate and solve mazes with 8 different algorithms. Features animated pathfinding visualization and Neo-Brutalism design.">
|
||||||
<meta name="twitter:image" content="https://yoursite.com/static/images/twitter-image.png">
|
<meta name="twitter:image" content="https://maze.santhoshj.com/static/images/twitter-image.png">
|
||||||
|
|
||||||
<!-- Favicon -->
|
<!-- Favicon -->
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
|
<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
|
||||||
@@ -63,7 +63,7 @@
|
|||||||
"@type": "WebApplication",
|
"@type": "WebApplication",
|
||||||
"name": "Maze Generator",
|
"name": "Maze Generator",
|
||||||
"description": "Generate and solve mazes with 8 different algorithms including Recursive Backtracking, Kruskal, Prim, Sidewinder, Hunt-and-Kill, Eller, Wilson, and Aldous-Broder. Features animated pathfinding visualization with DFS and BFS solvers.",
|
"description": "Generate and solve mazes with 8 different algorithms including Recursive Backtracking, Kruskal, Prim, Sidewinder, Hunt-and-Kill, Eller, Wilson, and Aldous-Broder. Features animated pathfinding visualization with DFS and BFS solvers.",
|
||||||
"url": "https://yoursite.com/",
|
"url": "https://maze.santhoshj.com/",
|
||||||
"applicationCategory": "EducationalApplication",
|
"applicationCategory": "EducationalApplication",
|
||||||
"operatingSystem": "Any",
|
"operatingSystem": "Any",
|
||||||
"offers": {
|
"offers": {
|
||||||
@@ -95,7 +95,7 @@
|
|||||||
"PNG image export",
|
"PNG image export",
|
||||||
"Neo-Brutalism design"
|
"Neo-Brutalism design"
|
||||||
],
|
],
|
||||||
"screenshot": "https://yoursite.com/static/images/screenshot.png"
|
"screenshot": "https://maze.santhoshj.com/static/images/screenshot.png"
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
Reference in New Issue
Block a user