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.

What are Twitter Cards (now X Cards)?

Twitter Cards are the Open Graph equivalent for X (formerly Twitter). Although X reads og: tags if it does not find twitter: tags, it is recommended to add explicit twitter: tags for full control over how your content appears on X.

html

<head>
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@your_twitter_account" />
  <meta name="twitter:creator" content="@article_author" />
  <meta name="twitter:title" content="Title for X (can differ from og:title)" />
  <meta name="twitter:description" content="Description for X. Up to 200 characters." />
  <meta name="twitter:image" content="https://example.com/twitter-image.jpg" />
  <meta name="twitter:image:alt" content="Image description" />
</head>

The 4 Twitter Card types

Type	Appearance	When to use it
summary	Small image to the left of the text	Short posts, profile pages
summary_large_image	Large image above the text	Articles, visual content — the most used
app	Card with app download button	Only for mobile app download pages
player	Embedded video or audio player	For media platforms with playable content

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.

Prueba la herramienta gratis

Meta Tags PreviewerAnaliza tus URLs con {tool} de iRankly. Sin registro, sin tarjeta.

Usar herramienta gratis

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.

Open Graph and Twitter Cards: Complete Implementation Guide