How-to
2 min read

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:

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

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

These properties set by the Open Graph protocol.

PropertyValueDescription
titleThe title tag used to name the page. 70 characters max.This is used by default if no other values are passed.
descriptionThe meta.description tag used to describe the page. 200 characters max.This is used by default if no other values are passed.
og:imageAbsolute URL to image.Use the OG Image Generation documentation to create new images.
og:titleA title for link previews.You can use this to override the meta title if you want the OG title to be different.
og:descriptionA 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:urlA 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>
Propertycontent valueAdditional information
twitter:imageA 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:cardThe type of card used for Twitter link previewssummary, summary_large_image, app, or player
twitter:titleA string that shows for Twitter link previews. og:title is used as a fallback.70 characters max
twitter:descriptionA 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 16, 2024