Index of every page on this site: llms.txt
Angular
Plugins

Infer SEO Meta

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 title
  • og:description: Inferred from your description meta
  • twitter:card: summary_large_image when the resolved head has an og:image or twitter:image, otherwise summary. A twitter:card that 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.`
})
Did this page help you?