Open Graph Preview

What is Open Graph?

The Open Graph protocol (OG) is a metadata standard introduced by Facebook in 2010 to control how web pages appear when shared on social platforms. When you paste a link in Twitter, Slack, LinkedIn, or WeChat, the platform automatically reads OG tags from the page and generates a rich media card with a title, description, and image.

OG tags are a set of <meta> tags placed in the HTML <head>:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" content="https://example.com/image.png" />
<meta property="og:url" content="https://example.com/page" />

Why Do OG Tags Matter?

1. The "First Impression" of Social Sharing

In a content feed, users typically decide whether to click a link in 1-2 seconds. An attractive share card with a clear title, description, and compelling image can significantly boost click-through rates (CTR). Without OG tags, a link appears as plain URL text — virtually invisible in a busy feed.

2. Cross-Platform Consistency

Different platforms interpret OG tags slightly differently:

3. Indirect SEO Impact

While OG tags don't directly affect Google rankings, they indirectly help SEO through:

• More social shares → More backlinks and traffic
• Higher CTR → Positive signals to search engines
• Google may use og:title as a candidate for search result titles

Open Graph vs Twitter Cards

Twitter (now X) has its own metadata standard — Twitter Cards. Twitter Card tags use the twitter: prefix, and when Twitter-specific tags are missing, they automatically fall back to OG tags.

Best practice is to set both OG and Twitter Card tags, which is the default behavior of this tool's code generator.

Key Features of This Tool

• 8 Platform Live Previews: Facebook, Twitter/X, LinkedIn, Slack, WeChat, Pinterest, Discord, and Google SERP — edit once, preview everywhere
• Real-time Character Count: Title (60 char limit) and description (160 char limit) with overflow warnings
• Image Drag & Drop Upload: Upload images with automatic dimension detection and comparison against the recommended 1200×630 size
• One-Click Meta Tag Code Generation: Complete OG + Twitter Card code with clipboard copy
• Debug Tool Quick Links: Direct links to Facebook Debugger, Twitter Card Validator, LinkedIn Inspector, and more
• Pure Frontend / Privacy-First: All processing happens in your browser — no data is sent to any server

How to Use

1. Fill in Basic Information

In the input area at the top of the page, fill in the following fields:

• URL: Your page URL, used to display the domain in previews
• Site Name: Your brand name — Slack and Discord display this prominently
• og:title: Page title, recommended under 60 characters. Character count shown on the right turns red when over the limit
• og:description: Page description, recommended under 160 characters with the same character count feature
• og:image: Preview image URL, recommended size 1200×630 pixels

2. Upload a Preview Image

You can set the preview image in two ways:

Option 1: Enter an image URL

Type the image's online URL in the og:image field, e.g., https://example.com/og-image.png.

Option 2: Drag & drop or click to upload

Drag a local image onto the upload area, or click to select a file. The tool will automatically:

1. Generate a local preview URL and immediately show it across all 8 platform previews
2. Detect the image's actual dimensions (width × height)
3. Compare against the recommended 1200×630 size:
   • ✅ Green: Dimensions meet the recommendation
   • ⚠️ Orange: Dimensions are below recommended — may appear blurry or get cropped

Note: Dragged images use browser-local blob URLs. The generated code will automatically use a placeholder https://example.com/your-image.png, reminding you to replace it with a real URL.

3. Review Platform Previews

Below the input area, 8 social platform and search engine previews render in real time:

By viewing multiple platforms side by side, you can quickly spot issues — like a title getting cut off in WeChat, or an image cropping poorly in Pinterest's portrait format.

4. Copy the Generated Code

The code output section automatically generates complete OG + Twitter Card meta tag code. Click the copy button in the top-right corner to copy it to your clipboard, then paste it into your page's <head> tag.

5. Verify with Debug Tools

Below the code area, quick links to official platform validators are provided:

• Facebook Debugger: Check how Facebook parses your OG tags and force-refresh the cache
• Twitter Card Validator: Preview your Twitter card appearance
• LinkedIn Inspector: Check LinkedIn sharing preview
• Google Rich Results: Test structured data and search result appearance

Recommended Workflow

1. Write: Fill in title, description, and image in the input area
2. Preview: Check all 8 platforms, focusing on text truncation and image cropping
3. Adjust: Optimize copy and images based on preview results
4. Copy: One-click copy the generated code
5. Paste: Insert the code into your page's <head>
6. Verify: Use official debug tools to confirm each platform's crawl results

OG Tag Reference

Core OG Tags

These four tags are the most essential in the Open Graph protocol, required by most platforms:

Extended OG Tags

Image Tags

Best Practice: Explicitly declaring og:image:width and og:image:height allows platforms to render the card without downloading the full image first, speeding up share card generation.

Twitter Card Tags

Twitter Cards are Twitter/X's proprietary metadata standard. When twitter:* tags are missing, Twitter falls back to the corresponding og:* tags.

Twitter Card Types

Platform Image Size Requirements

Universal Recommendation: Using 1200×630 pixels works well on most platforms, which is why this tool recommends it as the default size.

og:type Values

Common Types

Article Type Extensions

When og:type is article, you can use these additional tags:

Complete Template

A full HTML template with all recommended tags:

<head>
  <!-- Basic Meta -->
  <title>Page Title | Brand</title>
  <meta name="description" content="Page description, 130-160 chars" />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Page description" />
  <meta property="og:image" content="https://example.com/og.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Image description" />
  <meta property="og:site_name" content="Brand" />
  <meta property="og:locale" content="en_US" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Page Title" />
  <meta name="twitter:description" content="Page description" />
  <meta name="twitter:image" content="https://example.com/og.png" />
  <meta name="twitter:image:alt" content="Image description" />
  <meta name="twitter:site" content="@youraccount" />
</head>

Frequently Asked Questions

What is the OG Preview Tool?

The OG Preview Tool is a free online tool that helps you preview how your Open Graph (OG) tags will appear on major social platforms before publishing. You can edit title, description, and image in real time while viewing share card previews across Facebook, Twitter/X, LinkedIn, Slack, WeChat, Pinterest, Discord, and Google SERP — 8 platforms total — and generate ready-to-use meta tag code with one click.

What are Open Graph tags?

Open Graph (OG) is a metadata protocol introduced by Facebook in 2010. By adding <meta property="og:*"> tags in your page's <head>, you can control the title, description, and preview image shown when your page is shared on social platforms. Virtually all major social platforms and messaging apps support the OG protocol.

Is my data safe?

Absolutely. This tool is purely frontend — all processing happens in your browser:

• Text you enter is never sent to any server
• Uploaded images stay in your browser (using blob URLs)
• No registration or login required
• No cookie tracking

Why is the recommended image size 1200×630?

1200×630 pixels (1.91:1 aspect ratio) offers the best cross-platform compatibility:

• Facebook: Recommends 1200×630 (1.91:1)
• LinkedIn: Recommends 1200×627 (≈1.91:1)
• Twitter/X: Recommends 1200×600 (2:1), but 1200×630 works well
• WhatsApp: Recommends 1200×630

Using this size provides good display across most platforms with a single image. When images are too small (e.g., under 200×200), Facebook may fall back to text-only display.

What are the character limits for title and description?

This tool uses the following reference limits:

• Title: 60 characters
• Description: 160 characters

These numbers come from platform best practices:

The red warning appears when limits are exceeded, but it doesn't mean you must shorten — it's just an awareness indicator.

Why does WeChat only show a small image?

This is WeChat's design decision. When sharing links in WeChat, OG images are cropped to a small square thumbnail (approximately 48×48 or 60×60 pixels) displayed to the right of the title. This means:

• Small text in images is barely visible
• Image impact is far less than on Facebook or Twitter
• Title copy matters much more in WeChat

If WeChat is your primary sharing channel, focus on optimizing og:title rather than the image.

What's the difference between Twitter Cards and OG tags?

Twitter Cards are Twitter/X's own metadata standard using the twitter: prefix. The relationship is a fallback mechanism:

• If both twitter:title and og:title are set, Twitter uses twitter:title
• If only og:title is set, Twitter uses it automatically
• If neither is set, Twitter uses the <title> tag

Best practice is to set both (this tool's code generation includes both by default) to ensure optimal display everywhere.

What are the twitter:card types?

twitter:card has four types:

This tool defaults to summary_large_image because it provides the largest image display area and best visual impact.

Why isn't the platform showing my updated OG tags?

Social platforms cache previously crawled OG data. After modifying OG tags, you need to manually clear the cache:

• Facebook: Use Sharing Debugger, enter URL, click "Scrape Again"
• Twitter: Use Card Validator
• LinkedIn: Use Post Inspector
• Slack: Resend the link in chat — Slack auto-refreshes
• Discord: Delete the message and resend the link

This tool provides quick links to these debug tools below the code output area.

Do OG tags affect SEO?

OG tags don't directly affect search engine rankings. But they help SEO indirectly:

1. Higher social CTR: Good OG tags make links more attractive on social platforms
2. More backlink opportunities: More shares → more potential backlinks
3. Title candidate: Google may use og:title as a search result title source
4. Brand searches: More social exposure → more branded search queries

How do I set OG tags in an SPA (Single Page Application)?

Social platform crawlers typically don't execute JavaScript, so OG tags generated via client-side rendering won't be crawled. Solutions:

1. SSR (Server-Side Rendering): Use Next.js, Nuxt.js, etc. to output OG tags server-side
2. SSG (Static Site Generation): Generate static HTML with OG tags at build time
3. Prerendering services: Use Prerender.io or similar to serve pre-rendered pages to crawlers

How can I check my website's existing OG tags?

Several methods:

1. View source: Right-click → View Page Source → search for og:
2. Browser extensions: Install an OG tag checker extension (e.g., Open Graph Preview)
3. curl command: curl -s https://example.com | grep "og:"
4. Platform debug tools: Use Facebook Debugger to see all crawled OG data

Does this tool support fetching existing OG tags from a URL?

Not currently. This is a deliberate design decision — to protect your privacy, this tool never sends requests to any server. All operations run in your browser, and you manually input content for preview and debugging.

To check live page OG tags, use the platform debug tool links provided below the code area.

Why might the preview differ from actual sharing?

This tool simulates previews based on each platform's published design specs, but minor differences from actual shares may occur because:

• Platforms may update their UI at any time
• Different devices/screen sizes display differently
• Platforms may post-process titles/descriptions (truncation, line wrapping)
• Actual image crop positions may vary by algorithm

Use this tool as a quick preview and debugging starting point, and verify with official platform debug tools for the final result.

Can one image work across all platforms?

Mostly yes. A 1200×630 pixel image works well on most platforms. But if you care about a specific platform:

• Pinterest: 2:3 portrait images (1000×1500) perform better
• Twitter/X: 2:1 (1200×600) is the ideal ratio
• WeChat: Since it only shows a small square thumbnail, image details matter less

If resources allow, you can serve different image sizes based on crawler User-Agent on the server side, but this requires additional technical implementation.

Open Graph Protocol Deep Dive

Origin and Evolution

The Open Graph protocol was officially introduced at Facebook's F8 developer conference in 2010, inspired by the Dublin Core metadata standard and RDFa. Its core goal is to turn any web page into a rich object in the Social Graph — when users share links, platforms can automatically extract structured information to generate appealing preview cards.

The protocol specification is hosted at ogp.me, maintained by Facebook (Meta). Although originally designed for Facebook, its simplicity and utility led to adoption by virtually all major social platforms and messaging apps.

Technical Implementation

Tag Placement

OG tags must be placed in the HTML <head> section using the property attribute (not name):

<!-- ✅ Correct: using property attribute -->
<meta property="og:title" content="Page Title" />

<!-- ❌ Incorrect: should not use name attribute (though some platforms accept it) -->
<meta name="og:title" content="Page Title" />

Exception: Twitter Card tags use the name attribute instead of property — this is Twitter's design choice:

<meta name="twitter:card" content="summary_large_image" />

Platform Crawling Mechanism

When a user shares a URL on a social platform, the platform's crawler requests that URL and parses OG tags from the HTML. Different platforms use different User-Agents:

Understanding crawler behavior is essential for debugging OG tags. Common issues include:

• JavaScript rendering: Most social media crawlers do not execute JavaScript. If your OG tags are generated via client-side JS, crawlers won't see them. OG tags must exist as static HTML (via SSR or SSG)
• Redirects: Crawlers typically follow HTTP redirects (301/302), but excessive redirect chains may cause timeouts
• Caching: Platforms cache OG data (Facebook for ~24 hours). After changes, use debug tools to force refresh

Tag Priority

When multiple sources provide the same information, platforms typically resolve them in this order:

1. Platform-specific tags (e.g., twitter:title) — highest priority
2. OG tags (e.g., og:title) — second priority
3. Standard HTML tags (e.g., <title>, <meta name="description">) — fallback

This means:

<title>HTML Title</title>
<meta property="og:title" content="OG Title" />
<meta name="twitter:title" content="Twitter Title" />

• Facebook displays: "OG Title"
• Twitter displays: "Twitter Title"
• If twitter:title is removed, Twitter displays: "OG Title"
• If og:title is also removed, Twitter displays: "HTML Title"

OG Image Technical Requirements

Image URL Requirements

• Must be an absolute URL (including https:// prefix)
• Relative paths (e.g., /images/og.png) are not supported
• Some platforms require HTTPS — HTTP images may be ignored

Image Crawling Flow

1. Crawler reads the og:image URL
2. Sends HTTP GET request to download the image
3. Parses image dimensions and format
4. Crops/scales the image according to platform templates
5. Caches the processed image

If you provide og:image:width and og:image:height alongside og:image, the crawler can skip step 3, speeding up rendering:

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

Dynamic OG Images

More and more websites use dynamically generated OG images, rendered on-the-fly via URL parameters. Common approaches include:

• Vercel OG Image Generation (@vercel/og): Uses the Satori engine to convert React JSX → SVG → PNG
• Cloudinary: Image transformations and text overlays via URL parameters
• Self-hosted rendering: Using Puppeteer/Playwright for screenshot-based generation

OG and SEO

How Google Uses OG Tags

Google has stated it may reference OG tags in these scenarios:

• og:title: As a candidate source for search result titles (alongside <title>, <h1>, etc.)
• og:description: As a supplementary source for meta descriptions
• og:image: May be used in Google Image Search and Google Discover

However, OG tags do not directly affect search rankings. Their SEO value is primarily indirect:

• Better social sharing CTR → More traffic
• More social shares → More potential backlinks
• Brand exposure → Increased branded searches

Structured Data vs OG Tags

OG tags and Schema.org structured data (JSON-LD) serve different purposes:

It's recommended to use both OG tags and structured data — they optimize different channels.

OG Tags in Popular Frameworks

Next.js (Pages Router)

import Head from 'next/head'

export default function Page() {
  return (
    <Head>
      <title>Page Title</title>
      <meta property="og:title" content="Page Title" />
      <meta property="og:description" content="Page description" />
      <meta property="og:image" content="https://example.com/og.png" />
    </Head>
  )
}

Next.js (App Router)

export const metadata = {
  title: 'Page Title',
  description: 'Page description',
  openGraph: {
    title: 'Page Title',
    description: 'Page description',
    images: [{ url: 'https://example.com/og.png', width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Page Title',
    description: 'Page description',
    images: ['https://example.com/og.png'],
  },
}

Nuxt.js

<script setup>
useHead({
  title: 'Page Title',
  meta: [
    { property: 'og:title', content: 'Page Title' },
    { property: 'og:description', content: 'Page description' },
    { property: 'og:image', content: 'https://example.com/og.png' },
  ],
})
</script>

Plain HTML

<head>
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Page description" />
  <meta property="og:image" content="https://example.com/og.png" />
  <meta property="og:url" content="https://example.com" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

OG Tag Optimization Tips

Title Writing Tips

Keep It Under 60 Characters

While there's no strict character limit, 60 characters is a well-tested safe range. Titles longer than this get truncated on Facebook, Twitter/X, and Google SERP.

✅ Free OG Preview Tool — 8 Social Platforms (42 chars)
❌ This is a very powerful free online Open Graph preview and meta tag generator tool supporting all major social media platforms (120 chars)

Front-Load Key Information

Different platforms truncate titles at different points. WeChat shows roughly 30 characters, Twitter/X on mobile truncates earlier. Put the most important info in the first 40 characters.

Don't Duplicate the Site Name

og:site_name already provides the website name. Platforms like Slack and Discord automatically display it above the title, so there's no need to repeat it in og:title.

✅ og:title="JSON Online Formatter"    og:site_name="DevTool"
❌ og:title="DevTool - JSON Online Formatter"    og:site_name="DevTool"

Description Writing Tips

The 130-160 Character Sweet Spot

Description display length varies significantly across platforms:

Put your core value proposition in the first 65 characters (covers Facebook), and provide a complete feature overview within 130 characters (covers most platforms).

Include a Call-to-Action

Add a clear CTA at the end of your description to encourage clicks.

✅ Free OG preview tool. Edit once, preview on 8 platforms. Upload images, generate code. Try it now.
❌ A tool that can preview Open Graph tags online.

Use Specific Numbers

Numbers are more persuasive than vague descriptions and stand out in content feeds.

✅ 8 platform previews, 1200×630 image detection, one-click meta tag code
❌ Multiple platform previews, image detection, and code generation

Image Optimization Tips

Recommended Size: 1200×630

This size (1.91:1 aspect ratio) is compatible with the large image display on Facebook, LinkedIn, Slack, and most platforms. The tool compares uploaded images against this recommendation.

Center Key Content

Different platforms crop images differently:

• Facebook / LinkedIn: Center crop at 1.91:1
• Twitter/X: Center crop at 2:1
• WeChat: Center crop to a small 1:1 square
• Pinterest: Vertical crop at 2:3

Keep important content (text, logos) in the center of the image, away from edges.

Text on Images

Facebook previously enforced a "20% text rule" (no more than 20% text area in images). While no longer strictly enforced, images with too much text may still affect ad delivery. Guidelines:

• Keep text on OG images short (headline + subtitle at most)
• Use large enough font to be legible in thumbnails
• Don't duplicate the entire og:title on the image

Image Format and Size

• Recommended formats: PNG (crisp text) or JPEG (photos)
• File size: Keep under 1 MB to avoid crawl timeouts
• Protocol: Must use HTTPS — HTTP images may not load on some platforms

Platform-Specific Tips

Facebook

• Use Facebook Sharing Debugger to force-refresh cache
• Facebook caches OG data for up to 24 hours — manual purge required after updates
• Providing og:image:width and og:image:height speeds up first-share rendering

Twitter/X

• twitter:card tag is required — without it, no rich media card appears
• summary_large_image is best for most cases
• Use Twitter Card Validator to preview

LinkedIn

• LinkedIn doesn't display og:description, only image and title
• Use LinkedIn Post Inspector to check and refresh cache
• Image recommendation: 1200×627 for best display

WeChat

• WeChat shows OG images as small square thumbnails beside the title
• Focus your messaging in the title — descriptions usually don't appear
• Share appearance differs between group chats and Moments

Pinterest

• Pinterest is image-centric — OG image quality directly impacts Pin performance
• Use 2:3 portrait images (1000×1500) for best feed display
• Rich Pins can extract additional metadata

Discord

• Discord uses a purple (#5865F2) left-border embed card
• Supports og:site_name as a small header above the title
• Images crop to 16:9

Privacy Advantage

This tool is purely frontend — all data processing happens in your browser:

• Text you enter never leaves your machine
• Uploaded images use browser-local blob URLs, never uploaded to any cloud
• No registration, no login, no cookie tracking
• Your content is never accessed by any third party

This is especially valuable for unpublished pages or projects with sensitive content — you can safely preview and debug OG tags before going live.