Open Graph Optimization Guide: OG Tags, Social Previews & Best Practices

Control exactly how your content appears when shared on Facebook, Twitter/X, LinkedIn, Discord, and Slack — with practical code examples and testing workflows.

When someone shares your web page on social media, the preview card that appears is your first impression. A well-optimized preview with a compelling image, clear title, and engaging description can double or triple your click-through rate. A broken or missing preview makes your content look unprofessional and gets scrolled past. Open Graph (OG) tags give you complete control over these previews — and implementing them correctly is one of the highest-ROI technical SEO tasks you can perform.

What Are Open Graph Tags?

Open Graph is a protocol created by Facebook in 2010 that allows web pages to become rich objects in a social graph. In practical terms, OG tags are HTML meta tags that tell social media platforms how to display a link when it is shared. They define the title, description, image, URL, content type, and other properties of your page's social preview card.

While originally a Facebook initiative, Open Graph is now supported by virtually every major social platform: Twitter/X, LinkedIn, Discord, Slack, Pinterest, iMessage, WhatsApp, Telegram, and more. When any of these platforms encounters a shared URL, they look for OG tags first. If OG tags are missing, the platform falls back to scraping the page's HTML — often producing a poor or incomplete preview.

The Essential OG Tags

Four OG tags are considered mandatory for a complete social preview. Without them, your share will look broken or generic on most platforms.

og:title

The title displayed in the preview card. Should be concise, compelling, and include your primary keyword.

<meta property="og:title" content="10 CSS Tricks Every Developer Should Know">

Best practices: 40-60 characters. If the title exceeds platform limits (typically 60-90 characters), it will be truncated. Front-load the most important words. Avoid generic titles like "Home" or "Blog Post."

og:description

The description shown below the title. Should summarize the page content and encourage clicks.

<meta property="og:description" content="Master advanced CSS techniques including container queries, cascade layers, and subgrid with practical code examples and browser compatibility notes.">

Best practices: 100-200 characters. Write a standalone description — do not start with "This article..." or "Click here to..." Include a specific value proposition or curiosity gap.

og:image

The image displayed in the preview card. This is the single most important element for click-through rate.

<meta property="og:image" content="https://example.com/images/css-tricks-preview.jpg">

Best practices: Use absolute URLs (not relative paths). Recommended size: 1200 × 630 pixels (1.91:1 aspect ratio). Minimum: 600 × 315. Format: JPEG (best for photos) or PNG (best for graphics/text). Keep under 5MB. Use high-contrast, visually engaging images with readable text overlays.

og:url

The canonical URL of the page. Ensures likes, shares, and comments aggregate to the correct URL.

<meta property="og:url" content="https://example.com/blog/css-tricks">

Additional OG Tags

og:type

Specifies the type of content. The default is website. Use article for blog posts to enable author and publish date metadata.

<meta property="og:type" content="article">

Common types: website, article, product, profile, video.movie, music.song, book.

og:site_name

The name of your website or brand, displayed in smaller text above the title.

<meta property="og:site_name" content="Risetop">

og:locale

The language and region of the content.

<meta property="og:locale" content="en_US">

og:image:width and og:image:height

Explicitly specify the image dimensions to help platforms render the preview correctly without needing to download and measure the image first.

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

og:image:alt

Alternative text description of the image for accessibility and context.

<meta property="og:image:alt" content="CSS code examples showing container queries and subgrid layouts">

Twitter Card Tags

Twitter/X has its own meta tag system called Twitter Cards. While Twitter falls back to OG tags when Twitter Card tags are absent, adding both sets ensures the best possible preview on every platform.

twitter:card

Specifies the card type. Three main options:

<!-- Large image with text below (recommended for articles) -->
<meta name="twitter:card" content="summary_large_image">

<!-- Small square thumbnail on the left (compact) -->
<meta name="twitter:card" content="summary">

<!-- For video content -->
<meta name="twitter:card" content="player">

Full Twitter Card Implementation

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourbrand">
<meta name="twitter:creator" content="@authorhandle">
<meta name="twitter:title" content="10 CSS Tricks Every Developer Should Know">
<meta name="twitter:description" content="Master advanced CSS techniques...">
<meta name="twitter:image" content="https://example.com/images/css-tricks-preview.jpg">
<meta name="twitter:image:alt" content="CSS code examples">

Complete OG Template

Here is a production-ready template with all essential tags for maximum social preview quality:

<head>
  <!-- Primary Meta Tags -->
  <title>10 CSS Tricks Every Developer Should Know</title>
  <meta name="description" content="Master advanced CSS techniques...">
  <link rel="canonical" href="https://example.com/blog/css-tricks">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/blog/css-tricks">
  <meta property="og:title" content="10 CSS Tricks Every Developer Should Know">
  <meta property="og:description" content="Master advanced CSS techniques...">
  <meta property="og:image" content="https://example.com/images/css-tricks.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="CSS code examples">
  <meta property="og:site_name" content="Your Brand">
  <meta property="og:locale" content="en_US">

  <!-- Twitter / X -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="https://example.com/blog/css-tricks">
  <meta name="twitter:title" content="10 CSS Tricks Every Developer Should Know">
  <meta name="twitter:description" content="Master advanced CSS techniques...">
  <meta name="twitter:image" content="https://example.com/images/css-tricks.jpg">
  <meta name="twitter:image:alt" content="CSS code examples">
</head>

Platform-Specific Requirements

Platform	Image Size	Title Limit	Desc Limit	Card Type
Facebook	1200×630 (min 600×315)	~65 chars	~155 chars	og:type=article
Twitter/X	1200×628 (large) / 120×120 (small)	70 chars	200 chars	summary_large_image
LinkedIn	1200×627	~70 chars	~100 chars	og:type=article
Discord	Aspect ratio sensitive, no fixed size	No strict limit	No strict limit	OG fallback
Slack	Large images work well	Title + desc	Title + desc	OG fallback
Pinterest	1000×1500 (2:3 portrait)	~100 chars	~500 chars	og:type=article

Pinterest Exception: Pinterest strongly favors tall, portrait-oriented images (2:3 aspect ratio, 1000×1500px). If Pinterest is a major traffic source, consider using a separate og:image or Pinterest-specific markup via the Rich Pin format.

Creating High-Performance OG Images

The OG image is the most impactful element of your social preview. Studies show that posts with custom images receive 2-3x more engagement than those with auto-generated or stock images. Here is how to create images that drive clicks:

Design Principles

Large, readable text: Use 40px+ font sizes. If the text is unreadable at mobile width, it is too small.
Brand consistency: Use your brand colors, fonts, and logo placement on every image. This builds recognition across feeds.
High contrast: Ensure text is readable against the background. Dark text on light backgrounds or light text on dark backgrounds — avoid mid-range contrast.
Single focal point: One clear message or visual element. Cluttered images perform worse in social feeds.
Face inclusion: Images with faces receive 38% more engagement. Include a face when contextually appropriate.

Automated OG Image Generation

For blogs and content-heavy sites, consider generating OG images automatically:

Vercel OG Image Generation: Uses HTML/CSS to generate dynamic images via the Edge Network
Next.js built-in next/og: Native OG image generation in Next.js 13+
Puppeteer/Playwright: Screenshot templates with dynamic text overlay
Cloudinary/Imgix: Cloud-based image transformation with text overlays

Testing and Debugging OG Tags

Platform-Specific Debugging Tools

Facebook Sharing Debugger: developers.facebook.com/tools/debug/ — Shows exactly how Facebook renders your link, displays warnings for missing tags, and includes a "Scrape Again" button to force cache refresh.

Twitter Card Validator: cards-dev.twitter.com/validator — Preview your Twitter Card and verify markup. Note: requires Twitter Developer account access.

LinkedIn Post Inspector: linkedin.com/post-inspector/ — Validates how LinkedIn displays your shared content.

Third-party multi-platform tools: opengraph.xyz, metatags.io, heymeta.com — Preview across multiple platforms simultaneously.

Common OG Issues and Fixes

Caching Problem: Social platforms cache OG data aggressively. Facebook may cache for up to 30 days. Changes to your OG tags will not appear in previews until the cache expires or is manually cleared. Always use the debugging tools to force re-scraping after making changes.

Image not appearing: Verify the image URL is publicly accessible (not behind auth or blocked by robots.txt). Use absolute URLs. Check file size limits.
Wrong image showing: Platform is using cached data. Force re-scrape with the debugging tool, or append a cache-buster: image.jpg?v=2.
Title/description not updating: Same caching issue. Force re-scrape. Also verify your CMS is outputting the tags in the <head> section.
Truncated text: Your title or description exceeds platform character limits. Shorten them to the recommended lengths above.
Image looks cropped: Different platforms crop to different aspect ratios. Use 1.91:1 (1200×630) for universal compatibility, or accept some cropping on Pinterest (which prefers 2:3).

Dynamic OG Tags for Single-Page Applications

SPAs built with React, Vue, or Angular present a challenge: social media crawlers typically do not execute JavaScript. If your OG tags are rendered client-side, crawlers will see empty meta tags. Solutions include:

Server-Side Rendering (SSR): Next.js, Nuxt.js, or SvelteKit render OG tags on the server, making them immediately available to crawlers.
Pre-rendering: Services like Prerender.io or Rendertron detect crawler user-agents and serve pre-rendered HTML.
Static generation: For content that does not change frequently, generate static HTML with all OG tags at build time.
Hash fragment routing: Use _escaped_fragment_ convention or server-side detection to serve static HTML to crawlers.

Preview Your Social Share Cards

Use our free OG image preview tool to see exactly how your content looks when shared on Facebook, Twitter, LinkedIn, and Discord.

Try OG Image Preview Tool →

Related Tools

Frequently Asked Questions

What are Open Graph tags?

Open Graph (OG) tags are meta tags that control how your web pages appear when shared on social media platforms like Facebook, Twitter/X, LinkedIn, and Discord. They define the title, description, image, and type of content in a shared link preview. OG was originally created by Facebook in 2010 but is now adopted by most major social platforms. Without OG tags, platforms scrape your page and often produce poorly formatted previews.

What is the difference between Open Graph and Twitter Card tags?

Open Graph tags (og:) are the original protocol created by Facebook and used by most platforms. Twitter Card tags (twitter:) are Twitter/X's own meta tags that override OG tags on Twitter specifically. If Twitter Card tags are not present, Twitter falls back to OG tags. For maximum compatibility, include both sets — OG tags for universal support and Twitter Card tags to customize the Twitter/X experience.

What is the recommended OG image size?

The recommended OG image size is 1200 x 630 pixels (1.91:1 aspect ratio). This size works well across all major platforms including Facebook, Twitter, LinkedIn, and Discord. Minimum size is 600 x 315 pixels, but smaller images may appear cropped or pixelated. Maximum file size varies by platform (Facebook: 8MB, Twitter: 5MB). Use JPEG or PNG format. Avoid text smaller than 40px in the image.

How do I test Open Graph tags?

Use platform-specific debugging tools: Facebook Sharing Debugger (developers.facebook.com/tools/debug/), Twitter Card Validator (cards-dev.twitter.com/validator), LinkedIn Post Inspector (linkedin.com/post-inspector/), and Discord Webhook Tester. Third-party tools like opengraph.xyz and metatags.io provide multi-platform previews in one place. Always test after deploying changes, as platforms cache OG data aggressively.

Why is my OG image not updating on social media?

Social platforms cache Open Graph data aggressively — Facebook may cache for up to 30 days. To force a refresh: use the Facebook Sharing Debugger and click "Scrape Again," or append a cache-busting query parameter to your image URL (e.g., image.jpg?v=2). For Twitter, use the Card Validator to re-fetch. Ensure your server returns the correct headers and that the image URL is accessible (not blocked by robots.txt or requiring authentication).

Published on April 10, 2026 · Last updated April 10, 2026 · 10 min read