---
title: "Social Preview HTML Tags · HTML Tag Collections · zhead"
canonical_url: "https://zhead.dev/collection/social-share"
last_updated: "2026-08-13T08:00:02.496Z"
meta:
  description: "Open Graph and legacy Twitter Card fields used to build link previews."
  "og:description": "Open Graph and legacy Twitter Card fields used to build link previews."
  "og:title": "Social Preview HTML Tags · HTML Tag Collections · 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">
```

## Explanation

### [og:url](https://zhead.dev/meta/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](https://zhead.dev/meta/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](https://zhead.dev/meta/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](https://zhead.dev/meta/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](https://zhead.dev/meta/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](https://zhead.dev/meta/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](https://zhead.dev/meta/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](https://zhead.dev/meta/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](https://zhead.dev/meta/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](https://zhead.dev/meta/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](https://zhead.dev/meta/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](https://zhead.dev/meta/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](https://zhead.dev/meta/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](https://zhead.dev/meta/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](https://zhead.dev/meta/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](https://zhead.dev/meta/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](https://zhead.dev/meta/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](https://zhead.dev/meta/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.

[<h3>Essentials</h3>

](https://zhead.dev/collection/essential) [<h3>SEO Starter</h3>](https://zhead.dev/collection/seo) [<h3>Icons & Colors</h3>](https://zhead.dev/collection/icons) [<h3>PWA</h3>

](https://zhead.dev/collection/pwa) [<h3>Article</h3>

](https://zhead.dev/collection/article)