Meta Tag Generator - Generate useSeoMeta Code · Unhead
[Unhead Home](https://unhead.unjs.io/ "Home")
- [Docs](https://unhead.unjs.io/docs/typescript/head/guides/get-started/overview)
- [Tools](https://unhead.unjs.io/tools)
- [Learn](https://unhead.unjs.io/learn/guides/what-is-capo)
[Releases](https://unhead.unjs.io/releases)
Search…```k`` /`
[Unhead on GitHub](https://github.com/unjs/unhead)
# 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
Blog Post Article with author attribution
Product Page E-commerce product listing
Landing Page Marketing or homepage
Documentation Technical documentation page
Basic
Open Graph
Article
Technical
Title28/60
Title is short (aim for 50-60 characters)
Description111/160
Learn the best practices for building modern, performant web applications with the latest frameworks and tools.
Site Name
Locale
OG Title
Leave empty to use page title
OG Description
Master modern web development with our comprehensive guide to building performant applications.
Leave empty to use page description
OG Image URL
Recommended: 1200x630px
Image Alt
Width
Height
OG Type
Article
OG URL
Article metadata helps search engines and social platforms understand your content better.
Published Date
Modified Date
Author
Author name or profile URL
Section
Category or section name
Tags
Comma-separated keywords
Author
Page author name
Canonical URL
Robots
Theme Color
Browser UI color
Color Scheme
Light & Dark
App Name
PWA application name
Facebook App ID
### 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
Twitter/X
Facebook
LinkedIn
WhatsApp
Slack
Discord
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
Summary Large Image
Twitter Image
Override OG image for Twitter (different aspect ratio)
Site @handle
Creator @handle
Generated Code
-
-
-
-
-
-
-
useSeoMeta
useHead
HTML
```
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',
})
```
Reset All
## 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
[Installation Guide ](https://unhead.unjs.io/docs/typescript/head/guides/get-started/installation) [useSeoMeta API ](https://unhead.unjs.io/docs/head/api/composables/use-seo-meta) [useHead API ](https://unhead.unjs.io/docs/head/api/composables/use-head)
### Discover More Tools
[OG Image Generator
Design and generate beautiful Open Graph images for your website. OG Image Generator](https://unhead.unjs.io/tools/og-image-generator) [Schema.org Generator
Build structured data for articles, products, and more. Schema.org Generator](https://unhead.unjs.io/tools/schema-generator) [Capo.js Head Analyzer
Analyze your HTML head tag order for optimal page load performance. Capo.js Head Analyzer](https://unhead.unjs.io/tools/capo-analyzer)
Was this tool helpful?
Your feedback helps us improve
Yes
No
Anything that could be done better? :)
Submit Feedback
Skip
[GitHub](https://github.com/unjs/unhead) [ Discord](https://discord.com/invite/275MBUBvgP)
[ /llms.txt](https://unhead.unjs.io/llms.txt)
[Part of the UnJS ecosystem](https://unjs.io/)
### Head Management
- [Getting Started](https://unhead.unjs.io/docs/typescript/head/guides/get-started/overview)
- [useHead](https://unhead.unjs.io/docs/typescript/head/api/composables/use-head)
- [useSeoMeta](https://unhead.unjs.io/docs/typescript/head/api/composables/use-seo-meta)
- [useHeadSafe](https://unhead.unjs.io/docs/typescript/head/api/composables/use-head-safe)
- [useScript](https://unhead.unjs.io/docs/typescript/head/api/composables/use-script)
### Schema.org
- [Getting Started](https://unhead.unjs.io/docs/typescript/schema-org/guides/get-started/overview)
- [useSchemaOrg](https://unhead.unjs.io/docs/typescript/schema-org/api/composables/use-schema-org)
- [Nodes](https://unhead.unjs.io/docs/typescript/schema-org/guides/core-concepts/nodes)
- [Recipes](https://unhead.unjs.io/docs/typescript/schema-org/guides/recipes/identity)
### Guides
- [Titles](https://unhead.unjs.io/docs/typescript/head/guides/core-concepts/titles)
- [Streaming SSR](https://unhead.unjs.io/docs/typescript/head/guides/core-concepts/streaming)
- [DOM Events](https://unhead.unjs.io/docs/typescript/head/guides/core-concepts/dom-event-handling)
- [Plugins](https://unhead.unjs.io/docs/typescript/head/guides/plugins/template-params)
### Tools
- [Meta Tag Generator](https://unhead.unjs.io/tools/meta-tag-generator)
- [OG Image Generator](https://unhead.unjs.io/tools/og-image-generator)
- [Schema.org Generator](https://unhead.unjs.io/tools/schema-generator)
- [Capo.js Analyzer](https://unhead.unjs.io/tools/capo-analyzer)
### Articles
- [What is Capo.js?](https://unhead.unjs.io/learn/guides/what-is-capo)
### Research
- [State of in 2026](https://unhead.unjs.io/learn/research/state-of-head-2026)
- [Streaming Head Performance](https://unhead.unjs.io/learn/research/streaming-head-performance)
- [Capo.js Performance Research](https://unhead.unjs.io/learn/research/capo-performance-research)
Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)