Open Graph and Twitter Cards: complete guide

Open Graph and Twitter Cards control how your pages look when shared on social media. Proper markup can increase link CTR by 2–3×. We cover all tags, platform requirements, and common mistakes.

When a user shares a link on Facebook, Telegram, LinkedIn, or WhatsApp, the platform doesn't pull data from your site arbitrarily — it reads special meta tags in the <head> of the page. This is the Open Graph Protocol, developed by Facebook in 2010.

Without OG markup, social platforms guess the title, description, and image on their own — the result is unpredictable. With proper markup, you fully control the preview appearance and maximise CTR of shared links.

Diagram: OG tags in HTML → social network → preview card with title and image — Open Graph controls how a link looks when shared: tags inside `<head>` turn into a card with title, description and image.

Open Graph doesn't directly affect search rankings — it's a social traffic tool. But sharing with an attractive preview increases reach and can indirectly affect link equity and branded traffic.

What is Open Graph

Open Graph Protocol (OGP) is a set of meta tags in the <head> of an HTML page that defines how the page is presented when shared on social networks. The protocol uses the og: namespace and is supported by all major platforms: Facebook, LinkedIn, Telegram, WhatsApp, Pinterest, Slack.

Core OG tags

Tag	Required	Description
og:title	Yes	Page title in the preview (up to 60–70 characters)
og:description	Recommended	Description (up to 155–160 characters)
og:image	Yes	Preview image URL (min 200×200, rec. 1200×630)
og:url	Yes	Canonical URL of the page
og:type	Yes	Object type: website, article, product
og:site_name	Recommended	Site name (e.g. 'seohead.tech')
og:locale	Recommended	Page language: en_US, ru_RU
og:image:width	Recommended	Image width in pixels
og:image:height	Recommended	Image height in pixels
og:image:alt	Recommended	Alt text for the preview image

Code implementation example:

HTML

<!-- Full OG tag set for an article -->
<head>
  <meta property="og:title" content="Open Graph and Twitter Cards: complete guide" />
  <meta property="og:description" content="How to set up Open Graph markup for maximum CTR when sharing on social media" />
  <meta property="og:image" content="https://seohead.tech/images/blog/open-graph.webp" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Open Graph and Twitter Cards guide" />
  <meta property="og:url" content="https://seohead.tech/en/blog/open-graph" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="seohead.tech" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:locale:alternate" content="ru_RU" />

  <!-- Additional for article -->
  <meta property="article:published_time" content="2026-05-17T00:00:00Z" />
  <meta property="article:author" content="https://seohead.tech/en/about" />
  <meta property="article:section" content="On-Page SEO" />
</head>

og:image — requirements and sizes

The OG image is the most important element of a preview. It takes up 80%+ of the card area and determines whether the user clicks the link. Wrong size or format and Facebook will crop the image or refuse to display it.

Platform	Recommended size	Minimum	Format
Facebook / Meta	1200×630 px	600×315 px	JPG, PNG, GIF, WebP
Twitter / X	1200×600 px	300×157 px	JPG, PNG, WebP, GIF
LinkedIn	1200×627 px	200×200 px	JPG, PNG, GIF
Telegram	1280×720 px (16:9)	any	JPG, PNG, WebP
WhatsApp	1200×630 px	300×200 px	JPG, PNG

Universal solution: 1200×630 px in WebP format. This is a 1.91:1 ratio that displays correctly on all major platforms. File size up to 8 MB (Facebook limit), optimally under 300 KB.

Twitter Cards

Twitter (X) supports OG tags but also has its own markup — Twitter Cards. The platform reads twitter: tags first, then falls back to og: tags. It is recommended to specify both sets.

Twitter Card tag	OG equivalent	Description
twitter:card	—	Card type: summary, summary_large_image, app, player
twitter:title	og:title	Title (up to 70 characters)
twitter:description	og:description	Description (up to 200 characters)
twitter:image	og:image	Image URL
twitter:image:alt	og:image:alt	Alt for the image
twitter:site	—	@username of the site account
twitter:creator	—	@username of the content author

Code implementation example:

HTML

<!-- Twitter Cards markup -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@seohead_tech" />
<meta name="twitter:creator" content="@pavelbarushka" />
<meta name="twitter:title" content="Open Graph and Twitter Cards: complete guide" />
<meta name="twitter:description" content="Setting up OG markup for maximum CTR when sharing" />
<meta name="twitter:image" content="https://seohead.tech/images/blog/open-graph.webp" />
<meta name="twitter:image:alt" content="Open Graph guide" />

OG object types

og:type	When to use	Additional tags
website	Homepage, service pages, landing pages	—
article	Blog posts, news, guides	article:published_time, article:author, article:section
product	Product pages in an online store	product:price:amount, product:price:currency
profile	Author pages, user profiles	profile:first_name, profile:last_name
video	Pages with video content	video:duration, video:release_date

Implementation in Next.js

In Next.js 13+ (App Router), OG tags are conveniently set via the Metadata API. This is a typed approach without manually writing HTML meta tags.

TYPESCRIPT

// app/[locale]/blog/[slug]/page.tsx
import type { Metadata } from 'next';

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const article = await getArticle(params.slug);

  return {
    title: article.titleEn,
    description: article.leadEn,
    openGraph: {
      title: article.titleEn,
      description: article.leadEn,
      url: `https://seohead.tech/en/blog/${params.slug}`,
      siteName: 'seohead.tech',
      images: [
        {
          url: `https://seohead.tech${article.coverImage}`,
          width: 1200,
          height: 630,
          alt: article.coverImageAltEn,
        },
      ],
      locale: 'en_US',
      type: 'article',
      publishedTime: article.date,
      authors: ['https://seohead.tech/en/about'],
      section: article.tagEn,
    },
    twitter: {
      card: 'summary_large_image',
      title: article.titleEn,
      description: article.leadEn,
      images: [`https://seohead.tech${article.coverImage}`],
      creator: '@pavelbarushka',
    },
  };
}

Validation and debugging

Tool	Platform	URL
Facebook Sharing Debugger	Facebook, Instagram, WhatsApp	developers.facebook.com/tools/debug/
Twitter Card Validator	Twitter / X	cards-dev.twitter.com/validator
LinkedIn Post Inspector	LinkedIn	linkedin.com/post-inspector/
Open Graph Checker	Universal	opengraph.xyz
Telegram	Telegram	Simply paste the link in a chat — the preview appears immediately

Facebook caches OG tags. If you updated the markup but the preview hasn't changed — use the Facebook Sharing Debugger ('Scrape Again' button). Telegram cache updates automatically; for a forced refresh add ?v=2 to the URL.

FAQ

Directly — no. Google doesn't use OG tags for ranking. Indirectly — yes: an attractive preview increases sharing, which can lead to link growth and branded traffic.

For search — <title>. For social networks — og:title. They can differ: for search the title is optimised for keywords (50–60 chars), for social networks — for clicks and emotion (up to 70 chars). Both tags must be present.

Three main reasons: 1) The image is inaccessible via HTTPS or blocked for bots. 2) og:image is missing or the URL is invalid. 3) The page is closed to crawlers (noindex, robots.txt, Cloudflare Bot Fight Mode). Check image accessibility with curl -A 'TelegramBot' URL.

Twitter supports OG as a fallback, but twitter: tags have priority and give more control — for example the card type (summary vs summary_large_image). I recommend specifying both sets: it's 5 extra lines that guarantee correct display.

Next.js supports dynamic OG image generation via ImageResponse from next/og. The image is generated server-side in PNG/WebP format based on a JSX template. This allows unique previews for each article without manually preparing images.