🏷️

OG Meta Tag Generator & Social Preview

Generate Open Graph, Twitter Card, and JSON-LD tags. Preview on Facebook, Twitter, LinkedIn, and Discord.

100% LOCALOG + Twitter + JSON-LD4 platform previewsArticle & product typesHTML & JSON-LD output

Page Details

Title *

Description *

159 / 160 chars

URL *

OG Image URL *

OG Type

Twitter Card

Site Name

Locale

Twitter Handle

Social Preview

freetoolhub.org

OG Meta Tag Generator & Social Preview — FreeToolHub

Generate Open Graph, Twitter Card, and JSON-LD tags with live previews for Facebook, X/Twitter, LinkedIn, and Discord. …

<meta charset="UTF-8">
<title>OG Meta Tag Generator &amp; Social Preview — FreeToolHub</title>
<meta name="description" content="Generate Open Graph, Twitter Card, and JSON-LD tags with live previews for Facebook, X/Twitter, LinkedIn, and Discord. Free, browser-based, no signup required.">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://freetoolhub.org/og-meta-generator/">
<meta property="og:title" content="OG Meta Tag Generator &amp; Social Preview — FreeToolHub">
<meta property="og:description" content="Generate Open Graph, Twitter Card, and JSON-LD tags with live previews for Facebook, X/Twitter, LinkedIn, and Discord. Free, browser-based, no signup required.">
<meta property="og:image" content="https://freetoolhub.org/og-image.png">
<meta property="og:site_name" content="FreeToolHub">
<meta property="og:locale" content="en_US">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://freetoolhub.org/og-meta-generator/">
<meta name="twitter:title" content="OG Meta Tag Generator &amp; Social Preview — FreeToolHub">
<meta name="twitter:description" content="Generate Open Graph, Twitter Card, and JSON-LD tags with live previews for Facebook, X/Twitter, LinkedIn, and Discord. Free, browser-based, no signup required.">
<meta name="twitter:image" content="https://freetoolhub.org/og-image.png">
<meta name="twitter:site" content="@freetoolhub">
<meta name="twitter:creator" content="@freetoolhub">

Next Steps

Generate a QR code

Share your optimized page with a QR code for print or digital

QR code →

Data Source & Legal Disclaimer

Effective: 2026

Sources: Browser-side processing (no external API)

This tool runs 100% in your browser. All computation happens locally on your device — your input is never uploaded to any server. Results are for reference only.

See all data sources & update policy →

How a link becomes a rich card — illustrated

When you paste a link into a chat or post, the platform's crawler fetches the page, reads a handful of <meta> tags, and renders a card from them. Open Graph (og:*) is the standard most platforms read; Twitter Card (twitter:*) is the X-specific flavor; JSON-LD is structured data that Google and others use for richer search results. No tags = the crawler guesses a title and a random image, which is why so many shares look broken. If the title is missing or the image fails to load, the card falls back to a plain, un-clickable text link.

Share URL → crawl → render

og:title, og:description, og:image and og:url are the four tags almost every platform reads. The crawler caches the result, so edits to your page may need a re-scrape before the new card appears.

A shareable blog post

You want every link to your new article to open as a rich card.

Title under 60:Keep og:title ≤ 60 chars so it never truncates in cards
Description 120–160:og:description should say what the page delivers, not keywords
Image 1200×630:That is the 1.91:1 ratio every major platform crops to
Test before publish:Preview all four platforms in this tool before you ship the tags

↩ Back to generator

About this tool

What is this tool?

Generate Open Graph, Twitter Card, and JSON-LD tags. Preview on Facebook, Twitter, LinkedIn, Discord. Free, no signup, in-browser.

OG + Twitter + JSON-LD4 platform previewsArticle & product typesHTML & JSON-LD output

What Are Open Graph Meta Tags?

Open Graph (OG) meta tags are HTML tags that control how your webpage appears when shared on social media platforms like Facebook, LinkedIn, and Discord. They define the title, description, image, and type of content that appears in the link preview card. Without OG tags, social platforms guess what to show — often resulting in missing images, wrong titles, or broken previews.

What Are Twitter Card Tags?

Twitter Card meta tags are similar to Open Graph but specifically for Twitter/X. The most common type is "summary_large_image" which displays a large image above the title and description. Twitter falls back to OG tags if Twitter-specific tags are missing, but adding them gives you more control over how your content appears in tweets.

Why Use JSON-LD Structured Data?

JSON-LD is Google's preferred format for structured data. It helps search engines understand your content type (article, product, website) and can enable rich results in search — like article publish dates, product prices, and breadcrumb navigation. This tool generates JSON-LD alongside your meta tags, giving you both social media and search engine optimization in one step.

Frequently Asked Questions

What image size should I use for OG tags?

The recommended OG image size is 1200×630 pixels with a 1.91:1 aspect ratio. This ensures your image displays correctly on Facebook, Twitter, LinkedIn, and Discord. Images should be under 8MB and in JPG, PNG, or WebP format. Smaller images may appear cropped or pixelated on some platforms.

Do I need both OG tags and Twitter Card tags?

Not strictly — Twitter falls back to OG tags if Twitter-specific tags are missing. However, adding Twitter Card tags gives you more control and ensures optimal display. The "summary_large_image" card type is recommended for most content as it shows a large image preview.

Where do I put these meta tags?

Place all meta tags inside the <head> section of your HTML document. If you're using a framework like Next.js, React, or Vue, use the framework's head management system (e.g., next/head, react-helmet) to add the tags dynamically. The JSON-LD script tag also goes in the <head>.

How do I test my OG tags?

After publishing, use the Facebook Sharing Debugger (developers.facebook.com/tools/debug/) to verify your OG tags. For Twitter, use the Card Validator (cards-dev.twitter.com/validator). This tool's built-in preview gives you a good approximation, but always verify with the official tools after deployment.

Other names for this tool

This tool is also known by these tasks — each link opens the same tool with a focused guide:

Open Graph meta tags generator — Open Graph Meta Tags Generator