Social Media Metadata

Social media metadata provides information that social platforms and messaging services can use when creating a preview for a shared webpage.

Open Graph metadata can describe a page's title, description, URL, image, and content type, while Twitter Card metadata provides similar information for links shared on X. These tags are placed in the document's <head> and do not change the visible content of the webpage itself.

What Is Open Graph?

The Open Graph protocol provides metadata that describes a webpage when its URL is shared with services that support Open Graph.

Open Graph properties use <meta> elements with a property attribute.

<meta property="og:title" content="Growing Tomatoes">

The property identifies the Open Graph property, while content supplies its value.

Open Graph was originally created by Facebook and is now used or recognized by many websites, applications, and link-preview systems.

Basic Open Graph Tags

The Open Graph protocol defines four basic properties: og:title, og:type, og:image, and og:url.

<meta property="og:title" content="Growing Tomatoes">
<meta property="og:type" content="article">
<meta property="og:image" content="https://www.example-web.site/img/tomato-garden.jpg">
<meta property="og:url" content="https://www.example-web.site/growing-tomatoes.html">

Additional properties can provide information such as a description, site name, locale, image dimensions, and image alternative text.

Open Graph Title

The og:title property provides the title that can be used for a social media or link preview.

<meta property="og:title" content="Growing Tomatoes - Beginner Gardening Guide">

The title should clearly identify the page and make sense when viewed outside the website. Avoid vague titles that depend on surrounding webpage content for meaning.

The Open Graph title can resemble the HTML <title>, although the two do not have to contain identical wording.

Open Graph Description

The og:description property provides a short description of the webpage for supported link previews.

<meta property="og:description" content="Learn how to plant, water, support, and harvest healthy tomato plants.">

A useful description summarizes the page accurately and provides enough context to help someone decide whether the shared link is relevant.

The wording can be similar to the page's standard meta description, although it can be adjusted when a different description works better for social sharing.

Open Graph URL

The og:url property identifies the preferred URL associated with the shared object.

<meta property="og:url" content="https://www.example-web.site/growing-tomatoes.html">

Use the complete absolute URL rather than a relative path. The URL should normally agree with the preferred canonical address of the page.

Keeping the Open Graph URL and canonical URL consistent avoids describing one address as canonical while presenting another as the primary social-sharing URL.

Open Graph Type

The og:type property identifies the type of object represented by the page.

<meta property="og:type" content="article">

An article, tutorial, or similar content page may appropriately use article, while a general website page can use website.

The selected type should describe the actual page rather than being chosen merely because one value appears more specific.

Open Graph Image

The og:image property identifies an image that can represent the webpage when the URL is shared.

<meta property="og:image" content="https://www.example-web.site/img/tomato-garden.jpg">

Use a complete image URL that can be accessed publicly by the service generating the preview. The image should clearly represent the page and remain readable when displayed at different preview sizes.

Additional Open Graph properties can provide the image dimensions and alternative text.

<meta property="og:image" content="https://www.example-web.site/img/tomato-garden.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Tomato plants growing in a raised garden bed">

The image alternative text should describe what the image represents rather than repeating the page title mechanically.

Additional Open Graph Properties

Open Graph provides optional properties that can supply additional information about a webpage.

<meta property="og:description" content="Learn how to plant, water, support, and harvest healthy tomato plants.">
<meta property="og:site_name" content="Example Website">
<meta property="og:locale" content="en_US">

The og:site_name property identifies the overall website, while og:locale identifies the locale associated with the content.

Only include properties that accurately describe the page and are useful for the implementation.

Twitter Cards

X continues to document Twitter Card markup using twitter: meta names. These tags can describe how a webpage is presented when its URL is shared on the platform.

The summary_large_image card is commonly used when a large representative image is appropriate.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Growing Tomatoes - Beginner Gardening Guide">
<meta name="twitter:description" content="Learn how to plant, water, support, and harvest healthy tomato plants.">
<meta name="twitter:image" content="https://www.example-web.site/img/tomato-garden.jpg">
<meta name="twitter:image:alt" content="Tomato plants growing in a raised garden bed">

The twitter:card value identifies the type of card, while the remaining properties provide the title, description, image, and image alternative text.

X can also use supported Open Graph values as fallbacks for some Twitter Card properties when corresponding twitter: tags are not supplied, but explicit Twitter Card metadata can be used when you want separate control over the preview.

Social media metadata and traditional SEO metadata serve related but different purposes. A page can contain both without one replacing the other.

<title>Growing Tomatoes - Beginner Gardening Guide</title>
<meta name="description" content="Learn how to grow tomatoes with practical planting and care information.">
<link rel="canonical" href="https://www.example-web.site/growing-tomatoes.html">

<meta property="og:title" content="Growing Tomatoes - Beginner Gardening Guide">
<meta property="og:description" content="Learn how to plant, water, support, and harvest healthy tomato plants.">
<meta property="og:url" content="https://www.example-web.site/growing-tomatoes.html">

The HTML title and meta description primarily describe the document and can influence how search engines present it, while Open Graph and Twitter Card metadata provide information intended for supported social and link-preview systems.

Social metadata should therefore complement the page's SEO metadata rather than be treated as a replacement for it.

Test Social Media Previews

After publishing social metadata, test the public URL with the tools provided by the platforms you intend to support. Preview systems must be able to access both the webpage and any image URLs referenced by its metadata.

Testing can reveal missing properties, inaccessible images, incorrect URLs, or older preview information that a platform has cached.

Because social platforms can change their preview requirements and behavior, check their current documentation when troubleshooting a specific service rather than assuming every platform processes metadata identically.

Common Social Metadata Mistakes

Mistake	Better Approach
Missing `og:title`	Provide a clear title that identifies the shared page.
Using a relative URL for `og:url`	Use the complete preferred webpage URL.
Using an inaccessible social image	Make sure preview services can retrieve the image URL.
Using an unrelated preview image	Choose an image that clearly represents the page.
Conflicting canonical and Open Graph URLs	Keep preferred page URLs consistent across metadata.
Using identical metadata on every page	Describe the individual page rather than the website in general.
Assuming every platform renders previews identically	Test important URLs on the platforms being supported.

Complete Social Metadata Example

The following example combines standard SEO metadata, Open Graph metadata, and Twitter Card metadata in one document head.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Growing Tomatoes - Beginner Gardening Guide</title>
  <meta name="description" content="Learn how to grow tomatoes with practical planting and care information.">
  <link rel="canonical" href="https://www.example-web.site/growing-tomatoes.html">

  <meta property="og:title" content="Growing Tomatoes - Beginner Gardening Guide">
  <meta property="og:description" content="Learn how to plant, water, support, and harvest healthy tomato plants.">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://www.example-web.site/growing-tomatoes.html">
  <meta property="og:image" content="https://www.example-web.site/img/tomato-garden.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Tomato plants growing in a raised garden bed">
  <meta property="og:site_name" content="Example Website">
  <meta property="og:locale" content="en_US">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Growing Tomatoes - Beginner Gardening Guide">
  <meta name="twitter:description" content="Learn how to plant, water, support, and harvest healthy tomato plants.">
  <meta name="twitter:image" content="https://www.example-web.site/img/tomato-garden.jpg">
  <meta name="twitter:image:alt" content="Tomato plants growing in a raised garden bed">
</head>

The standard metadata describes the webpage for browsers and search engines, while the Open Graph and Twitter Card properties provide additional information for supported sharing and preview systems.

Best Practices

Provide social metadata that accurately describes the individual webpage.
Include the basic Open Graph properties needed to identify the page.
Write clear titles and descriptions that make sense outside the website.
Use complete absolute URLs for webpage and image properties.
Keep og:url consistent with the preferred canonical URL.
Choose a representative social-sharing image with suitable dimensions and quality.
Provide og:image:alt and twitter:image:alt when appropriate.
Use article, website, or another Open Graph type that accurately describes the page.
Use Twitter Card metadata when specific control of previews on X is useful.
Do not use social metadata as a replacement for the HTML title, meta description, or canonical URL.
Test published URLs and images with the platforms the website intends to support.
Check current platform documentation when preview behavior or requirements change.

Summary

Social media metadata describes how a webpage can be represented when its URL is shared. Open Graph properties provide information such as the title, description, URL, type, and image, while Twitter Card metadata provides similar information for links shared on X.

Good social metadata accurately represents the page, uses accessible public URLs and appropriate images, and complements the page's standard SEO metadata. This completes the HTML SEO tutorial section.

Understanding Social Media Metadata