AI-friendly SEO generator for modern web frameworks
npm install vibe-seoAI-friendly SEO generator for modern web frameworks - Now with automatic compatibility fixes for Vite React applications!
Vibe SEO is now a true self-service tool that automatically handles all compatibility issues. Perfect for the Lovable stack (Vite + React + TypeScript + shadcn-ui + Tailwind CSS).
``bashInstall
npm install -g vibe-seo
That's it! Your SEO files work perfectly out of the box. No manual configuration needed.
β¨ What's New in v0.6.4
$3
- Vite Configuration: Automatically updates your vite.config.ts for static file handling
- Vite SEO Plugin: Creates a custom plugin for proper static file serving with correct MIME types
- Server Configuration: Creates vercel.json and netlify.toml with proper MIME types
- File Management: Copies generated files to the public/ directory$3
- β
Vite - Automatic config updates
- β
React - Automatic App.tsx modifications
- β
TypeScript - Proper type handling
- β
shadcn-ui - No conflicts
- β
Tailwind CSS - No interference$3
Optimized for modern AI crawlers:
- GPTBot (OpenAI)
- ClaudeBot (Anthropic)
- PerplexityBot (Perplexity)
- Meta-ExternalAgent (Meta AI)
- Applebot (Apple Intelligence)
- Plus traditional search enginesπ Quick Start
$3
`bash
npm install -g vibe-seo
`$3
`bash
cd your-lovable-project
npx vibe-seo-init
`What this does:
- Detects your framework automatically
- Creates
./seo/config/seo.config.yaml
- Sets up template files
- Configures framework-specific paths$3
Edit ./seo/config/seo.config.yaml:`yaml
site:
url: "https://yourdomain.com"
name: "Your Company Name"
description: "Your compelling site description"
`$3
`bash
npx vibe-seo-gen all
`This single command:
- β
Generates all SEO files (sitemap, robots, meta tags, JSON-LD)
- β
Automatically fixes your Vite config for static file handling
- β
Automatically updates your App.tsx to handle static file requests
- β
Creates server configs for proper MIME types
- β
Copies files to public directory for immediate access
- β
Makes everything work without manual configuration
$3
- http://localhost:5173/robots.txt β
Works
- http://localhost:5173/sitemap.xml β
Works
- No 404 errors β
- No download issues β
π Generated Files
$3
- public/sitemap.xml - XML sitemap for search engines
- public/robots.txt - Instructions for web crawlers
- seo/output/meta-tags/ - HTML meta tag files for each page
- seo/output/jsonld/ - Structured data for rich snippets$3
- vite.config.ts - Updated with SEO static file handling
- src/App.tsx - Modified with static file request handling
- vercel.json - Created with proper MIME type headers
- netlify.toml - Created with proper MIME type headersπ― Framework Support
$3
`bash
Automatically detected and fixed
npx vibe-seo-gen all
`$3
`bash
App Router & Pages Router
npx vibe-seo-gen all
`$3
- React (Create React App)
- Vue.js
- Angular
- Static HTMLπ Commands Reference
$3
Initialize vibe-seo in your project.`bash
npx vibe-seo-init [options]
`Options:
-
-f, --framework - Force specific framework
- -d, --dir - Custom output directory (default: ./seo)
- --force - Overwrite existing configurationExamples:
`bash
Auto-detect framework (recommended)
npx vibe-seo-initForce Next.js App Router
npx vibe-seo-init --framework nextjs-appCustom directory
npx vibe-seo-init --dir ./custom-seoOverwrite existing config
npx vibe-seo-init --force
`$3
Generate SEO files from your configuration.#### Generate All Files (Recommended)
`bash
npx vibe-seo-gen all [options]
`#### Generate Specific Files
`bash
npx vibe-seo-gen sitemap # Only sitemap.xml
npx vibe-seo-gen robots # Only robots.txt
npx vibe-seo-gen meta # Only meta tags
npx vibe-seo-gen scan # Preview detected pages
`Options:
-
-c, --config - Custom config file path
- -o, --output - Custom output directory
- --debug - Enable detailed loggingExamples:
`bash
Generate with debug info
npx vibe-seo-gen all --debugCustom config location
npx vibe-seo-gen all -c ./config/seo.yamlPreview pages without generating
npx vibe-seo-gen scan
`βοΈ Configuration Guide
$3
`yaml
Framework (auto-detected)
framework: reactSite Information
site:
url: "https://yourdomain.com"
name: "Your Company Name"
description: "Your compelling site description"
logo: "/assets/logo.png"
language: "en"
locale: "en_US"
author: "Your Name"
favicon: "/favicon.ico"Multilingual Configuration
languages:
default: "en"
supported:
- code: "en"
locale: "en_US"
name: "English"
url: "https://yourdomain.com"
- code: "es"
locale: "es_ES"
name: "EspaΓ±ol"
url: "https://yourdomain.com/es"AI-Friendly Bot Configuration
bots:
allow:
- "Googlebot"
- "Bingbot"
- "GPTBot"
- "PerplexityBot"
- "ClaudeBot"
- "Meta-ExternalAgent"
- "Applebot"
- "YouBot"
- "DuckDuckBot"
disallow: []
crawlDelay: 1SEO Templates
seo:
titleTemplate: "{title} | {siteName}"
descriptionTemplate: "{description}"
imageTemplate: "{siteUrl}/og-images/{slug}.png"
twitterCard: "summary_large_image"
ogType: "website"
defaultKeywords: "keyword1, keyword2, keyword3"Sitemap Configuration
sitemap:
changefreq: "weekly"
priority: 0.8
excludePaths:
- "/admin/*"
- "/api/*"
- "/_next/*"
- "/private/*"Search Engine Verification
verification:
google: "your-verification-token"
bing: "your-bing-token"
yandex: "your-yandex-token"
pinterest: "your-pinterest-token"Framework-Specific Paths
paths:
srcDir: "./src"
publicDir: "./public"
buildDir: "./dist"
outputDir: "./public"
`π§ Automatic Fixes Applied
$3
When you run
npx vibe-seo-gen all, the tool automatically:#### 1. Updates Vite Configuration
`typescript
// Automatically added to your vite.config.ts
build: {
rollupOptions: {
output: {
assetFileNames: (assetInfo) => {
if (assetInfo.name === 'robots.txt' || assetInfo.name === 'sitemap.xml') {
return '[name][extname]';
}
return 'assets/[name]-[hash][extname]';
}
}
}
},
assetsInclude: ['/.txt', '/.xml']
`#### 2. Creates Vite SEO Plugin
`javascript
// Automatically created vite-seo-plugin.js
export default function seoPlugin() {
return {
name: 'vite-seo-plugin',
configureServer(server) {
server.middlewares.use((req, res, next) => {
if (req.url === '/robots.txt' || req.url === '/sitemap.xml') {
// Set proper MIME types and serve files
const content = readFileSync(filePath, 'utf8');
res.setHeader('Content-Type', req.url === '/robots.txt' ? 'text/plain' : 'application/xml');
res.writeHead(200);
res.end(content);
return;
}
next();
});
}
};
}
`#### 3. Creates Server Configuration
`json
// Automatically created vercel.json
{
"headers": [
{
"source": "/robots.txt",
"headers": [{"key": "Content-Type", "value": "text/plain"}]
},
{
"source": "/sitemap.xml",
"headers": [{"key": "Content-Type", "value": "application/xml"}]
}
]
}
`#### 4. Copies Files to Public Directory
-
sitemap.xml β public/sitemap.xml
- robots.txt β public/robots.txtπ Multilingual SEO
$3
`yaml
languages:
default: "en"
supported:
- code: "en"
locale: "en_US"
name: "English"
url: "https://yourdomain.com"
- code: "es"
locale: "es_ES"
name: "EspaΓ±ol"
url: "https://yourdomain.com/es"
- code: "de"
locale: "de_DE"
name: "Deutsch"
url: "https://yourdomain.de"
`$3
In Meta Tags:
`html
`In Sitemap:
`xml
https://yourdomain.com/about
`π Generated Files Examples
$3
`xml
xmlns:xhtml="http://www.w3.org/1999/xhtml">
https://yourdomain.com/
2024-01-01T00:00:00.000Z
weekly
0.8
`$3
`txt
Robots.txt for Your Company Name
Generated by vibe-seo
User-agent: *
Allow: /
AI-friendly crawlers
User-agent: GPTBot
Allow: /User-agent: ClaudeBot
Allow: /
Sitemap location
Sitemap: https://yourdomain.com/sitemap.xml
`$3
`html
Home | Your Company Name
`π§ Smart Content Generation
$3
Vibe SEO automatically converts URLs to readable titles:
| URL | Generated Title |
|-----|----------------|
|
/ | Home | Your Company |
| /about | About | Your Company |
| /about-us | About Us | Your Company |
| /contact-info | Contact Info | Your Company |
| /services/web-design | Services - Web Design | Your Company |$3
With site description configured:
- Homepage: Uses your site description directly
- Other pages:
{Page Title} - {Your site description}Without site description:
- Homepage:
Welcome to {Your Company}
- Other pages: {Page Title} | {Your Company}π Deployment & Integration
$3
`bash
npx vibe-seo-gen all
Files automatically copied to public/ directory
All compatibility fixes applied automatically
`$3
`bash
npx vibe-seo-gen all
Files automatically copied to public/ directory
`$3
1. Generate files:
npx vibe-seo-gen all
2. Verify accessibility:
`bash
curl https://yourdomain.com/robots.txt
curl https://yourdomain.com/sitemap.xml
`
3. Test verification: Check Google Search Console
4. Validate hreflang: Use Google's URL Inspection tool$3
Vercel: Files served automatically from
public/ β
Netlify: Configure publish directory to include generated files β
AWS/Cloudfront: Ensure static file serving is configured β
Docker: Include COPY public/ /app/public/ in Dockerfile β
π Troubleshooting
$3
#### "No Pages Detected"
`bash
npx vibe-seo-gen scan --debug
`Solutions:
1. Run
npx vibe-seo-init --force to re-detect framework
2. Check that your pages are in expected directories
3. Manually specify framework: --framework react#### "Missing required config field"
`
Error: Missing required config field: site.name
`Solution:
Ensure your config file has all required fields:
`yaml
site:
url: "https://yourdomain.com" # Required
name: "Your Company" # Required
`#### Generated Files Not Loading
1. Check file permissions: Ensure files are readable
2. Verify hosting config: Confirm static files are served
3. Clear cache: CDN and browser caches
4. Test URLs directly:
`bash
curl -I https://yourdomain.com/robots.txt
curl -I https://yourdomain.com/sitemap.xml
`#### Google Search Console Verification Fails
1. Check meta tag placement: Must be in
section
2. Verify token accuracy: Copy exact content value
3. Test accessibility: Ensure homepage is publicly accessible
4. Wait for propagation: Changes may take time to take effect$3
Enable comprehensive logging:
`bash
npx vibe-seo-gen all --debug
`Debug output shows:
- Config validation results
- Framework detection details
- Page scanning progress
- Generated content preview
- File creation confirmation
- Automatic fixes applied
$3
Common Debug Commands:
`bash
Check detected pages
npx vibe-seo-gen scanValidate config
npx vibe-seo-gen robots --debugTest framework detection
npx vibe-seo-init --force
`π Advanced Usage
$3
Override defaults for specific pages:
`yaml
pages:
"/":
title: "Welcome to Our Site"
description: "Custom homepage description"
priority: 1.0
"/about":
title: "About Our Company"
changefreq: "monthly"
`$3
For large sites:
`yaml
additionalSitemaps:
- "https://yourdomain.com/blog-sitemap.xml"
- "https://yourdomain.com/products-sitemap.xml"
`$3
`bash
Development
npx vibe-seo-gen all -c ./config/dev.seo.yamlStaging
npx vibe-seo-gen all -c ./config/staging.seo.yamlProduction
npx vibe-seo-gen all -c ./config/prod.seo.yaml
`$3
`javascript
const { loadConfig, generateAll, scanPages } = require('vibe-seo');async function generateSEO() {
const config = await loadConfig('./seo.config.yaml');
const pages = await scanPages(config);
const results = await generateAll(pages, config, './output');
console.log('Fixes applied:', results.fixes);
}
`π Version History
$3
- β
Enhanced Next.js App Router detection and guidance
- β
Automatic layout template generation for App Router
- β
Prevents metadata export issues in client components
- β
Comprehensive App Router troubleshooting and best practices$3
- β
Enhanced config data usage throughout
- β
Intelligent title and description generation
- β
Comprehensive validation and error messages
- β
Detailed debugging output$3
- β
Enhanced Vite React support and improved page detection
- β
Better handling of TypeScript files
- β
Improved framework detection for Vite projects$3
- β
Enhanced config data usage throughout
- β
Intelligent title and description generation
- β
Comprehensive validation and error messages
- β
Detailed debugging output$3
- β
Multilingual hreflang support
- β
Google Search Console integration
- β
Enhanced meta tag templates
- β
Sitemap internationalization
- β
Open Graph localizationπ― Best Practices
$3
1. Use descriptive URLs:
/about-us vs /page1
2. Configure site description: Used as fallback for all pages
3. Set up verification: Enable Search Console monitoring
4. Implement hreflang: For international audiences
5. Regular regeneration: After adding new pages$3
1. Generate on build: Include in CI/CD pipeline
2. Cache generated files: Don't regenerate on every request
3. Optimize images: Use efficient Open Graph image formats
4. Monitor file sizes: Large sitemaps should be split
$3
1. Update after changes: Run generation after config updates
2. Monitor Search Console: Check for crawl errors
3. Validate periodically: Ensure files remain accessible
4. Version control configs: Track SEO configuration changes
π€ Contributing
Vibe SEO is open source and welcomes contributions. Visit our GitHub repository for:
- π Bug reports
- π‘ Feature requests
- π§ Pull requests
- π Documentation improvements
π License
MIT License - Free for commercial and personal use.
---
π Ready to Optimize Your SEO?
For Lovable Stack (Vite + React + TypeScript + shadcn-ui + Tailwind CSS):
`bash
Install
npm install -g vibe-seoInitialize
npx vibe-seo-initGenerate all SEO files with automatic fixes
npx vibe-seo-gen all
``That's it! Your SEO files work perfectly out of the box. No manual configuration needed. π
---
Perfect for: Lovable, Vite React, Next.js, and all modern web frameworks.
Built for: AI-friendly SEO that works with modern crawlers and traditional search engines.