Open Graph Checker

See exactly how your links look when shared on Facebook, Twitter/X, LinkedIn, and Slack

Want your shared links to always look great?

Smmall Cloud automatically generates beautiful link previews for every file you share — PDFs, videos, images, and more. No OG tags to configure.

Try Smmall Cloud Free

What Are Open Graph Tags?

Open Graph (OG) is a protocol created by Facebook in 2010 that lets any web page become a rich object in a social graph. When you add Open Graph meta tags to your HTML, you control exactly how your page appears when someone shares it on Facebook, LinkedIn, Slack, Discord, and many other platforms.

Without Open Graph tags, platforms try to guess your page's title, description, and image — and they often get it wrong. A missing or incorrect preview image, a truncated title, or a generic description can make your links look unprofessional and reduce clicks significantly.

The Open Graph protocol is not limited to social media. Messaging apps like Slack, iMessage, WhatsApp, and Discord all read OG tags to generate link previews. Search engines also use them to understand your content better, even if they don't directly impact rankings.

Essential Open Graph Tags

These are the most important Open Graph meta tags every page should include:

Tag	Description
og:title	The title of your page as it should appear in link previews. Keep it under 60 characters.
og:description	A brief summary of your page content. Aim for 155 characters or fewer.
og:image	The preview image URL. Use 1200×630px for best results across platforms. Must be an absolute URL.
og:url	The canonical URL of your page. Helps platforms consolidate likes and shares.
og:type	The type of content — usually "website" for homepages or "article" for blog posts.
og:site_name	The name of your overall site (e.g., "Smmall Cloud"). Shown above the title on some platforms.

Common Open Graph Mistakes

Missing og:image — This is the most impactful tag. Without it, platforms show a generic placeholder or grab a random image from your page.
Using relative URLs — All OG tag values must use absolute URLs starting with https://. Relative paths like /images/preview.jpg won't work.
Wrong image dimensions — Images smaller than 200×200px may be ignored. Aim for 1200×630px for optimal display.
Missing twitter:card tag — Without this tag, Twitter/X won't display a rich preview even if your OG tags are perfect. Add twitter:card with a value of "summary" or "summary_large_image".
Duplicate or conflicting tags — Having multiple og:title or og:image tags confuses crawlers. Each OG property should appear exactly once.
Not updating cached previews — Facebook and LinkedIn cache link previews aggressively. After updating your OG tags, use their respective debugger tools to force a cache refresh.

How to Add Open Graph Tags

Add Open Graph meta tags inside the ‹head› section of your HTML. Here is an example with the essential tags:

<head>
  <meta property="og:title" content="Your Page Title" />
  <meta property="og:description" content="A brief description of your page." />
  <meta property="og:image" content="https://yoursite.com/image.jpg" />
  <meta property="og:url" content="https://yoursite.com/page" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Your Site Name" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

Platform-Specific Behavior

Different platforms read and display Open Graph tags in slightly different ways:

Facebook

Uses og:tags as the primary source. Caches previews aggressively; use the Facebook Sharing Debugger to refresh. Requires images to be at least 200×200px, recommends 1200×630px.

Twitter/X

Prefers twitter:card, twitter:title, twitter:image, and twitter:description tags but falls back to OG tags if they are missing. Requires a twitter:card tag to enable rich previews.

Reads OG tags directly. Very aggressive caching; use the LinkedIn Post Inspector to force a refresh. Truncates og:title at about 70 characters.

Slack

Displays OG previews as an indented block with the site name, title, description, and image. Respects og:site_name for the top line of the preview.

Discord

Renders OG previews as an embed card with a colored left border. Supports og:video for inline video embeds. Very responsive to og:color theme meta tags.

Frequently Asked Questions

What are Open Graph tags?

Open Graph (OG) tags are meta tags in your HTML that control how your content appears when shared on social media platforms like Facebook, LinkedIn, Slack, and Discord. They let you specify a title, description, and preview image for each page.

Why do my shared links look wrong on social media?

If your links show the wrong image, title, or description when shared, it usually means your Open Graph tags are missing or incorrect. Use this checker to see exactly what tags your page has and what platforms will display.

What is the difference between OG tags and Twitter Cards?

Open Graph tags (og:title, og:description, og:image) are used by Facebook, LinkedIn, and most platforms. Twitter/X uses its own twitter:card, twitter:title, and twitter:image tags — but will fall back to OG tags if Twitter-specific tags are missing.

What is the recommended og:image size?

The recommended size for og:image is 1200×630 pixels. This works well across Facebook, LinkedIn, Twitter, and Slack. Images should be under 8MB and in JPG or PNG format.

How do I fix "Missing og:image" warnings?

Add a ‹meta property="og:image" content="https://yoursite.com/image.jpg" /› tag in the ‹head› of your HTML. The image URL must be absolute (starting with https://). Relative paths won't work.

Do Open Graph tags affect SEO?

OG tags don't directly affect search rankings, but they significantly impact click-through rates from social media. A compelling preview image and title can dramatically increase engagement when your content is shared.

Features