DevHive

Open Graph Previewer

Preview OG tags for social media sharing

30/60
1200×630px recommended
94/155
Facebook / LinkedIn
devhive.tools
DevHive: 94+ Free Online Tools
PDF tools, converters, calculators, developer utilities and more. All free, no login required.
Twitter / X
DevHive: 94+ Free Online Tools
PDF tools, converters, calculators, developer utilities and more. All free, no login required.
devhive.tools
<!-- Open Graph -->
<meta property="og:title" content="DevHive: 94+ Free Online Tools" />
<meta property="og:description" content="PDF tools, converters, calculators, developer utilities and more. All free, no login required." />
<meta property="og:image" content="https://devhive.tools/og-image.png" />
<meta property="og:url" content="https://devhive.tools" />
<meta property="og:site_name" content="DevHive" />
<meta property="og:type" content="website" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="DevHive: 94+ Free Online Tools" />
<meta name="twitter:description" content="PDF tools, converters, calculators, developer utilities and more. All free, no login required." />
<meta name="twitter:image" content="https://devhive.tools/og-image.png" />

How to Use Open Graph Previewer

  1. 1

    Enter your page title, description, image URL, and site URL.

  2. 2

    The tool shows a live preview of how your page will appear on Facebook, LinkedIn, and Twitter.

  3. 3

    Adjust your text until the preview looks right.

  4. 4

    Copy the generated meta tags and add them to your page's <head> section.

About Open Graph Previewer

Preview and generate Open Graph meta tags. See how your page looks when shared on Facebook, Twitter/X and LinkedIn.

Best Use Cases

  • •Previewing how a page looks when shared on Facebook or LinkedIn
  • •Testing Twitter Card tags before publishing a blog post
  • •Verifying Open Graph tags are set correctly during development
  • •Checking that share images and descriptions render as expected
  • •Debugging social media preview issues for marketing campaigns

Examples

Blog preview

Enter your blog post URL. See exactly how the title, description, and image will appear when shared on social media.

Tag check

Enter a URL to verify all og:title, og:description, og:image, and twitter:card tags are present and correct.

Image test

Check if your OG image meets recommended dimensions (1200x630) and displays without cropping.

Common Mistakes to Avoid

  • !Forgetting that social platforms cache OG data and may show old previews
  • !Using images smaller than 1200x630 which appear blurry or get cropped
  • !Not setting separate Twitter Card tags when a different preview is needed

Limitations

  • –Shows a simulated preview, not the exact rendering each platform uses
  • –Cannot clear cached OG data on Facebook or other platforms
  • –Requires the URL to be publicly accessible to fetch its meta tags

Frequently Asked Questions

What are Open Graph tags?

OG tags are HTML meta tags that control how your page appears when shared on social media - title, description, image, and URL.