Unhead
$ unhead tools

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
28/60
Title is short (aim for 50-60 characters)
111/160

Google Preview

Example Blog

https://example.com/blog/build-better-web-apps

How to Build Better Web Apps

Learn the best practices for building modern, performant web applications with the latest frameworks and tools.

Social Card Preview

How to Build Better Web Apps

Example Blog

How to Build Better Web Apps

Learn the best practices for building modern, performant web applications with the latest frameworks and tools.

Twitter/X uses Open Graph tags as fallback. Configure Twitter-specific overrides below.

Override OG image for Twitter (different aspect ratio)
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',
  ogTitle: 'How to Build Better Web Apps',
  ogDescription: 'Learn the best practices for building modern, performant web applications with the latest frameworks and tools.',
  ogImage: 'https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=1200&h=630&fit=crop',
  ogImageAlt: 'Code on a computer screen',
  ogImageWidth: 1200,
  ogImageHeight: 630,
  ogType: 'article',
  ogUrl: 'https://example.com/blog/build-better-web-apps',
  ogSiteName: 'Example Blog',
  ogLocale: 'en_US',
  articleSection: 'Technology',
  articleTag: 'javascript, web development, best practices',
  twitterCard: 'summary_large_image',
  twitterSite: '@example',
  twitterCreator: '@yourhandle',
  twitterLabel1: 'Reading time',
  twitterData1: '5 min read',
  twitterLabel2: 'Written by',
  twitterData2: 'John Doe',
  robots: 'index, follow',
})
Learn

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-safeFull TypeScript support with auto-completion
XSS-safeValues are properly escaped
SSR-readyWorks seamlessly with server-side rendering
Flat APINo 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