Modern, framework-agnostic meta tag boilerplates for SEO and social media optimization. Ready-to-use configurations for HTML, Next.js, and Vite projects.
- Multiple Frameworks: HTML, Next.js (App Router), and Vite (React/Vue)
- SEO Optimized: Complete meta tags for search engines
- Social Media Ready: Open Graph and Twitter Card support
- Copy-Paste Ready: Easy to integrate into your projects
- TypeScript Support: Fully typed for Next.js and Vite
- Modern Best Practices: Updated for 2024+ standards
- Schema.org Structured Data: JSON-LD support for rich results
- Dark Mode Support: Theme color configuration for light/dark modes
Choose your framework:
Traditional HTML setup for static websites or any web project.
- Static meta tags
- Comprehensive head setup
- Works with any backend or static site generator
Modern setup using Next.js 13+ App Router Metadata API.
- Type-safe metadata configuration
- Static and dynamic metadata support
- Built-in SEO
Setup for Vite projects (React, Vue, and other frameworks).
- Static and dynamic meta tags
- React and Vue components included
- Environment variable support
- Choose your framework from the options above
- Navigate to the framework folder
- Follow the README in that folder for detailed instructions
- Copy the boilerplate into your project
- Replace placeholders with your actual values
This repository ships an installable agent skill (seo-meta-tags) that teaches AI coding assistants the project's metadata conventions, placeholder tokens, quality checklist, and per-framework rules.
Install via skills.sh:
npx skills add jeremy0x/meta-tag-boilerplate --skill seo-meta-tagsStructure:
skills/seo-meta-tags/
├── SKILL.md # Core workflow, quality gate, metadata families
└── references/
├── html.md # HTML <head> tag reference & ordering
├── nextjs.md # Next.js Metadata API & generateMetadata patterns
└── vite.md # React (react-helmet-async) & Vue (@unhead/vue) components
index.html- Complete HTML boilerplate with modern meta tagsREADME.md- Detailed documentation and best practices
metadata.ts- Complete metadata configuration for App Routerdynamic-metadata-example.tsx- Example of dynamic metadata generationREADME.md- Comprehensive guide with examples
index.html- Base HTML template with static meta tagsSEO.tsx- React component for dynamic meta tagsSEO.vue- Vue 3 component for dynamic meta tagsREADME.md- Setup guide for both React and Vue
All boilerplates include:
| Category | Meta Tags |
|---|---|
| Essential | charset, viewport, title, description, keywords |
| SEO | robots, canonical, author, keywords |
| Theme | theme-color (with dark/light mode support) |
| Open Graph | type, url, title, description, image, site_name |
| card, title, description, image, site, creator | |
| Icons | favicon, apple-touch-icon, manifest |
| Structured Data | JSON-LD schema markup |
| i18n | hreflang alternate links |
<!-- Just copy and paste into your HTML <head> -->
<title>My Awesome Website</title>
<meta name="description" content="Welcome to my website" />// app/layout.tsx or app/page.tsx
export const metadata: Metadata = {
title: 'My Awesome Website',
description: 'Welcome to my website',
// ... more configuration
}import { SEO } from './components/SEO'
function HomePage() {
return (
<>
<SEO
title="My Awesome Website"
description="Welcome to my website"
/>
<div>Content</div>
</>
)
}<template>
<SEO
title="My Awesome Website"
description="Welcome to my website"
/>
<div>Content</div>
</template>- Dimensions: 1200 x 630 pixels
- Aspect Ratio: 1.91:1
- Format: JPG or PNG
- File Size: Under 1MB
- Alt Text: Always provide descriptive alt text
Use these tools to generate favicons:
Validate your implementation with these tools:
- Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
- Twitter Card Validator: https://cards-dev.twitter.com/validator
- LinkedIn Post Inspector: https://www.linkedin.com/post-inspector/
- Schema Markup Validator: https://validator.schema.org/
- Open Graph Check: https://www.opengraph.xyz/
- Title: Keep under 60 characters to avoid truncation
- Description: 150-160 characters is optimal
- Images: Always use high-quality images (1200x630px)
- Canonical URLs: Specify to avoid duplicate content issues
- Mobile: Test on mobile devices
- Accessibility: Include alt text for all images
- Performance: Optimize images and use appropriate formats
- Choose your framework (HTML, Next.js, or Vite)
- Follow the Quick Start guide for that framework
- Update your placeholder values
- From react-helmet: Use Vite + React setup
- From vue-meta: Use Vite + Vue setup
- From next-seo: Use Next.js setup (built-in metadata API is better)
- Open Graph Protocol
- Twitter Cards Documentation
- Schema.org Documentation
- Google Search Central
- Next.js Metadata API
Contributions are welcome! If you have suggestions for improvements or find any issues:
- Fork the repository
- Create your feature branch
- Commit your changes
- Push to the branch
- Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Feel free to use and modify the code for your own projects. If you found this repository helpful, please consider giving it a star!