---
title: "Meta Tag Generator - Generate useSeoMeta Code ยท Unhead"
description: "Free meta tag generator for Vue, React, Nuxt, and more. Generate useSeoMeta() code with live SERP and social card preview."
canonical_url: "https://unhead.unjs.io/tools/meta-tag-generator"
meta:
"og:description": "Free meta tag generator for Vue, React, Nuxt, and more. Generate useSeoMeta() code with live SERP and social card preview."
"og:image": "https://unhead.unjs.io/_og/d/c_Unhead%2Ctitle_Meta%2BTag%2BGenerator%2B-%2BGenerate%2BuseSeoMeta%2BCode%2Cdescription_~RnJlZSBtZXRhIHRhZyBnZW5lcmF0b3IgZm9yIFZ1ZSwgUmVhY3QsIE51eHQsIGFuZCBtb3JlLiBHZW5lcmF0ZSB1c2VTZW9NZXRhKCkgY29kZSB3aXRoIGxpdmUgU0VSUCBhbmQgc29jaWFsIGNhcmQgcHJldmlldy4%2Cp_Ii90b29scy9tZXRhLXRhZy1nZW5lcmF0b3Ii%2Cs_98jY7DONNtEtbBeQ.png"
"og:image:height": "600"
"og:image:type": image/png
"og:image:width": "1200"
"og:title": "Meta Tag Generator - Generate useSeoMeta Code"
"twitter:image": "https://unhead.unjs.io/_og/d/c_Unhead%2Ctitle_Meta%2BTag%2BGenerator%2B-%2BGenerate%2BuseSeoMeta%2BCode%2Cdescription_~RnJlZSBtZXRhIHRhZyBnZW5lcmF0b3IgZm9yIFZ1ZSwgUmVhY3QsIE51eHQsIGFuZCBtb3JlLiBHZW5lcmF0ZSB1c2VTZW9NZXRhKCkgY29kZSB3aXRoIGxpdmUgU0VSUCBhbmQgc29jaWFsIGNhcmQgcHJldmlldy4%2Cp_Ii90b29scy9tZXRhLXRhZy1nZW5lcmF0b3Ii%2Cs_98jY7DONNtEtbBeQ.png"
---
> Index of every page on this site: [llms.txt](https://unhead.unjs.io/llms.txt)
# **Meta Tag Generator**
Generate useSeoMeta() code for Vue, React, Nuxt, and more. Preview how your page will look in search results and social shares.
**Quick Start**
**Title**28/60
Title is short (aim for 50-60 characters)
**Description**111/160
## **Google Preview **
Example Blog
https://example.com/blog/build-better-web-apps
### How to Build Better Web Apps | Example Blog
Master modern web development with our comprehensive guide to building performant applications.
## **Social Card Preview **
Example Blog
**How to Build Better Web Apps | Example Blog**
Master modern web development with our comprehensive guide to building performant applications.
Twitter/X uses Open Graph tags as fallback. Configure Twitter-specific overrides below.
**Card Type**
**Twitter Image**
Override OG image for Twitter (different aspect ratio)
**Site @handle**
**Creator @handle**
**Generated Code**
```
import { useSeoMeta } from 'unhead'
useSeoMeta({
title: 'How to Build Better Web Apps',
description: 'Learn the best practices for building modern, performant web applications with the latest frameworks and tools.',
author: 'John Doe',
colorScheme: 'light dark',
themeColor: '#1a1a2e',
ogTitle: 'How to Build Better Web Apps | Example Blog',
ogDescription: 'Master modern web development with our comprehensive guide to building performant applications.',
ogImage: 'https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=1200&h=630&fit=crop',
ogImageAlt: 'Code on a computer screen showing JavaScript',
ogImageWidth: 1200,
ogImageHeight: 630,
ogType: 'article',
ogUrl: 'https://example.com/blog/build-better-web-apps',
ogSiteName: 'Example Blog',
ogLocale: 'en_US',
articlePublishedTime: '2024-01-15T09:00:00Z',
articleModifiedTime: '2024-01-20T14:30:00Z',
articleAuthor: 'https://example.com/authors/john-doe',
articleSection: 'Technology',
articleTag: 'javascript, web development, best practices',
twitterCard: 'summary_large_image',
twitterSite: '@exampleblog',
twitterCreator: '@johndoe',
twitterImage: 'https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=1200&h=600&fit=crop',
twitterLabel1: 'Reading time',
twitterData1: '5 min read',
twitterLabel2: 'Written by',
twitterData2: 'John Doe',
robots: 'index, follow, max-image-preview:large',
})
```
## **Why Use useSeoMeta?**
The useSeoMeta composable provides a type-safe, flat API for setting meta tags. Unlike manually writing meta tags, it handles all the complexity for you.
**Type-safe**Full TypeScript support with auto-completion
**XSS-safe**Values are properly escaped
**SSR-ready**Works seamlessly with server-side rendering
**Flat API**No nested objects - just set properties directly
## **Meta Tag Best Practices**
### **Title Tag **
- Keep under 60 characters
- Front-load important keywords
- Make each page title unique
### **Description **
- Keep under 160 characters
- Include a call to action
- Match search intent
### **Open Graph **
- Use 1200x630px images
- Always set og:title and og:description
- Include og:url for canonical sharing
### **Twitter Cards **
- Use summary\_large\_image for articles
- Include @handle for attribution
- Test with Twitter Card Validator
## **Learn More**
## **Discover More Tools **
[**OG Image Generator**
Design and generate beautiful Open Graph images for your website.](https://unhead.unjs.io/tools/og-image-generator) [**Schema.org Generator**
Build structured data for articles, products, and more.](https://unhead.unjs.io/tools/schema-generator) [**Capo.js Head Analyzer**
Analyze your HTML head tag order for optimal page load performance.](https://unhead.unjs.io/tools/capo-analyzer)
**Was this tool helpful? **
Your feedback helps us improve
```json
{"@context":"https://schema.org","@graph":[{"@id":"https://unhead.unjs.io/#website","@type":"WebSite","description":"Unhead is the any-framework document head manager built for performance and delightful developer experience.","name":"Unhead","url":"https://unhead.unjs.io/","publisher":{"@id":"https://unhead.unjs.io/#identity"}},{"@id":"https://unhead.unjs.io/tools/meta-tag-generator#webpage","@type":"WebPage","description":"Free meta tag generator for Vue, React, Nuxt, and more. Generate useSeoMeta() code with live SERP and social card preview.","name":"Meta Tag Generator - Generate useSeoMeta Code","url":"https://unhead.unjs.io/tools/meta-tag-generator","isPartOf":{"@id":"https://unhead.unjs.io/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://unhead.unjs.io/tools/meta-tag-generator"]}],"primaryImageOfPage":{"@id":"https://unhead.unjs.io/#logo"}},{"@id":"https://unhead.unjs.io/#identity","@type":"Organization","name":"Unhead","url":"https://unhead.unjs.io/","logo":{"@id":"https://unhead.unjs.io/#logo"}},{"@id":"https://unhead.unjs.io/tools/meta-tag-generator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"DeveloperApplication","description":"Free meta tag generator for Vue, React, Nuxt, and more. Generate useSeoMeta() code with live SERP and social card preview.","name":"Meta Tag Generator - Generate useSeoMeta Code","operatingSystem":"Web","url":"https://unhead-unjs-io.nuxt.dev/tools/meta-tag-generator","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}},{"@id":"https://unhead.unjs.io/#logo","@type":"ImageObject","caption":"Unhead","contentUrl":"https://unhead.unjs.io/logo.svg","inLanguage":"en","url":"https://unhead.unjs.io/logo.svg"}]}
```
## Sitemap
See the full [sitemap](https://unhead.unjs.io/sitemap.md) for all pages.