Plugins
Infer SEO Meta
On this page
The Infer SEO Meta plugin generates og:title, og:description, and twitter:card from your existing title and description tags.
The plugin generates these tags from existing content:
og:title: Inferred from your page titleog:description: Inferred from your description metatwitter:card:summary_large_imagewhen the resolved head has anog:imageortwitter:image, otherwisesummary. Atwitter:cardthat you set always wins.
Generated output
Input
useHead({
title: 'My Page Title',
meta: [
{ name: 'description', content: 'A description of my page' }
]
})
Output
<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">
<meta name="twitter:card" content="summary">
Setup
Add the plugin to your Unhead configuration:
Input
import { InferSeoMetaPlugin } from '@unhead/angular/plugins'
const head = createHead({
plugins: [
InferSeoMetaPlugin()
]
})
// or
head.use(InferSeoMetaPlugin())
Options
The plugin accepts transforms for the generated title and description, plus a Twitter card setting:
Input
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.
*
* By default, the card is `summary_large_image` when the resolved head has an `og:image` or `twitter:image`,
* and `summary` otherwise. A `twitter:card` set elsewhere in the head always wins.
*
* @deprecated Set this to false and rely on Open Graph metadata instead.
*/
twitterCard?: false | 'summary' | 'summary_large_image' | 'app' | 'player'
}
Customizing the Open Graph title
Remove site name suffix from Open Graph titles:
Input
import { InferSeoMetaPlugin } from '@unhead/angular/plugins'
const head = createHead({
plugins: [
InferSeoMetaPlugin({
ogTitle: (title = '') => title.replace('- My Site', '')
})
]
})
Disabling the Twitter card field
If you don't want Twitter cards generated:
Input
InferSeoMetaPlugin({
twitterCard: false
})
Formatting Open Graph descriptions
Append a call-to-action to your Open Graph descriptions:
Input
InferSeoMetaPlugin({
ogDescription: (description = '') => `${description} Read the documentation.`
})
Related
- useSeoMeta(): Manual SEO meta management
- Template Params: Dynamic template parameters
Did this page help you?