https://github.com/erolleddev/seo
https://github.com/erolleddev/seo
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/erolleddev/seo
- Owner: ErolledDev
- Created: 2025-06-10T09:35:42.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-10T15:09:26.000Z (about 1 year ago)
- Last Synced: 2025-06-10T15:19:16.889Z (about 1 year ago)
- Language: TypeScript
- Size: 144 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dynamic SEO Meta Tag Redirection System
A powerful Next.js application that creates unique, indexable landing pages with dynamic meta tags for optimal SEO performance. Perfect for creating SEO-optimized redirect pages that search engines love and users trust.
## 🚀 Features
### Core Functionality
- **Dynamic Meta Tag Generation**: Automatically generates unique meta tags, Open Graph data, and Twitter Cards based on URL parameters
- **Server-Side Rendering**: Ensures search engines can properly index each unique parameterized URL
- **SEO Optimization**: Self-referencing canonical tags, structured data, and proper HTML semantics
- **Smart Redirects**: User-friendly redirect pages with countdown timers and preview options
### Management Interface
- **Admin Dashboard**: Intuitive interface for creating and managing redirect configurations
- **Real-time Preview**: Preview redirect pages before publishing
- **Bulk Operations**: Efficiently manage multiple redirects
- **URL Generation**: Automatic generation of SEO-optimized URLs
### SEO & Analytics
- **XML Sitemap Generation**: Automatically generates and updates XML sitemaps
- **Search Engine Ready**: Optimized for Google, Bing, and other search engines
- **Analytics Integration**: Built-in tracking capabilities and performance monitoring
- **Mobile Responsive**: Optimized for all devices and screen sizes
## 🛠️ Technology Stack
- **Framework**: Next.js 13+ with App Router
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui + Radix UI
- **Icons**: Lucide React
- **Deployment**: Vercel/Netlify ready
## 📋 How It Works
1. **Create Redirect**: Use the admin panel to create new redirect configurations with custom meta tags
2. **Generate URL**: System generates unique URLs with dynamic parameters for each redirect page
3. **SEO Benefits**: Search engines index each unique URL with its custom meta tags and content
## 🔧 Installation & Setup
1. **Clone the repository**
```bash
git clone
cd seo-redirect-system
```
2. **Install dependencies**
```bash
npm install
```
3. **Set up environment variables**
```bash
cp .env.example .env.local
```
Update the following variables:
```
NEXT_PUBLIC_BASE_URL=http://localhost:3000
```
4. **Run the development server**
```bash
npm run dev
```
5. **Open your browser**
Navigate to `http://localhost:3000`
## 📊 Usage Examples
### Basic Redirect URL Structure
```
https://yourdomain.com/u?title=Your%20Page%20Title&desc=Your%20description&image=https://example.com/image.jpg&url=https://target-site.com
```
### Example URLs
- **Product Page**: `/u?title=Premium%20Leather%20Wallet&desc=Handcrafted%20wallet&image=https://example.com/wallet.jpg&url=https://shop.com/wallet`
- **Service Page**: `/u?title=Web%20Design%20Services&desc=Professional%20web%20design&image=https://example.com/design.jpg&url=https://agency.com/services`
- **Article Page**: `/u?title=SEO%20Tips%20Guide&desc=Complete%20SEO%20guide&image=https://example.com/seo.jpg&url=https://blog.com/seo-tips`
## 🎯 URL Parameters
| Parameter | Required | Description |
|-----------|----------|-------------|
| `title` | Yes | Page title and og:title |
| `desc` | Yes | Meta description and og:description |
| `url` | Yes | Target URL for redirection |
| `image` | No | Image URL for og:image and twitter:image |
| `keywords` | No | Meta keywords |
| `site_name` | No | og:site_name |
| `type` | No | og:type (website, article, product, etc.) |
## 🔍 SEO Best Practices
### Meta Tags Generated
- `` - Dynamic page title
- `` - Dynamic description
- `` - Dynamic keywords
- `` - Self-referencing canonical URL
- Open Graph tags for social sharing
- Twitter Card tags for Twitter sharing
- Structured data markup
### Search Engine Optimization
- **Server-Side Rendering**: All meta tags are generated server-side
- **Unique URLs**: Each parameter combination creates a unique, indexable page
- **XML Sitemap**: Automatically generated and updated
- **Canonical URLs**: Proper canonical tag implementation
- **Mobile Responsive**: Optimized for all devices
## 📁 Project Structure
```
├── app/
│ ├── admin/ # Admin dashboard
│ ├── api/
│ │ └── sitemap.xml/ # Dynamic sitemap generation
│ ├── u/ # Dynamic redirect pages
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Homepage
├── components/
│ ├── ui/ # UI components (shadcn/ui)
│ └── RedirectPage.tsx # Redirect page component
├── lib/
│ ├── redirects.ts # Redirect management logic
│ └── utils.ts # Utility functions
└── README.md
```
## 🚀 Deployment
### Vercel (Recommended)
1. Connect your repository to Vercel
2. Set environment variables:
```
NEXT_PUBLIC_BASE_URL=https://yourdomain.com
```
3. Deploy automatically on push to main branch
### Netlify
1. Build command: `npm run build`
2. Publish directory: `out`
3. Set environment variables in Netlify dashboard
### Custom Server
1. Build the application: `npm run build`
2. Serve the static files from the `out` directory
## 📈 Analytics & Monitoring
### XML Sitemap
- Automatically generated at `/api/sitemap.xml`
- Includes all redirect URLs
- Updates automatically when redirects are added/modified
- Submit to Google Search Console and Bing Webmaster Tools
### Search Console Integration
1. Add your domain to Google Search Console
2. Submit the sitemap: `https://yourdomain.com/api/sitemap.xml`
3. Monitor indexing status and performance
### Tracking Setup
- Add Google Analytics tracking code to `app/layout.tsx`
- Implement custom events for redirect clicks
- Monitor redirect performance and user behavior
## 🔧 Customization
### Adding Custom Fields
1. Update the `RedirectConfig` interface in `lib/redirects.ts`
2. Add form fields in the admin panel
3. Update the meta tag generation logic
### Styling
- Customize colors in `tailwind.config.ts`
- Modify component styles in `app/globals.css`
- Update UI components in `components/ui/`
### Database Integration
Replace the in-memory storage in `lib/redirects.ts` with your preferred database:
- PostgreSQL with Prisma
- MongoDB with Mongoose
- Supabase
- Firebase Firestore
## 🐛 Troubleshooting
### Common Issues
**Redirects not working**
- Check that the target URL is valid and accessible
- Verify the redirect configuration is saved correctly
**Meta tags not appearing**
- Ensure server-side rendering is working
- Check the browser's view source to see generated HTML
**Sitemap not updating**
- Clear browser cache
- Verify the redirect data is being saved correctly
**Build errors**
- Check TypeScript types
- Ensure all dependencies are installed
- Verify Next.js configuration
## 📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
## 🤝 Contributing
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request
## 📞 Support
For support and questions:
- Open an issue on GitHub
- Check the documentation
- Review the troubleshooting section
---
Built with ❤️ using Next.js, TypeScript, and Tailwind CSS