Open Graph Preview Tool

Social Media Preview Editor

Edit your Open Graph and Twitter Card meta tags, then see exactly how your link will appear on Facebook, X (Twitter), and LinkedIn — all at once.

Meta Tag Editor

Live Previews

Facebook

No image set

EXAMPLE.COM

Your Page Title

A brief description of your page content...

X (Twitter)

No image set

example.com

Your Page Title

A brief description of your page content...

No image set

Your Page Title

example.com

Generated Meta Tags

Open Graph Best Practices

Title

40-60 characters. Front-load the most important words. Avoid clickbait.

Description

100-160 characters. Summarize the page value concisely. Facebook truncates at ~155.

Image

1200 x 630px minimum. Use high contrast, avoid small text. JPEG or PNG under 5 MB.

URL

Use clean canonical URLs. Strip UTM params, session IDs, and trailing slashes.

After updating tags, use Facebook's Sharing Debugger to clear their cache and verify your changes.

About Open Graph Tags

Open Graph is a protocol created by Facebook in 2010 that standardizes how web pages are represented when shared on social media. By adding Open Graph meta tags to your HTML head section, you control exactly what title, description, and image appear when someone shares your link on Facebook, LinkedIn, WhatsApp, or Twitter.

Without Open Graph tags, social platforms attempt to extract content from your page automatically — often with poor results like generic images, truncated text, or missing information. Open Graph tags ensure your shared links look professional and compelling, which directly increases click-through rates and engagement.

Essential Open Graph Tags Explained

og:title

The title that appears in the social media card. Keep it between 40-60 characters for optimal display across all platforms. Facebook truncates titles around 60 characters, LinkedIn around 70. Front-load your most important keywords and avoid clickbait — social users can spot it immediately.

og:description

The description text shown below the title. Aim for 100-160 characters. Facebook typically shows about 155 characters, Twitter/X shows 125-160 depending on card type. Write a clear, compelling summary that gives people a reason to click. Avoid generic phrases like "Click here to learn more."

og:image

The preview image URL. This is arguably the most important Open Graph tag because images dominate social feeds. Use 1200 x 630 pixels (1.91:1 aspect ratio) in JPEG or PNG format. Keep file size under 5 MB. Ensure important visual elements are centered since some platforms crop edges differently. Use high contrast and avoid small text that becomes unreadable at thumbnail size.

og:url

The canonical URL of your page. This should be the clean, permanent URL without session IDs, tracking parameters, or fragments. Use the same URL format across all your OG tags and match your canonical link tag. Consistency prevents social platforms from treating the same content as different URLs.

og:type

The type of content. Use "website" for most pages including landing pages and homepages. Use "article" for blog posts and news content. Use "product" for ecommerce product pages. Other types include "video.other", "music.song", and "book". Most sites only need "website" and "article".

Twitter Card Tags

Twitter (now X) uses its own meta tags for previews, though it falls back to Open Graph tags if Twitter Card tags are missing. For maximum control over how your links appear on X, set both Open Graph and Twitter Card tags.

twitter:card

Controls the card format. Use "summary_large_image" for a large landscape image above the title and description — recommended for most content. Use "summary" for a small square thumbnail next to text — good for profiles or text-heavy content. If you have a compelling image, always choose summary_large_image to maximize visual impact.

twitter:title, twitter:description, twitter:image

These mirror the Open Graph equivalents. If you want the same preview on Twitter and other platforms, you can omit these and Twitter will use your og:title, og:description, and og:image instead. Set them explicitly only if you want Twitter-specific content.

How to Add Open Graph Tags to Your Site

Copy the generated meta tags from this tool and paste them inside the <head> section of your HTML, before the closing </head> tag. The tags must be in the head section to work — they have no effect in the body.

Static HTML

<head>
  <title>My Page Title</title>
  <meta property="og:title" content="My Page Title">
  <meta property="og:description" content="A compelling description">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:type" content="website">
</head>

WordPress

Use an SEO plugin like Yoast SEO, Rank Math, or All in One SEO. These plugins provide fields for Open Graph tags in the page editor. They automatically generate the correct meta tags without requiring code changes. Most plugins also provide social preview directly in the editor.

Next.js

Use the Head component from next/head to add meta tags to each page:

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <meta property="og:title" content="My Page" />
        <meta property="og:description" content="Description" />
        <meta property="og:image" content="/og-image.jpg" />
      </Head>
      {/* Page content */}
    </>
  );
}

React

Use React Helmet to manage head tags in React apps:

import { Helmet } from 'react-helmet';

function Page() {
  return (
    <Helmet>
      <meta property="og:title" content="My Page" />
      <meta property="og:description" content="Description" />
    </Helmet>
  );
}

Common Open Graph Mistakes

No og:image set: Images dramatically increase social engagement. A post without an image gets far fewer clicks than one with a compelling visual. Always provide an og:image.
Wrong image size: Images smaller than 600 x 315 pixels may not display properly. Facebook recommends 1200 x 630 as the minimum for high-quality display. Images larger than 8 MB may fail to load.
Title too long: Titles over 60 characters get truncated on most platforms. Your key message may be cut off with an ellipsis.
Description too short: A 20-character description wastes valuable space. Aim for at least 100 characters to give users context about why they should click.
Using relative image URLs: og:image must be an absolute URL starting with https://. Relative paths like /images/og.jpg will not work.
Same tags on every page: Each page needs unique og:title, og:description, and ideally og:image. Generic tags reduce click-through rates and make all your pages look identical when shared.
Not testing before sharing: Social platforms cache Open Graph data. Test your tags with this preview tool and Facebook's Sharing Debugger before widely sharing a link.
Forgetting og:url: The og:url tag helps platforms deduplicate content. Always set it to the canonical page URL to avoid social share counts being split across URL variations.

How to Update Cached Open Graph Tags

Social platforms cache Open Graph data to improve performance. If you update your OG tags and the old preview still appears, the platform is showing cached data. Here is how to force each platform to refresh:

Facebook / Meta

Use the Facebook Sharing Debugger. Paste your URL and click "Debug". Then click "Scrape Again" to clear the cache and fetch fresh Open Graph data. Facebook caches OG tags for several days by default.

Twitter / X

Twitter does not provide a public cache-clearing tool. Changes typically propagate within a few hours. You can force a refresh by adding a unique query parameter to your URL (like ?v=2) when sharing, which tricks Twitter into treating it as a new URL.

LinkedIn's cache can persist for up to 7 days. Use the LinkedIn Post Inspector to inspect and refresh cached data. Like Twitter, adding a query parameter can force a refresh.

WhatsApp does not offer a cache-clearing tool. Cached previews typically update within 24 hours. For immediate testing, send the link in a message and check the preview.

Frequently Asked Questions

What is Open Graph?

Open Graph is a protocol developed by Facebook that controls how URLs are displayed when shared on social media platforms. By adding Open Graph meta tags to your page's HTML head, you can specify the title, description, image, and other metadata that appears in social media previews. Without OG tags, social platforms will guess what to show, often with poor results.

What are the most important Open Graph tags?

The essential Open Graph tags are: og:title (the title shown in social previews), og:description (the description text), og:image (the preview image URL), og:url (the canonical page URL), and og:type (usually "website" or "article"). These five tags control how your content appears on Facebook, LinkedIn, WhatsApp, and most other social platforms.

What image size should I use for og:image?

The recommended size for Open Graph images is 1200 x 630 pixels (aspect ratio 1.91:1). This size works well across Facebook, Twitter, LinkedIn, and WhatsApp. Use JPEG or PNG format, keep file size under 5 MB for fast loading, and ensure important content is centered since some platforms may crop edges differently.

What is the difference between Open Graph and Twitter Cards?

Open Graph tags (og:title, og:description, og:image) work on Facebook, LinkedIn, WhatsApp, and most social platforms. Twitter Card tags (twitter:card, twitter:title, twitter:image) are specific to X (formerly Twitter). If you only set Open Graph tags, X will fall back to those. For maximum control, set both. Twitter Card lets you specify a card format like "summary_large_image" or "summary".

How do I test my Open Graph tags?

Use this Open Graph Preview tool to see how your tags will render on different platforms. After adding tags to your site, use Facebook's Sharing Debugger (developers.facebook.com/tools/debug/) to clear Facebook's cache and verify your changes. For Twitter, use the Twitter Card Validator. LinkedIn does not provide a public validator but respects Open Graph tags.

Why is my social preview not updating?

Social platforms cache Open Graph data aggressively. Facebook can cache OG tags for several days. To force an update, use Facebook's Sharing Debugger and click "Scrape Again". Twitter's cache updates automatically but may take a few hours. LinkedIn's cache can persist for up to 7 days — try adding a query parameter to the URL (like ?v=2) to force a refresh.

Do I need different images for each social platform?

No, one image works for all platforms. Use 1200 x 630 pixels for the og:image and it will display well on Facebook, LinkedIn, and Twitter (with summary_large_image card). If you want a different image for Twitter, set twitter:image separately. Keep important content centered to avoid edge cropping on different platforms.

What is twitter:card and which should I use?

The twitter:card meta tag controls the format of Twitter/X previews. Use "summary_large_image" for a large landscape image above the text (recommended for most content). Use "summary" for a small square thumbnail with text (good for profiles or minimal content). If you have a compelling image, always choose summary_large_image.

Can Open Graph tags hurt my SEO?

No. Open Graph tags do not directly affect search engine rankings. They are ignored by Google's ranking algorithm. However, they indirectly help SEO by increasing social shares and click-through rates. When your content looks better on social media, more people click and share it, which can lead to more backlinks and traffic — both positive SEO signals.

Does this tool store my data?

No. All processing happens in your browser using JavaScript. No data is sent to any server, no cookies are set, and nothing is stored. You can use the tool offline after the page loads. Your Open Graph data stays private on your device.

Privacy & Limitations

Client-side only. No data is sent to any server. No cookies, no tracking of any text you enter.
Preview is approximate. The social media previews show how your tags may appear. Actual rendering varies by platform, device, and app version. Always test with real shares on each platform.
No image validation. This tool does not verify that your og:image URL exists or loads correctly. Test your image URLs separately to ensure they work.
Cache behavior varies. Social platforms cache OG data for different durations. Use platform-specific debugger tools to force cache refreshes.

Related Tools

Meta Tag Generator -- Generate common SEO meta tags for a page
Color Contrast Checker -- Check contrast ratio between two colors
Spacing System Calculator -- Generate design system spacing scales with visual preview and export options
UTM Link Builder -- Build URLs with UTM tracking parameters

Related Tools

View all tools

UTM Link Builder

Build URLs with UTM tracking parameters

User-Agent Parser

Parse a user-agent string for quick details

URL Parser

Parse a URL into protocol, host, path, and query

Sitemap XML Generator

Generate a simple sitemap.xml from a list of URLs

Robots.txt Generator

Generate a robots.txt file with common rules

Meta Tag Generator

Generate common SEO meta tags for a page

Open Graph Preview FAQ

What is Open Graph?

What are the most important Open Graph tags?

The essential Open Graph tags are: og:title (the title shown in social previews), og:description (the description text), og:image (the preview image URL), og:url (the canonical page URL), and og:type (usually 'website' or 'article'). These five tags control how your content appears on Facebook, LinkedIn, WhatsApp, and most other social platforms.

What image size should I use for og:image?

What is the difference between Open Graph and Twitter Cards?

Open Graph tags (og:title, og:description, og:image) work on Facebook, LinkedIn, WhatsApp, and most social platforms. Twitter Card tags (twitter:card, twitter:title, twitter:image) are specific to X (formerly Twitter). If you only set Open Graph tags, X will fall back to those. For maximum control, set both. Twitter Card lets you specify a card format like 'summary_large_image' or 'summary'.

How do I test my Open Graph tags?

Why is my social preview not updating?

Social platforms cache Open Graph data aggressively. Facebook can cache OG tags for several days. To force an update, use Facebook's Sharing Debugger and click 'Scrape Again'. Twitter's cache updates automatically but may take a few hours. LinkedIn's cache can persist for up to 7 days; try adding a query parameter to the URL (like ?v=2) to force a refresh.

Do I need different images for each social platform?

No, one image works for all platforms. Use 1200 x 630 pixels for the og:image and it will display well on Facebook, LinkedIn, and Twitter (with summary_large_image card). If you want a different image for Twitter, set twitter:image separately. Keep important content centered to avoid edge cropping on different platforms.

What is twitter:card and which should I use?

The twitter:card meta tag controls the format of Twitter/X previews. Use 'summary_large_image' for a large landscape image above the text (recommended for most content). Use 'summary' for a small square thumbnail with text (good for profiles or minimal content). If you have a compelling image, always choose summary_large_image.

Can Open Graph tags hurt my SEO?

Does this tool store my data?