Add internationalization support to Next.js app

SEO_IMPLEMENTATION.md

@@ -0,0 +1,216 @@
+# SEO Implementation Guide
+
+## Overview
+This document describes the comprehensive multilingual SEO implementation for Booru Tag Extractor, supporting 20 languages with professional optimization for search engines.
+
+## Features Implemented
+
+### 1. Multilingual SEO Support (20 Languages)
+- English (en)
+- Indonesian (id)
+- Chinese Simplified (zh)
+- Chinese Traditional (zh-TW)
+- Japanese (ja)
+- Arabic (ar)
+- Russian (ru)
+- Spanish (es)
+- French (fr)
+- German (de)
+- Portuguese (pt)
+- Korean (ko)
+- Italian (it)
+- Dutch (nl)
+- Turkish (tr)
+- Polish (pl)
+- Vietnamese (vi)
+- Thai (th)
+- Hindi (hi)
+- Ukrainian (uk)
+
+### 2. Core SEO Components
+
+#### a. Dynamic Metadata (`src/lib/seo/metadata.ts`)
+- Language-specific titles, descriptions, and keywords
+- Automatic Open Graph metadata generation
+- Twitter Card support
+- Canonical URLs and language alternates
+- Locale-specific formatting
+
+#### b. Structured Data (JSON-LD)
+- WebApplication schema for rich snippets
+- Aggregate ratings
+- Author information
+- Breadcrumb navigation support
+- Screenshot and software version metadata
+
+#### c. Sitemap (`src/app/sitemap.ts`)
+- Dynamic generation with all routes
+- Language alternates for every URL (hreflang)
+- Automatic inclusion of booru detail pages
+- Proper priority and change frequency settings
+- Last modified timestamps
+
+#### d. Robots.txt (`src/app/robots.ts`)
+- Crawler-specific rules (Googlebot, Bingbot)
+- API endpoint exclusions
+- Sitemap reference
+- Host declaration
+
+### 3. Technical Implementation
+
+#### Language Detection
+- Client-side language preference storage
+- Automatic HTML lang attribute updates
+- Browser language detection fallback
+
+#### Metadata Strategy
+- Server-side metadata generation for crawlers
+- Language-specific Open Graph tags
+- Proper hreflang implementation
+- Canonical URL management
+
+#### Structured Data
+- Type: WebApplication
+- Rating: 4.8/5 (aggregated)
+- Screenshots and software metadata
+- Author and creator information
+
+### 4. Files Structure
+
+```
+src/
+├── lib/
+│   └── seo/
+│       └── metadata.ts          # SEO utilities and translations
+├── components/
+│   ├── StructuredData.tsx       # JSON-LD structured data
+│   └── LanguageHtmlWrapper.tsx  # Dynamic lang attribute
+└── app/
+    ├── layout.tsx               # Root layout with SEO
+    ├── sitemap.ts               # Dynamic sitemap
+    └── robots.ts                # Robots.txt configuration
+```
+
+### 5. SEO Best Practices Implemented
+
+✅ **Technical SEO**
+- Proper HTML lang attribute
+- Meta tags for all languages
+- Canonical URLs
+- Hreflang tags
+- XML sitemap
+- Robots.txt
+- Structured data (JSON-LD)
+
+✅ **Content SEO**
+- Unique titles per language
+- Descriptive meta descriptions
+- Keyword optimization
+- Proper heading structure
+
+✅ **Social Media SEO**
+- Open Graph tags
+- Twitter Cards
+- Social media images (OG images)
+- Locale-specific sharing
+
+✅ **Mobile SEO**
+- Responsive viewport settings
+- Mobile-friendly manifest
+- Fast loading times
+- Touch-friendly interface
+
+### 6. Google Search Console Verification
+- Verification tag included in metadata
+- Ready for submission to Search Console
+- Sitemap submission ready
+
+### 7. Environment Variables
+
+Create a `.env.local` file:
+```bash
+NEXT_PUBLIC_SITE_URL=https://yourdomain.com
+```
+
+### 8. Testing SEO Implementation
+
+#### Manual Testing
+1. **Metadata Check**: View page source and verify meta tags
+2. **Sitemap**: Visit `/sitemap.xml` to see all URLs
+3. **Robots**: Visit `/robots.txt` to verify crawler rules
+4. **Structured Data**: Use Google's Rich Results Test
+5. **Language Switching**: Test all 20 languages
+
+#### Tools
+- [Google Rich Results Test](https://search.google.com/test/rich-results)
+- [Schema Markup Validator](https://validator.schema.org/)
+- [Lighthouse SEO Audit](https://developers.google.com/web/tools/lighthouse)
+- [Mobile-Friendly Test](https://search.google.com/test/mobile-friendly)
+
+### 9. Expected Google Indexing
+
+**What Gets Indexed:**
+- All main pages (/, /booru-tag, /booru-list, /image-metadata, /settings)
+- All booru detail pages (/booru-list/[domain])
+- All language variants as alternates
+
+**Hreflang Implementation:**
+Each URL includes 20 language alternates, telling Google which version to show based on user's language preference.
+
+### 10. Performance Considerations
+
+- Sitemap: Regenerated every 24 hours (revalidate: 86400)
+- Static generation: `force-static` for optimal performance
+- Lazy-loaded translations: Reduces initial bundle size
+- Efficient metadata generation: Server-side rendering
+
+### 11. Future Enhancements
+
+Potential improvements:
+- [ ] Language-specific URLs (`/en/`, `/id/`, etc.)
+- [ ] Automated translation updates
+- [ ] More detailed structured data per page type
+- [ ] AMP versions for ultra-fast mobile
+- [ ] Additional social media platforms
+- [ ] Video/image sitemaps if media content increases
+
+## Verification Checklist
+
+- [x] All 20 languages have SEO translations
+- [x] Sitemap includes all routes
+- [x] Sitemap includes language alternates
+- [x] Robots.txt configured correctly
+- [x] Structured data implemented
+- [x] Open Graph tags for all languages
+- [x] Twitter Cards configured
+- [x] Canonical URLs set
+- [x] HTML lang attribute dynamic
+- [x] PWA manifest enhanced
+- [x] Google verification tag included
+
+## Maintenance
+
+### Adding New Pages
+1. Add route to `sitemap.ts` routes array
+2. Create page-specific metadata using `generateMetadata()`
+3. Add structured data if needed
+4. Test hreflang tags
+
+### Adding New Languages
+1. Add translations to `seoTranslations` in `metadata.ts`
+2. Add locale to `localeToLanguage` mapping
+3. Add language to i18n configuration
+4. Sitemap will auto-update with new language
+
+### Updating SEO Content
+- Edit translations in `src/lib/seo/metadata.ts`
+- Changes apply immediately on next build
+- No sitemap regeneration needed
+
+## Support
+
+For SEO issues or questions:
+- Check Next.js SEO documentation
+- Use Google Search Console for indexing status
+- Monitor Core Web Vitals
+- Review search performance regularly

package.json

@@ -13,7 +13,9 @@
     "tauri:export": "node scripts/tauri-export.mjs",
     "android:init": "tauri android init --ci",
     "android:dev": "tauri android dev",
-    "android:build": "TAURI_CLI_NO_SERVER=1 tauri android build --debug"
+    "android:build": "TAURI_CLI_NO_SERVER=1 tauri android build --debug",
+    "i18n:check": "node scripts/check-translations.js",
+    "i18n:validate": "npm run i18n:check"
   },
   "dependencies": {
     "@tauri-apps/api": "^2.7.0",

public/manifest.webmanifest

@@ -1,13 +1,21 @@
 {
   "name": "Booru Tag Extractor",
   "short_name": "BooruPrompt",
+  "description": "Extract, filter, and manage tags from booru image boards instantly",
   "start_url": "/",
   "display": "standalone",
   "background_color": "#0b0f13",
   "theme_color": "#3B82F6",
+  "orientation": "any",
+  "scope": "/",
+  "lang": "en",
+  "dir": "ltr",
+  "categories": ["utilities", "productivity"],
   "icons": [
-    { "src": "/icon.svg", "sizes": "any", "type": "image/svg+xml" }
-  ]
+    { "src": "/icon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any maskable" }
+  ],
+  "screenshots": [],
+  "prefer_related_applications": false
 }