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 →

Comment ça marchePage 2

↩ Retour à la calculatrice

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 et détailsPage 3

↩ Retour à la calculatrice

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.

À propos de cet outil

Qu'est-ce que cet outil ?

Générez des balises Open Graph, Twitter Card et JSON-LD. Aperçu sur Facebook, Twitter, LinkedIn et Discord. Générateur de balises méta gratuit — pas d'inscription, 100 % basé sur le navigateur.

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

Qu'est-ce que les balises méta Open Graph ?

Les balises méta Open Graph (OG) sont des balises HTML qui contrôlent l'apparence de votre page web lorsqu'elle est partagée sur des plateformes de médias sociaux comme Facebook, LinkedIn et Discord. Elles définissent le titre, la description, l'image et le type de contenu qui apparaissent dans la carte d'aperçu du lien. Sans balises OG, les plateformes sociales devinent ce qui doit être affiché — ce qui entraîne souvent des images manquantes, des titres incorrects ou des aperçus cassés.

Qu'est-ce que les balises méta Twitter Card ?

Les balises méta Twitter Card sont similaires à Open Graph mais spécifiquement pour Twitter/X. Le type le plus courant est "summary_large_image" qui affiche une grande image au-dessus du titre et de la description. Twitter revient aux balises OG si les balises spécifiques à Twitter sont manquantes, mais les ajouter vous donne plus de contrôle sur l'apparence de votre contenu dans les tweets.

Pourquoi utiliser les données structurées JSON-LD ?

JSON-LD est le format préféré de Google pour les données structurées. Il aide les moteurs de recherche à comprendre le type de contenu (article, produit, site web) et peut activer des résultats riches dans les recherches — comme les dates de publication d'articles, les prix des produits et la navigation en fil d'Ariane. Cet outil génère du JSON-LD en même temps que vos balises méta, vous offrant à la fois l'optimisation pour les médias sociaux et les moteurs de recherche en une seule étape.

Questions fréquentes

Quelle taille d'image dois-je utiliser pour les balises OG ?

La taille d'image OG recommandée est de 1200×630 pixels avec un ratio d'aspect de 1,91:1. Cela garantit que votre image s'affiche correctement sur Facebook, Twitter, LinkedIn et Discord. Les images doivent être inférieures à 8 Mo et au format JPG, PNG ou WebP. Les images plus petites peuvent apparaître rognées ou pixelisées sur certaines plateformes.

Ai-je besoin à la fois des balises OG et des balises Twitter Card ?

Pas strictement — Twitter revient aux balises OG si les balises spécifiques à Twitter sont manquantes. Cependant, ajouter des balises Twitter Card vous donne plus de contrôle et garantit un affichage optimal. Le type de carte "summary_large_image" est recommandé pour la plupart des contenus car il montre un aperçu d'image grand format.

Où dois-je placer ces balises méta ?

Placez toutes les balises méta à l'intérieur de la section <head> de votre document HTML. Si vous utilisez un framework comme Next.js, React ou Vue, utilisez le système de gestion de head du framework (par exemple, next/head, react-helmet) pour ajouter les balises dynamiquement. La balise de script JSON-LD va aussi dans le <head>.

Comment tester mes balises OG ?

Après publication, utilisez le Facebook Sharing Debugger (developers.facebook.com/tools/debug/) pour vérifier vos balises OG. Pour Twitter, utilisez le Card Validator (cards-dev.twitter.com/validator). L'aperçu intégré de cet outil vous donne une bonne approximation, mais vérifiez toujours avec les outils officiels après le déploiement.

Autres noms de cet outil

Cet outil est aussi connu sous ces tâches — chaque lien ouvre le même outil avec un guide ciblé :

Open Graph meta tags generator — Open Graph Meta Tags Generator