A Guide to Open Graph Meta Tags

Open Graph meta tags are used to specify how a page should be represented on social media. They are used by Facebook, X (formerly Twitter), LinkedIn, and platforms like WhatsApp, Telegram, Discord, Slack, and others.

The Open Graph protocol outlines the different types of meta tags that can be used to specify the title, description, image, and other information about a page.

Open Graph Meta Tag Generator

Use the tag generator below to generate Open Graph meta tags for your page.

Tag Generator

Fill in the form below to generate Open Graph meta tags.

Generate OG Image
Open Graph Meta Tags
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="A guide to Open Graph meta tags" />
<meta property="og:description" content="Open Graph meta tags are used to specify how a page should be represented on social media. Learn how to leverage them to make your content stand out and increase engagement with the content you share." />
<meta property="og:url" content="https://imgsrc.io/guides/open-graph-meta-tags" />

<meta property="og:image" content="https://imgsrc.io/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<!-- Twitter/X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="A guide to Open Graph meta tags" />
<meta name="twitter:description" content="Open Graph meta tags are used to specify how a page should be represented on social media. Learn how to leverage them to make your content stand out and increase engagement with the content you share." />
<meta name="twitter:image" content="https://imgsrc.io/og.png" />
<meta name="twitter:image:width" content="1200" />
<meta name="twitter:image:height" content="630" />

Basic Open Graph Meta Tags

There are four basic Open Graph meta tags that must be included on every page:

  • og:title - The title of the page
  • og:description - A short description of the page, usually between 1 to 2 sentences
  • og:image - An absolute URL to an image that represents the page
  • og:url - The canonical URL of the page

The tags are included in the <head> of the page, like so:

<head>
  <meta property="og:title" content="A Guide to Open Graph Meta Tags" />
  <meta
    property="og:description"
    content="Open Graph meta tags are used to specify how a page should be represented on social media."
  />
  <meta property="og:image" content="https://imgsrc.io/og.png" />
  <meta
    property="og:url"
    content="https://imgsrc.io/guides/open-graph-meta-tags"
  />
 
  <!-- Other meta tags -->
</head>

Open Graph Images

There are a few things to keep in mind when specifying an image for Open Graph meta tags:

  • The ideal size for an Open Graph image is 1200 x 630 pixels
  • The image should be less than 5MB in size (ideally a few hundered KB)
  • The image should be in either JPG, PNG, or GIF format

It is also recommended to include an og:image:width and og:image:height meta tag to specify the dimensions of the image. This is not required, but it can help platforms like Facebook render the image faster.

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Other Common Open Graph Meta Tags

There are a few other Open Graph meta tags that are commonly used:

  • og:type - The type of page, e.g. website, article, etc. (defaults to website. See the Open Graph protocol for a full list of types)
  • og:locale - The locale of the page, e.g. en_US, en_GB, fr_FR, etc. (defaults to en_US)

Meta Tags for Twitter/X Cards

X (formerly Twitter) uses tags that are similar to the Open Graph protocol to specify how a page should be represented on Twitter/X. For the most part, the tags are the same as Open Graph tags, but with a twitter: prefix instead of og:.

Here are the basic tags that are required for X cards:

  • twitter:title - The title of the page
  • twitter:description - A short description of the page, usually between 1 to 2 sentences
  • twitter:image - An absolute URL to an image that represents the page

When specifying an image for X cards, it is recommended to specify the dimensions of the image using the twitter:image:width and twitter:image:height meta tags.

X cards have a variety of different types, including summary, summary_large_image, app, player, and others. The most common type is summary_large_image, which is used for most pages. To specify the type of X card, use the twitter:card meta tag.

The recommended tags for X cards are:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="A guide to Open Graph meta tags" />
<meta
  name="twitter:description"
  content="Open Graph meta tags are used to specify how a page should be represented on social media."
/>
 
<meta name="twitter:image" content="https://imgsrc.io/og.png" />
<meta name="twitter:image:width" content="1200" />
<meta name="twitter:image:height" content="630" />

Putting it all together

To put it all together, here is an example of a page with all the required and recommended Open Graph and Twitter/X meta tags:

<!-- Open Graph -->
<meta
  property="og:url"
  content="https://imgsrc.io/guides/open-graph-meta-tags"
/>
<meta property="og:type" content="article" />
<meta property="og:title" content="A Guide to Open Graph Meta Tags" />
<meta
  property="og:description"
  content="Open Graph meta tags are used to specify how a page should be represented on social media."
/>
 
<meta property="og:image" content="https://imgsrc.io/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
 
<meta property="og:locale" content="en_US" />
 
<!-- Twitter/X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="A Guide to Open Graph Meta Tags" />
<meta
  name="twitter:description"
  content="Open Graph meta tags are used to specify how a page should be represented on social media."
/>
 
<meta name="twitter:image" content="https://imgsrc.io/og.png" />
<meta name="twitter:image:width" content="1200" />
<meta name="twitter:image:height" content="630" />