<zhead>
HTML tag collections

Social Preview

Open Graph and legacy Twitter Card fields used to build link previews.

Start with Open Graph title, description, URL, type, and an image with dimensions and alt text. Add Twitter Card fields only when X needs a value that differs from the Open Graph fallback.

Get started

<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Freshwater Fishing: A Beginner’s Guide">
<meta property="og:description" content="A practical guide to choosing and caring for indoor plants in low-light rooms.">
<meta property="og:type" content="article">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="ExampleCorp">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="600">
<meta property="og:image:alt" content="Team collaborating on a web development project">
<meta name="twitter:image" content="https://example.com/path/to/image.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@contentcreator">
<meta name="twitter:site" content="@exampleUser">
<meta name="twitter:label1" content="Author">
<meta name="twitter:data1" content="42K Tweets">
<meta name="twitter:label2" content="Location">
<meta name="twitter:data2" content="30 mins">
useHead({
  meta: [
    {
      property: 'og:url',
      content: 'https://example.com/page.html'
    },
    {
      property: 'og:title',
      content: 'Freshwater Fishing: A Beginner’s Guide'
    },
    {
      property: 'og:description',
      content: 'A practical guide to choosing and caring for indoor plants in low-light rooms.'
    },
    {
      property: 'og:type',
      content: 'article'
    },
    {
      property: 'og:locale',
      content: 'en_US'
    },
    {
      property: 'og:site_name',
      content: 'ExampleCorp'
    },
    {
      property: 'og:image',
      content: 'https://example.com/cover.jpg'
    },
    {
      property: 'og:image:width',
      content: '1200'
    },
    {
      property: 'og:image:height',
      content: '600'
    },
    {
      property: 'og:image:alt',
      content: 'Team collaborating on a web development project'
    },
    {
      name: 'twitter:image',
      content: 'https://example.com/path/to/image.jpg'
    },
    {
      name: 'twitter:card',
      content: 'summary_large_image'
    },
    {
      name: 'twitter:creator',
      content: '@contentcreator'
    },
    {
      name: 'twitter:site',
      content: '@exampleUser'
    },
    {
      name: 'twitter:label1',
      content: 'Author'
    },
    {
      name: 'twitter:data1',
      content: '42K Tweets'
    },
    {
      name: 'twitter:label2',
      content: 'Location'
    },
    {
      name: 'twitter:data2',
      content: '30 mins'
    }
  ]
})

Explanation

og:url

property

Provides the canonical URL used as the object’s permanent identifier. It is one of the four required basic properties.

<meta property="og:url" content="https://example.com/page.html">
An absolute, canonical page URL.

og:title

property

Provides the title of the Open Graph object. It is one of the four required basic properties.

<meta property="og:title" content="Freshwater Fishing: A Beginner’s Guide">
Names the topic and intended reader.

og:description

property

Provides a one or two sentence description of the Open Graph object.

<meta property="og:description" content="A practical guide to choosing and caring for indoor plants in low-light rooms.">
Explains the subject in one specific sentence.

og:type

property

Sets the Open Graph object type. It is one of the four required basic properties, and some types require extra metadata.

<meta property="og:type" content="article">
The defined type for an article page.

og:locale

property

Sets the locale of the Open Graph metadata in language_TERRITORY form. The default is en_US.

<meta property="og:locale" content="en_US">
English as used in the United States.

og:site_name

property

Provides the name of the larger website that contains this object, such as IMDb.

<meta property="og:site_name" content="ExampleCorp">
A concise name for the overall website.

og:image

property

Provides the URL of an image that represents the Open Graph object. It is one of the four required basic properties.

<meta property="og:image" content="https://example.com/cover.jpg">
An absolute URL to a representative image.

og:image:width

property

Provides the width, in pixels, of the preceding og:image resource.

<meta property="og:image:width" content="1200">
Declares an image that is 1200 pixels wide.

og:image:height

property

Provides the height, in pixels, of the preceding og:image resource.

<meta property="og:image:height" content="600">
Declares an image that is 600 pixels high.

og:image:alt

property

Describes what appears in the preceding og:image. It is a description, not a caption.

<meta property="og:image:alt" content="Team collaborating on a web development project">
States the visible subject and action.

twitter:image

name

Provides the image URL used in an X Card link preview. The metadata name retains the twitter: prefix.

<meta name="twitter:image" content="https://example.com/path/to/image.jpg">
An absolute URL to a public image.

twitter:card

name

Selects the X Card format for a page. The metadata still uses the twitter: prefix.

<meta name="twitter:card" content="summary_large_image">
A defined card type for a preview with a large image.

twitter:creator

name

Attributes the page’s content to an X account using its @handle. The metadata name retains the twitter: prefix.

<meta name="twitter:creator" content="@contentcreator">
A creator handle with the required @ prefix.

twitter:site

name

Attributes the website or publication to an X account using its @handle. The metadata name retains the twitter: prefix.

<meta name="twitter:site" content="@exampleUser">
A site handle with the required @ prefix.

twitter:label1

name

Unsupported legacy Product Card field for the first custom label. X no longer supports Product Cards or publishes this field in its developer documentation.

<meta name="twitter:label1" content="Author">
A historical custom label in a field X no longer supports.

twitter:data1

name

Unsupported legacy Product Card field for the first custom value. X no longer supports Product Cards or publishes this field in its developer documentation.

<meta name="twitter:data1" content="42K Tweets">
A historical custom value in a field X no longer supports.

twitter:label2

name

Unsupported legacy Product Card field for the second custom label. X no longer supports Product Cards or publishes this field in its developer documentation.

<meta name="twitter:label2" content="Location">
A historical custom label in a field X no longer supports.

twitter:data2

name

Unsupported legacy Product Card field for the second custom value. X no longer supports Product Cards or publishes this field in its developer documentation.

<meta name="twitter:data2" content="30 mins">
A historical custom value in a field X no longer supports.

More collections

Start with the closest collection, then trim it to match your page.

Essentials

SEO Starter

Icons & Colors

PWA

Article