When someone shares a link from your site on LinkedIn, Facebook, X (Twitter), or WhatsApp, the platform generates a "card" with an image, title, and description. If you have not configured Open Graph or Twitter Cards, the platform chooses these elements automatically — and it usually makes poor choices. The result: previews without images, with the wrong title, or with irrelevant text.

What is Open Graph (OG)?

Open Graph is a protocol created by Facebook in 2010 that allows any web page to define how it should appear when shared on social networks. It is used by Facebook, LinkedIn, WhatsApp, Telegram, Slack, and most platforms that generate link previews.

The essential Open Graph tags

html

<head>
  <!-- Basic: required for a complete card -->
  <meta property="og:title" content="Title that appears in the social card" />
  <meta property="og:description" content="2–3 line description visible in the preview." />
  <meta property="og:image" content="https://example.com/og-image.jpg" />
  <meta property="og:url" content="https://example.com/page/" />
  <meta property="og:type" content="article" />

  <!-- Recommended: enhances the card -->
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Image description for accessibility" />
  <meta property="og:site_name" content="Your site name" />
  <meta property="og:locale" content="en_US" />
</head>

Open Graph image specifications

The image is the most impactful element of the social card. A badly dimensioned image gets cropped, pixelated, or displayed incorrectly.

Specification	Recommended value	Notes
Dimensions	1200 × 630 pixels	1.91:1 ratio — displays correctly on all platforms
Format	JPG or PNG	JPG for photos, PNG for designs with text
File size	< 1 MB	Facebook rejects images over 8 MB; always optimize
Text content in image	< 20% of area	Facebook may reduce reach for posts with heavy text in images
Image URL	Absolute with HTTPS	Relative or HTTP URLs may fail on some platforms

The most common og:type values

•website: for general pages, homepages, and tool pages.
•article: for blog posts, news, and editorial content. Allows extra properties like article:author and article:published_time.
•product: for product pages (ecommerce). Allows price and availability properties.
•profile: for user or author profile pages.

Twitter Cards: what changes on X

X reads your og: tags when it cannot find its own, so correct Open Graph already gives you a card. All you need to add is twitter:card to pick the layout. The four card types, the dedicated tags and the reasons X ignores a link have their own guide:

Twitter Cards (X Cards): the 4 types, tags and how to validate them

How to implement Open Graph in the most common CMS

In WordPress with Yoast SEO

Yoast SEO automatically generates og: and twitter: tags for every page. Go to Yoast SEO → Social to configure the default image for pages without a specific image, and verify that Facebook and Twitter are enabled. On each post, the Yoast panel lets you define a specific og: image different from the post's featured image.

In Next.js with the App Router

typescript

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = getPostBySlug(params.slug)
  return {
    openGraph: {
      title: post.title,
      description: post.description,
      type: 'article',
      publishedTime: post.date,
      images: [{
        url: `https://example.com/og/${params.slug}.jpg`,
        width: 1200,
        height: 630,
        alt: post.title,
      }],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.description,
      images: [`https://example.com/og/${params.slug}.jpg`],
    },
  }
}

Verify your implementation before sharing

iRankly's Meta Tags Previewer shows you how your page will look when shared on social networks, including the Open Graph and Twitter Card preview. Check that the image, title, and description are correct before publishing.

Try the tool for free

Analyze your URLs with Meta Tags Previewer by iRankly. No sign-up, no credit card.

Use tool for free

Facebook caches Open Graph tags aggressively. If you fix an error and the Facebook preview still shows the old content, use the Facebook Sharing Debugger (developers.facebook.com/tools/debug/) to force a cache refresh.

The rest of the tags that decide how your page looks:

Open Graph: The Complete Implementation Guide