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 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 .

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.

🏷️

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 →

So funktioniert esPage 2

↩ Zurück zum Rechner

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

FAQ & DetailsPage 3

↩ Zurück zum Rechner

Generate Open Graph, Twitter Card, and JSON-LD tags. Everything runs locally; nothing is uploaded.

FreeToolHub Open Graph Meta Tag Generator is a free browser-based tool — generate Open Graph, Twitter Card, and JSON-LD tags. No signup, no upload; everything runs locally in your browser.

Über dieses Tool

Was ist dieses Tool?

Generieren Sie Open Graph-, Twitter Card- und JSON-LD-Tags. Vorschau auf Facebook, Twitter, LinkedIn und Discord. Kostenloser Meta-Tag-Generator — keine Anmeldung, 100% browserbasiert.

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

Was sind Open Graph Meta Tags?

Open Graph (OG) Meta-Tags sind HTML-Tags, die steuern, wie Ihre Webseite auf Social-Media-Plattformen wie Facebook, LinkedIn und Discord angezeigt wird, wenn sie geteilt wird. Sie definieren den Titel, die Beschreibung, das Bild und den Inhaltstyp, der in der Link-Vorschau-Karte angezeigt wird. Ohne OG-Tags raten Social-Plattformen, was angezeigt werden soll — oft mit dem Ergebnis fehlender Bilder, falscher Titel oder defekter Vorschauen.

Was sind Twitter Card Tags?

Twitter Card Meta-Tags sind ähnlich wie Open Graph, aber speziell für Twitter/X. Der häufigste Typ ist "summary_large_image", der ein großes Bild über dem Titel und der Beschreibung anzeigt. Twitter fällt auf OG-Tags zurück, wenn Twitter-spezifische Tags fehlen, aber das Hinzufügen gibt Ihnen mehr Kontrolle darüber, wie Ihr Inhalt in Tweets angezeigt wird.

Warum sollte ich JSON-LD strukturierte Daten verwenden?

JSON-LD ist Googles bevorzugtes Format für strukturierte Daten. Es hilft Suchmaschinen, Ihren Inhaltstyp (Artikel, Produkt, Website) zu verstehen und kann reiche Suchergebnisse aktivieren — wie Veröffentlichungsdaten von Artikeln, Produktpreise und Breadcrumb-Navigation. Dieses Tool generiert JSON-LD zusammen mit Ihren Meta-Tags und gibt Ihnen so sowohl Social-Media- als auch Suchmaschinenoptimierung in einem Schritt.

Häufige Fragen

Welche Bildgröße sollte ich für OG-Tags verwenden?

Die empfohlene OG-Bildgröße beträgt 1200×630 Pixel mit einem Seitenverhältnis von 1,91:1. Dies stellt sicher, dass Ihr Bild korrekt auf Facebook, Twitter, LinkedIn und Discord angezeigt wird. Bilder sollten unter 8 MB groß sein und im Format JPG, PNG oder WebP vorliegen. Kleinere Bilder können auf einigen Plattformen beschnitten oder verpixelt erscheinen.

Brauche ich sowohl OG-Tags als auch Twitter Card Tags?

Nicht strikt — Twitter fällt auf OG-Tags zurück, wenn Twitter-spezifische Tags fehlen. Das Hinzufügen von Twitter Card-Tags gibt Ihnen jedoch mehr Kontrolle und stellt eine optimale Anzeige sicher. Der Kartentyp "summary_large_image" wird für die meisten Inhalte empfohlen, da er eine große Bildvorschau zeigt.

Wo platziere ich diese Meta-Tags?

Platzieren Sie alle Meta-Tags im <head>-Abschnitt Ihres HTML-Dokuments. Wenn Sie ein Framework wie Next.js, React oder Vue verwenden, nutzen Sie das Head-Management-System des Frameworks (z. B. next/head, react-helmet), um die Tags dynamisch hinzuzufügen. Auch das JSON-LD-Script-Tag kommt in den <head>.

Wie teste ich meine OG-Tags?

Nach der Veröffentlichung verwenden Sie den Facebook Sharing Debugger (developers.facebook.com/tools/debug/), um Ihre OG-Tags zu überprüfen. Für Twitter verwenden Sie den Card Validator (cards-dev.twitter.com/validator). Die integrierte Vorschau dieses Tools gibt Ihnen eine gute Näherung, aber überprüfen Sie nach dem Deployment immer mit den offiziellen Tools.

Andere Namen für dieses Tool

Dieses Tool ist auch unter diesen Aufgaben bekannt — jeder Link öffnet dasselbe Tool mit einem fokussierten Leitfaden:

Open Graph meta tags generator — Open Graph Meta Tags Generator