HTML tag collections

Article

Page, Open Graph, and social preview metadata for an article.

Describe the page first, then add Open Graph article fields for publication dates, authors, section, and tags. These fields shape compatible link previews; they do not guarantee search visibility.

Get started

<title>Freshwater Fishing Guide | River Notes</title>
<meta name="description" content="Bake 12 vanilla cupcakes in 35 minutes. Includes metric measurements, storage notes, and fixes for cakes that sink.">
<meta property="og:type" content="article">
<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:url" content="https://example.com/page.html">
<meta property="og:site_name" content="ExampleCorp">
<meta property="og:locale" content="en_US">
<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 property="article:published_time" content="2026-04-01T12:00:00Z">
<meta property="article:modified_time" content="2026-05-10T14:45:00Z">
<meta property="article:author" content="https://example.com/authors/john-doe">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@contentcreator">
<meta name="twitter:site" content="@exampleUser">
<meta name="twitter:image" content="https://example.com/path/to/image.jpg">
<meta name="twitter:image:alt" content="A scenic lake with a mountain in the background">
<meta name="twitter:title" content="Learn Web Development Basics">
<meta name="twitter:description" content="A practical guide to choosing and caring for indoor plants in low-light rooms.">
<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({
  title: 'Freshwater Fishing Guide | River Notes',
  meta: [
    {
      name: 'description',
      content: 'Bake 12 vanilla cupcakes in 35 minutes. Includes metric measurements, storage notes, and fixes for cakes that sink.'
    },
    {
      property: 'og:type',
      content: 'article'
    },
    {
      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:url',
      content: 'https://example.com/page.html'
    },
    {
      property: 'og:site_name',
      content: 'ExampleCorp'
    },
    {
      property: 'og:locale',
      content: 'en_US'
    },
    {
      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'
    },
    {
      property: 'article:published_time',
      content: '2026-04-01T12:00:00Z'
    },
    {
      property: 'article:modified_time',
      content: '2026-05-10T14:45:00Z'
    },
    {
      property: 'article:author',
      content: 'https://example.com/authors/john-doe'
    },
    {
      property: 'article:section',
      content: 'Technology'
    },
    {
      property: 'article:tag',
      content: 'JavaScript'
    },
    {
      name: 'twitter:card',
      content: 'summary_large_image'
    },
    {
      name: 'twitter:creator',
      content: '@contentcreator'
    },
    {
      name: 'twitter:site',
      content: '@exampleUser'
    },
    {
      name: 'twitter:image',
      content: 'https://example.com/path/to/image.jpg'
    },
    {
      name: 'twitter:image:alt',
      content: 'A scenic lake with a mountain in the background'
    },
    {
      name: 'twitter:title',
      content: 'Learn Web Development Basics'
    },
    {
      name: 'twitter:description',
      content: 'A practical guide to choosing and caring for indoor plants in low-light rooms.'
    },
    {
      name: 'twitter:label1',
      content: 'Author'
    },
    {
      name: 'twitter:data1',
      content: '42K Tweets'
    },
    {
      name: 'twitter:label2',
      content: 'Location'
    },
    {
      name: 'twitter:data2',
      content: '30 mins'
    }
  ]
})

Explanation

title

Names the document in browser tabs, history, bookmarks, and often search results. The element accepts text only.

<title>Freshwater Fishing Guide | River Notes</title>
Uses a specific topic and a short site name.

Summarizes the page for directories and search engines. Google may use it as a search result snippet when it describes the page better than the visible content does.

<meta name="description" content="Bake 12 vanilla cupcakes in 35 minutes. Includes metric measurements, storage notes, and fixes for cakes that sink.">
Specific details tell the reader what the recipe covers.

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: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.

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: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: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: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: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.

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.

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.

Records when an article was first published. Use it with og:type set to article.

<meta property="article:published_time" content="2026-04-01T12:00:00Z">
A publication time expressed in UTC.

Records when an article was last changed. Open Graph defines the value as an ISO 8601 datetime.

<meta property="article:modified_time" content="2026-05-10T14:45:00Z">
A complete UTC timestamp that parsers can read consistently.

Links an article to one or more author profiles. The value is a URL, and you can repeat the property for multiple authors.

<meta property="article:author" content="https://example.com/authors/john-doe">
Points to John Doe’s profile page.

Names the high-level section that contains an article, such as Technology or Culture.

<meta property="article:section" content="Technology">
A clear section name used across a publication.

article:tag

property

Adds a tag word or phrase associated with an article. Repeat the property to provide more than one tag.

<meta property="article:tag" content="JavaScript">
A specific topic assigned to the article.

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.

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.

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.

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.

Describes the image in twitter:image for people who cannot see it. The metadata name retains the twitter: prefix.

<meta name="twitter:image:alt" content="A scenic lake with a mountain in the background">
Names the main subjects and setting.

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

<meta name="twitter:title" content="Learn Web Development Basics">
Names the topic of the page directly.

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

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

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.

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.

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.

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.