Infer SEO Meta
Quick Answer: The Infer SEO Meta plugin automatically generates og:title, og:description, and twitter:card from your existing title and description tags, reducing duplicate meta tag definitions.
What Does This Plugin Do?
The Infer SEO Meta plugin automatically generates Open Graph and Twitter meta tags from your existing content:
og:title- Inferred from your page titleog:description- Inferred from your description metatwitter:card- Set automatically when usingog:image
Use this plugin when you want to avoid duplicating your page title and description across Open Graph and Twitter meta tags. It's ideal for sites that need consistent social sharing metadata without manual repetition.
How Does the Output Look?
useHead({
title: 'My Page Title',
meta: [
{ name: 'description', content: 'A description of my page' }
]
})
<title>My Page Title</title>
<meta name="description" content="A description of my page">
<meta property="og:title" content="My Page Title">
<meta property="og:description" content="A description of my page">
How Do I Set Up the Plugin?
Add the plugin to your Unhead configuration:
import { InferSeoMetaPlugin } from 'unhead/plugins'
const head = createHead({
plugins: [
InferSeoMetaPlugin()
]
})
// or
head.use(InferSeoMetaPlugin())
What Options Can I Configure?
You can customize how the plugin transforms your content:
export interface InferSeoMetaPluginOptions {
/**
* Transform the og title.
*
* @param title
*/
ogTitle?: ((title: string) => string)
/**
* Transform the og description.
*
* @param description
*/
ogDescription?: ((description: string) => string)
/**
* The twitter card to use.
*
* @default 'summary_large_image'
*/
twitterCard?: false | 'summary' | 'summary_large_image' | 'app' | 'player'
}
How Do I Customize the OG Title?
Remove site name suffix from Open Graph titles:
import { InferSeoMetaPlugin } from 'unhead/plugins'
const head = createHead({
plugins: [
InferSeoMetaPlugin({
ogTitle: title => title.replace('- My Site', '')
})
]
})
How Do I Disable Twitter Cards?
If you don't want Twitter cards generated:
InferSeoMetaPlugin({
twitterCard: false
})
How Do I Format OG Descriptions?
Append a call-to-action to your Open Graph descriptions:
InferSeoMetaPlugin({
ogDescription: description => `${description} Learn more now!`
})
Related
- useSeoMeta() - Manual SEO meta management
- Template Params - Dynamic template parameters