Open Graph Preview

Preview how your page looks when shared on Facebook.

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

How to use Open Graph Preview

1

Paste Your URL into the Input Field

Copy your webpage URL and paste it into the text input box labeled 'Enter URL'. The field accepts full URLs starting with http:// or https://. Click inside the white input field at the top of the page and use Ctrl+V (or Cmd+V on Mac) to paste your link.

2

Click the Preview Button

Press the blue 'Preview' button located directly below the URL input field. The tool will fetch your page's meta tags and Open Graph data in real-time. Wait 2-3 seconds for the preview to load and display.

3

Review Your Facebook Preview Card

View the live preview on the right panel showing your page's title, description, image, and URL exactly as Facebook will display it. Check the og:title, og:description, og:image, and og:url tags in the 'Meta Tags' section below the preview.

4

Optimize Your Meta Tags if Needed

If the preview looks incorrect, return to your website's HTML <head> section and update your Open Graph meta tags. Add or edit tags like <meta property='og:title' content='Your Title'>. Re-paste your URL and click Preview again to confirm changes.

Related Tools

Open Graph preview tool: see how your links look before sharing

Open Graph preview tool: see how your links look before sharing

An Open Graph preview tool fetches a URL's OG tags and shows you exactly how the link will appear when shared on Facebook, Twitter/X, LinkedIn, and WhatsApp, before you post it publicly. Try the free ToolHQ Open Graph preview to check any page instantly.

An Open Graph preview tool is a developer and marketing utility that reads the Open Graph meta tags from any URL and renders how the social share card will look on each major platform, including the title, description, and image.

Sharing a link without checking it first is a gamble. If your Open Graph tags are missing, have the wrong image dimensions, or contain truncated text, every share on social media looks broken or generic. The difference between a well-configured OG card and a bare link preview can be the difference between a post someone clicks and one they scroll past.

Key takeaways

  • The tool fetches live OG tags from any URL, showing what social platforms actually see right now
  • Previews are shown side by side for Facebook, Twitter/X, LinkedIn, and WhatsApp
  • Catches common issues: missing OG image, wrong aspect ratio, truncated title or description
  • Only the URL you enter is fetched to read its Open Graph tags, no personal data is stored
  • Free, instant, no account required

What Open Graph is and how the preview works

Open Graph is a protocol created by Facebook in 2010 that standardizes how web pages represent themselves when shared on social media. A page with correct OG tags controls exactly what appears in a social share card: the title, description, image, and URL shown in the preview.

The most important Open Graph tags are:

  • og:title: the headline in the share card (different from the page's <title> tag if needed)
  • og:description: the 2-3 sentence summary below the headline
  • og:image: the image URL to display in the card (recommended: 1200x630 pixels)
  • og:url: the canonical URL the card links to
  • og:type: typically "website" or "article"

When you share a URL on Facebook, LinkedIn, or WhatsApp, those platforms send a crawler to your URL, read the OG tags, and render a preview card using those values. Twitter/X uses a separate but parallel system called Twitter Cards, with twitter:title, twitter:description, and twitter:image properties. If both sets are present, each platform uses its own tags. If only OG tags are present, Twitter/X falls back to those.

The preview tool does what social platforms do: it fetches the URL, reads both OG and Twitter Card meta tags, and renders how the card will actually look. Because it fetches the live URL, it always reflects the current state of the page, including any recent changes to tags.

The official Open Graph protocol documentation defines all supported properties and the rules for image dimensions and tag formats.


When you need an Open Graph preview

Before launching a new page. You write the content, add meta tags, and then publish. Without previewing, you find out about broken share cards only after your first post goes out. The preview tool is the last check before launch.

After updating meta tags. You change the OG image or rewrite the description. Social platforms cache share previews, but the preview tool fetches fresh tags directly, confirming that your change is live.

When troubleshooting why a share card looks wrong. If a shared link shows the wrong image or a generic site description instead of the page-specific one, the preview tool tells you exactly what OG tags are (or are not) present on the page.

When checking third-party pages. Marketers checking competitor content, editors reviewing articles, or agencies auditing client sites all use OG preview tools to quickly understand the social share configuration of any public URL.

Mini-story: Priya, a 30-year-old content marketing manager at a SaaS company in San Francisco, was about to promote a new product landing page with a paid social campaign. The designer had used a long, horizontal hero image for the page. She ran the page URL through the Open Graph preview tool and discovered that the og:image was 1920x600 pixels, an aspect ratio that Facebook crops aggressively. The card showed a sliver of the image with the headline cropped out. She flagged it to the designer before the campaign launched. They uploaded a 1200x630 cropped version of the image and confirmed the fix with a second preview. The campaign launched with the correct card.

Preview your Open Graph tags now


How to use the Open Graph preview tool: step by step

  1. Enter the URL. Paste the full URL of the page you want to check, including https://. The tool accepts any publicly accessible URL.

  2. Fetch the tags. The tool sends a request to the URL, reads the <head> section, and extracts all OG and Twitter Card meta tags.

  3. Review the platform previews. The tool renders a preview card as it would appear on Facebook, Twitter/X, LinkedIn, and WhatsApp. Each platform has different card dimensions and text truncation rules, so the previews may differ slightly.

  4. Check the raw tag values. Below the visual previews, the tool lists each detected OG and Twitter tag and its value. This lets you spot missing tags, wrong URLs, or oversized image files.

  5. Fix any issues and re-check. Update your meta tags in the page's HTML (use the meta tag generator if you need to regenerate them), publish the change, and run the URL through the preview tool again to confirm the update is live.


Common Open Graph issues and how to fix them

Missing OG image. This is the most common issue. Without og:image, social platforms either show no image or pull a random image from the page. Add an explicit og:image tag pointing to a properly sized image (1200x630 pixels recommended for most platforms).

Wrong image dimensions. Facebook and LinkedIn prefer 1200x630. Twitter/X large cards use 1200x675. Images that are too small are displayed with white bars or stretched. Use the social media image resizer to create correctly sized versions for each platform.

Title or description too long. Facebook truncates OG titles at roughly 60-80 characters in most card formats. Descriptions get cut off at around 200 characters depending on the layout. Write OG titles in the 50-70 character range and descriptions under 200 characters.

OG URL mismatch. The og:url tag should match the canonical URL of the page. If it points to a different URL, the share card links to the wrong destination.

Stale cache on social platforms. After updating your OG tags, Facebook and LinkedIn cache the old preview for a period. Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a cache refresh. The ToolHQ preview tool always fetches fresh tags directly from the page.

Mini-story: Ben, a 36-year-old developer at a media company in New York, was investigating why shares of a popular article kept showing an old thumbnail image. The article had been updated with a new hero image weeks earlier. He ran the URL through the Open Graph preview tool and confirmed the og:image tag on the live page pointed to the new image. The issue was a cached preview on Facebook, not the tags themselves. He used Facebook's Sharing Debugger to force a refresh, and the correct image started appearing within minutes.

After your OG tags are confirmed, the UTM builder helps you add tracking parameters to the links you share so you can measure exactly how much traffic each social post drives.


Frequently asked questions

What are Open Graph tags?

Open Graph tags are HTML meta elements in a page's <head> that tell social platforms what title, description, and image to show when the page is shared. They follow the Open Graph protocol originally developed by Facebook.

Why does my shared link show the wrong image?

The most likely cause is either a missing og:image tag, an image URL that is not publicly accessible, or a cached preview on the social platform. The preview tool fetches live tags directly, helping you identify which issue applies.

Does the preview tool work for Twitter/X?

Yes. The tool reads Twitter Card tags (twitter:title, twitter:description, twitter:image) as well as standard Open Graph tags and renders how the card appears on Twitter/X.

What image size should I use for Open Graph?

The most widely compatible OG image size is 1200x630 pixels. This renders well on Facebook, LinkedIn, and WhatsApp. Twitter/X large summary cards use 1200x675 pixels. Using 1200x630 is a safe default that most platforms display without cropping.

How often does the tool update when I change tags?

The preview tool fetches the live URL every time you run it, so it always reflects the current state of your page's meta tags. Social platforms may serve cached previews for some time after changes.

Do Slack and Discord use Open Graph tags for link previews?

Yes. Both Slack and Discord fetch OG tags when a URL is posted in a channel and render a preview card using og:title, og:description, and og:image. The preview in Slack shows a compact card with the image on the right and title/description on the left. Discord renders a similar embed. For B2B content, Slack link previews can be as important as social media sharing since team members frequently share articles, tools, and resources in Slack channels. If your OG image is missing or the wrong aspect ratio, it affects how your content appears in Slack and Discord as well as traditional social platforms. Slack caches OG data and does not offer a public cache-clearing tool; updates typically appear within a few hours for most users.


The short version

The Open Graph preview tool takes any URL, fetches its live OG and Twitter Card tags, and shows side-by-side previews of how the link will appear when shared on Facebook, Twitter/X, LinkedIn, and WhatsApp. It is the quickest way to catch broken share cards, wrong images, or missing tags before they reach an audience.

ToolHQ's free version fetches real-time data, requires no account, and only uses the URL you enter to retrieve tag data.

Check your Open Graph tags now

If your OG tags need to be created or updated, the meta tag generator handles all tag types in one form. For campaign links shared on social media, the UTM builder adds tracking parameters so you can measure performance. Browse all developer tools on ToolHQ.