Open Graph Image Preview

Preview how your page will look when shared on Twitter, Facebook, and LinkedIn. Enter OG meta tags to see live previews.

Twitter / XSummary with Large Image

FastDevKit
FastDevKit - Free Developer Tools
Free online developer tools. Fast, private, no signup required.

FacebookLink Preview

FastDevKit
FastDevKit - Free Developer Tools
Free online developer tools. Fast, private, no signup required.

LinkedInLink Preview

FastDevKit - Free Developer Tools
FastDevKit

Recommended OG Meta Tags

<meta property="og:title" content="FastDevKit - Free Developer Tools" />
<meta property="og:description" content="Free online developer tools. Fast, private, no signup required." />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://fastdevkit.com" />
<meta property="og:site_name" content="FastDevKit" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="FastDevKit - Free Developer Tools" />
<meta name="twitter:description" content="Free online developer tools. Fast, private, no signup required." />
<meta name="twitter:image" content="https://example.com/og.png" />

How to Use the OG Image Preview

  1. 1.Select Manual Input mode and fill in the OG tag fields (title, description, image URL).
  2. 2.See live previews of how your page will appear on Twitter, Facebook, and LinkedIn.
  3. 3.Adjust the values until you are satisfied with the preview across all platforms.
  4. 4.Copy the meta tag snippet from the bottom section into your HTML .

Frequently Asked Questions

What is Open Graph?

Open Graph is a protocol created by Facebook that lets you control how your web pages appear when shared on social media. It uses meta tags in your HTML <head> to define titles, descriptions, and images.

What is the recommended OG image size?

For best results across platforms, use 1200x630 pixels. Twitter also supports 1200x600. Use a 1.91:1 aspect ratio for universal compatibility.

Why does my image not appear in the preview?

The image URL must be publicly accessible (not localhost). Also check for CORS restrictions. Some CDNs require specific headers to allow image embedding.

What is the difference between og:image and twitter:image?

og:image is the standard Open Graph tag used by Facebook, LinkedIn, and others. twitter:image is specific to Twitter. If twitter:image is not set, Twitter falls back to og:image.