Inspecting your Open Graph metadata

Learn how to inspect and validate your Open Graph metadata through the Open Graph deployment tab.

Table of Contents

You can use the Open Graph tab on every deployment on Vercel to validate and view your Open Graph (OG) data across a range of social media sites before you share it out. Routes using Deployment Protection can also be inspected.

To view your data:

Choose your account or team from the scope selector
Select your project and go to the Deployments tab
From the Deployments tab, select the deployment you wish to view the metadata for
Select the Open Graph tab:
From here, you can view the metadata and a preview for Twitter, Slack, Facebook, and LinkedIn for specific pages in your deployment

Filter by pathname

You can use the Path dropdown to view the OG card for any page on that particular deployment.

Metadata

These properties set by the Open Graph protocol.

Property	Value	Description
`title`	The title tag used to name the page. 70 characters max.	This is used by default if no other values are passed.
`description`	The meta.description tag used to describe the page. 200 characters max.	This is used by default if no other values are passed.
`og:image`	Absolute URL to image.	Use the OG Image Generation documentation to create new images.
`og:title`	A title for link previews.	You can use this to override the meta title if you want the OG title to be different.
`og:description`	A one to two sentence description for link previews.	You can use this to override the meta description if you want the OG title to be different.
`og:url`	A canonical URL for link previews.	You should provide the absolute URL.

index.js

<div>
  <head>
    <meta name="og:title" content="Vercel Edge Network" />
    <meta name="og:description" content="Vercel Edge Network" />
    <meta name="og:image" content={ // Because OG images must have a absolute
    URL, we use the // `VERCEL_URL` environment variable to get the deployment’s
    URL. // More info: // https://vercel.com/docs/projects/environment-variables
    `${ process.env.VERCEL_URL ? 'https://' + process.env.VERCEL_URL : ''
    }/api/vercel` } />
    <meta
      name="og:url"
      content="https://vercel.com/docs/edge-network/overview"
    />
  </head>
  <h1>A page with Open Graph Image.</h1>
</div>

Twitter-specific metadata

Property	`content` value	Additional information
`twitter:image`	A URL to an image file or to a dynamically generated image. `og:image` is used as a fallback.	`JPG`,`PNG`, `WEBP` and `GIF`. `SVG` is not supported
`twitter:card`	The type of card used for Twitter link previews	`summary`, `summary_large_image`, `app`, or `player`
`twitter:title`	A string that shows for Twitter link previews. `og:title` is used as a fallback.	70 characters max
`twitter:description`	A description for Twitter link previews. `og:description` is used as a fallback.	200 characters max

index.js

<div>
  <head>
    <meta name="twitter:title" content="Vercel Edge Network for Twitter" />
    <meta
      name="twitter:description"
      content="Vercel Edge Network for Twitter"
    />
    <meta
      name="twitter:image"
      content="https://og-examples.vercel.sh/api/static"
    />
    <meta name="twitter:card" content="summary_large_image" />
  </head>
  <h1>A page with Open Graph Image.</h1>
</div>

Last updated on April 27, 2024

Was this helpful?