Skip to main content

​
Overview

The OG Preview Checker shows you exactly how your links will appear when shared on social media platforms like Twitter/X, Facebook, LinkedIn, and Discord.

Try It Free

Test your site at hadoseo.com/free-og-preview-checker

​
Why Open Graph Tags Matter

When you share a link on social media, platforms look for Open Graph (OG) tags to create a rich preview. Without them:
  • ❌ Links show as plain text URLs
  • ❌ No preview image
  • ❌ Generic or missing title/description
  • ❌ Poor engagement and click-through rates

​
How to Use

1

Enter your URL

Paste the URL you want to preview:
https://yourdomain.com/page
2

Click Check

The tool fetches your page and extracts OG tags.
3

Review Previews

See mockups for:
  • Twitter/X
  • Facebook
  • LinkedIn
  • Discord

​
Required Open Graph Tags

Add these to every page’s <head>: 
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling description of this page">
<meta property="og:image" content="https://yourdomain.com/og-image.png">
<meta property="og:url" content="https://yourdomain.com/page">
<meta property="og:type" content="website">

​
OG Image Guidelines

PlatformRecommended SizeMin Size
Twitter/X1200 x 628 px600 x 314 px
Facebook1200 x 630 px600 x 315 px
LinkedIn1200 x 627 px552 x 289 px
Discord1200 x 630 px256 x 256 px

​
Best Practices

  • Use 1200 x 630 pixels to work on all platforms
  • Keep file size under 8MB
  • Use PNG or JPG format
  • Include readable text (but not too much)
  • Use absolute URLs (not relative)

​
Twitter-Specific Tags

For better Twitter cards: 
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Description for Twitter">
<meta name="twitter:image" content="https://yourdomain.com/twitter-image.png">

​
Card Types

TypeDescription
summarySmall square image with title/description
summary_large_imageLarge horizontal image (recommended)

​
Implementing OG Tags

​
React (React Helmet)

import { Helmet } from 'react-helmet-async';

function MyPage() {
  return (
    <Helmet>
      <meta property="og:title" content="My Page Title" />
      <meta property="og:description" content="Page description" />
      <meta property="og:image" content="https://mysite.com/og.png" />
      <meta property="og:url" content="https://mysite.com/page" />
      <meta property="og:type" content="website" />
      <meta name="twitter:card" content="summary_large_image" />
    </Helmet>
  );
}

​
Dynamic OG Images

For unique pages (blog posts, products): 
function BlogPost({ post }) {
  return (
    <Helmet>
      <meta property="og:title" content={post.title} />
      <meta property="og:description" content={post.excerpt} />
      <meta property="og:image" content={post.featuredImage} />
      <meta property="og:url" content={`https://mysite.com/blog/${post.slug}`} />
    </Helmet>
  );
}

​
Common Issues

Causes:
  • Relative URL instead of absolute
  • Image too small
  • Image URL returns 404
  • Image blocked by robots.txt
Fix: Use absolute URLs starting with https:// and verify image accessibility.
Cause: Platforms cache OG dataFix: Use platform debuggers to clear cache:
Cause: OG tags not set or overriddenFix: Ensure OG tags are in <head> and take priority over <title>.

​
Testing After Changes

  1. Update your OG tags
  2. Trigger a recrawl in Hado SEO dashboard
  3. Clear platform caches using debugger tools
  4. Re-test with OG Preview Checker

Bot Crawler Test

Test search engine visibility

Meta Tags Checker

Analyze all meta tags