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 →

Cómo funcionaPage 2

↩ Volver a la calculadora

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 y detallesPage 3

↩ Volver a la calculadora

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.

Sobre esta herramienta

¿Qué es esta herramienta?

Genera etiquetas Open Graph, Twitter Card y JSON-LD. Vista previa en Facebook, Twitter, LinkedIn y Discord. Generador de meta etiquetas gratis — sin registro, 100% en el navegador.

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

¿Qué son las metaetiquetas Open Graph?

Las metaetiquetas Open Graph (OG) son etiquetas HTML que controlan cómo aparece tu página web cuando se comparte en plataformas sociales como Facebook, LinkedIn y Discord. Definen el título, la descripción, la imagen y el tipo de contenido que aparece en la tarjeta de vista previa del enlace. Sin etiquetas OG, las plataformas sociales adivinan qué mostrar, lo que a menudo produce imágenes ausentes, títulos equivocados o vistas previas rotas.

¿Qué son las etiquetas Twitter Card?

Las metaetiquetas Twitter Card son similares a Open Graph pero específicas para Twitter/X. El tipo más común es «summary_large_image», que muestra una imagen grande encima del título y la descripción. Twitter recurre a las etiquetas OG si faltan las específicas de Twitter, pero añadirlas te da más control sobre cómo aparece tu contenido en los tuits.

¿Por qué usar datos estructurados JSON-LD?

JSON-LD es el formato preferido de Google para datos estructurados. Ayuda a los motores de búsqueda a entender el tipo de tu contenido (artículo, producto, sitio web) y puede habilitar resultados enriquecidos en la búsqueda, como fechas de publicación de artículos, precios de productos y navegación de migas de pan. Esta herramienta genera JSON-LD junto a tus metaetiquetas, dándote optimización para redes sociales y para motores de búsqueda en un solo paso.

Preguntas frecuentes

¿Qué tamaño de imagen debería usar para las etiquetas OG?

El tamaño recomendado para la imagen OG es de 1200×630 píxeles con una proporción de 1,91:1. Esto asegura que tu imagen se muestre correctamente en Facebook, Twitter, LinkedIn y Discord. Las imágenes deberían pesar menos de 8 MB y estar en formato JPG, PNG o WebP. Las imágenes más pequeñas pueden aparecer recortadas o pixeladas en algunas plataformas.

¿Necesito tanto etiquetas OG como Twitter Card?

No estrictamente: Twitter recurre a las etiquetas OG si faltan las específicas de Twitter. Sin embargo, añadir las etiquetas Twitter Card da más control y asegura una visualización óptima. Se recomienda el tipo de tarjeta «summary_large_image» para la mayoría del contenido porque muestra una vista previa grande.

¿Dónde pongo estas metaetiquetas?

Coloca todas las metaetiquetas dentro de la sección <head> de tu documento HTML. Si usas un framework como Next.js, React o Vue, usa el sistema de gestión de head del framework (por ejemplo next/head, react-helmet) para añadir las etiquetas dinámicamente. La etiqueta script de JSON-LD también va en el <head>.

¿Cómo pruebo mis etiquetas OG?

Tras publicar, usa el Facebook Sharing Debugger (developers.facebook.com/tools/debug/) para verificar tus etiquetas OG. Para Twitter, usa el Card Validator (cards-dev.twitter.com/validator). La vista previa integrada de esta herramienta te da una buena aproximación, pero verifica siempre con las herramientas oficiales después del despliegue.

Otros nombres de esta herramienta

Esta herramienta también se conoce por estas tareas — cada enlace abre la misma herramienta con una guía enfocada:

Open Graph meta tags generator — Open Graph Meta Tags Generator