OG Preview Checker

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

Enter your URL

Paste the URL you want to preview:

https://yourdomain.com/page

Click Check

The tool fetches your page and extracts OG tags.

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

Platform	Recommended Size	Min Size
Twitter/X	1200 x 628 px	600 x 314 px
Facebook	1200 x 630 px	600 x 315 px
LinkedIn	1200 x 627 px	552 x 289 px
Discord	1200 x 630 px	256 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

Type	Description
`summary`	Small square image with title/description
`summary_large_image`	Large 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

Image not showing

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.

Old preview showing

Cause: Platforms cache OG dataFix: Use platform debuggers to clear cache:

Wrong title/description

Cause: OG tags not set or overriddenFix: Ensure OG tags are in <head> and take priority over <title>.

Testing After Changes

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

Bot Crawler Test

Test search engine visibility

Meta Tags Checker

Analyze all meta tags

Dashboard

Free Tools

OG Preview Checker

Overview

Try It Free

Why Open Graph Tags Matter

How to Use

Required Open Graph Tags

OG Image Guidelines

Best Practices

Twitter-Specific Tags

Card Types

Implementing OG Tags

React (React Helmet)

Dynamic OG Images

Common Issues

Testing After Changes

Bot Crawler Test

Meta Tags Checker

​Overview

Try It Free

​Why Open Graph Tags Matter

​How to Use

​Required Open Graph Tags

​OG Image Guidelines

​Best Practices

​Twitter-Specific Tags

​Card Types

​Implementing OG Tags

​React (React Helmet)

​Dynamic OG Images

​Common Issues

​Testing After Changes

Bot Crawler Test

Meta Tags Checker

Overview

Why Open Graph Tags Matter

How to Use

Required Open Graph Tags

OG Image Guidelines

Best Practices

Twitter-Specific Tags

Card Types

Implementing OG Tags

React (React Helmet)

Dynamic OG Images

Common Issues

Testing After Changes