kittokit
ES
` en título o descripción se escapan con backslash para que el bloque de script inline no termine antes de tiempo."}},{"@type":"Question","name":"¿Cómo funciona el generador de imagen OG?","acceptedAnswer":{"@type":"Answer","text":"100 % en el cliente. Elija uno de los cinco preajustes de color de marca (Grafito, Porcelana, Atardecer, Bosque, Medianoche) o introduzca sus propios valores, escriba el título de la imagen y un subtítulo opcional, pulse «Generar imagen». El navegador renderiza el PNG 1200×630 mediante la API Canvas2D en memoria y lo entrega para descargar. No hay llamada al servidor, no hay paywall, no hay cuenta — a diferencia de robolly o previewlinks. Aloje luego el resultado en su CDN y referencie la URL en `og:image`."}},{"@type":"Question","name":"¿Por qué no hay depurador de fetch de URL en directo?","acceptedAnswer":{"@type":"Answer","text":"Un depurador en directo tendría que recuperar la URL en el servidor porque CORS impide a un script de cliente leer dominios arbitrarios. Fetch de servidor significa código de servidor, logs y posible tracking. Eso viola la postura privacy-first de la página. Para un depurador en directo, use tras el despliegue las herramientas oficiales: Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector. El generador cubre la redacción, los validadores cubren la lectura — se complementan."}}]},{"@type":"HowTo","name":"Generador OpenGraph — 6 plataformas, JSON-LD Article","step":[{"@type":"HowToStep","position":1,"name":"Text oder Code einfügen","text":"Füge deinen Inhalt in das Eingabefeld ein oder tippe direkt."},{"@type":"HowToStep","position":2,"name":"Automatische Verarbeitung","text":"Das Tool verarbeitet den Inhalt sofort und zeigt das Ergebnis."},{"@type":"HowToStep","position":3,"name":"Ergebnis kopieren","text":"Kopiere das Ergebnis mit einem Klick in die Zwischenablage."}]}]}
DEV-TOOL

Generador OpenGraph — 6 plataformas, JSON-LD Article

Componga etiquetas, compruebe los límites por plataforma, renderice la imagen OG y genere JSON-LD Article Schema.org en la misma pestaña — todo local, sin subida, sin cuenta.

Runs locally in the browser — snippets are emitted in memory, nothing is uploaded.

Mode

Core tags

og:type

X (Twitter Card)

twitter:card

Article-specific

Load image preview

File stays local — loaded only as preview in the browser, no upload.

Platform preview

Six platforms, each with its own layout and limit characteristics.

News-feed unfurl with image-on-top layout. Title cuts around 60 chars.

Example Magazine

Brand Story — New episode every Thursday

A weekly series on the build, crisis and turning-point moments of real companies.

Within limits · Facebook truncates title around 60 characters in the news-feed unfurl. Recommended image 1200×630, minimum 600×315.

HTML snippet

Paste into the `<head>` of your page.

<!-- OpenGraph -->
<meta property="og:title" content="Brand Story — New episode every Thursday">
<meta property="og:description" content="A weekly series on the build, crisis and turning-point moments of real companies.">
<meta property="og:url" content="https://example.com/articles/episode-12">
<meta property="og:image" content="https://example.com/og/episode-12.png">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Example Magazine">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="Lena Albrecht">
<meta property="article:section" content="Magazine">
<meta property="article:published_time" content="2026-05-17">

<!-- Twitter Card / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Brand Story — New episode every Thursday">
<meta name="twitter:description" content="A weekly series on the build, crisis and turning-point moments of real companies.">
<meta name="twitter:image" content="https://example.com/og/episode-12.png">
<meta name="twitter:site" content="@example">

<!-- Theme color -->
<meta name="theme-color" content="#1A1A1A">

<!-- Canonical -->
<link rel="canonical" href="https://example.com/articles/episode-12">

Cómo funciona
  1. 01

    Text oder Code einfügen

    Füge deinen Inhalt in das Eingabefeld ein oder tippe direkt.

  2. 02

    Automatische Verarbeitung

    Das Tool verarbeitet den Inhalt sofort und zeigt das Ergebnis.

  3. 03

    Ergebnis kopieren

    Kopiere das Ergebnis mit einem Klick in die Zwischenablage.

Privacidad

Alle Berechnungen laufen direkt in deinem Browser. Keine Daten werden auf Server übertragen.

Un editor para las etiquetas `<meta property="og:*">` con seis vistas previas por plataforma una junto a la otra. Escriba título, descripción, URL e imagen; el generador muestra simultáneamente cómo Facebook, X (Twitter Card), LinkedIn, Slack, Discord e iMessage despliegan el enlace — con los límites de caracteres correctos por plataforma. En la segunda pestaña, el generador Canvas2D produce un PNG 1200×630 a partir de su color de marca y un título; en la tercera, construye el JSON-LD `Article` de Schema.org correspondiente con protección XSS en la salida inline.

01 — Cómo usarlo

¿Cómo usar esta herramienta?

  1. En la pestaña Editor, introduzca título, descripción, URL, URL de imagen y nombre del sitio. El contador de caracteres muestra los límites por plataforma.
  2. Elija og:type (website / article / product). En `article` aparecen los campos de autor, sección y fecha.
  3. Elija el modo Twitter Card (`summary` o `summary_large_image`) y, opcionalmente, el handle de Twitter.
  4. Recorra la tira de vista previa — cada plataforma muestra su layout y estado de validación.
  5. Copie el snippet HTML o descárguelo como `.html`. En la pestaña de imagen OG, elija color de marca y renderice el PNG 1200×630. En la pestaña JSON-LD, tome el marcado Schema.org `Article` correspondiente.

¿Qué hace el generador OpenGraph?

El generador es un editor para las etiquetas meta que las plataformas sociales leen cuando alguien comparte su enlace. Escriba título, descripción, URL e imagen — el generador emite las etiquetas <meta property="og:*"> y <meta name="twitter:*"> listas para pegar en el <head>. Seis vistas previas por plataforma (Facebook, X, LinkedIn, Slack, Discord, iMessage) muestran en paralelo cómo se verá la tarjeta en cada canal, con avisos de límite de caracteres por plataforma.

Tres pestañas cubren todo el flujo:

  • Editor + Vista previa — escriba los campos de etiqueta, vea las seis tarjetas actualizarse en directo, copie el snippet.
  • Generar imagen OG — renderice un PNG 1200×630 a partir de color de marca y título en el navegador, descárguelo.
  • JSON-LD Article — marcado Schema.org Article para impulsar las citas de IA, con salida script inline a prueba de XSS.

Todo en el navegador. Sin subida, sin cuenta, sin banner de cookies.

¿Qué vistas previas por plataforma se incluyen?

Seis destinos, cada uno con su carácter de layout y configuración de límites:

  • Facebook — despliegue en el feed con imagen arriba. Truncamiento del título a 60 caracteres.
  • X (Twitter Card) — summary_large_image con píldora de dominio abajo. Título tope 70, descripción 200.
  • LinkedIn — layout business con caché agresivo. Tras el despliegue, dispare manualmente el LinkedIn Post Inspector; si no, LinkedIn muestra cachés antiguos.
  • Slack — despliegue de bot con thumb pequeño a la izquierda y eyebrow del nombre del sitio.
  • Discord — embed con barra lateral izquierda coloreada que sigue el valor theme-color.
  • iMessage — burbuja Rich Link. iMessage exige HTTPS y un <head> renderizado en servidor — las etiquetas OG inyectadas en cliente se ignoran. El generador lo señala en la barra de validación.

metatags.io cubre seis plataformas pero sin Discord ni iMessage. opengraph.xyz y share-preview son depuradores, no generadores. robolly se queda en Facebook + X. Nosotros combinamos las seis plataformas en un único editor — el valor añadido directo frente a las herramientas establecidas.

¿Cómo funciona la validación por plataforma?

Cada plataforma tiene sus límites duros para título y descripción — el generador emite un punto de estado por plataforma:

PlataformaTítulo máx.Descripción máx.Ratio imagen
Facebook601101,91:1
X (Twitter)702001,91:1 o 1:1
LinkedIn1502001,91:1
Slack2003001,91:1
Discord25640961,91:1
iMessage1002001,91:1

Si se supera, el punto se pone rojo y el texto de ayuda da el delta exacto («Title exceeds 70 chars (78)»). Para iMessage, el generador comprueba además que og:image y og:url empiezan por https:// — Apple Messages ignora enlaces HTTP en el render Rich Link.

¿Cómo funciona el generador de imagen OG?

La segunda pestaña renderiza un PNG 1200×630 directamente en el navegador mediante la API Canvas2D. Elija uno de los cinco preajustes de color de marca o teclee valores hex propios; el título se ajusta automáticamente a un máximo de tres líneas; un subtítulo opcional completa el nombre del sitio o el eyebrow. Al pulsar «Generar imagen», el navegador dibuja en un canvas fuera de pantalla y devuelve el resultado como blob PNG para descarga inmediata.

100 % en el cliente significa: sin servidor, sin paywall, sin cuenta. robolly, previewlinks y Pixola hacen lo mismo en el servidor — de pago y con telemetría. Aquí ocurre en local, sin viaje externo. Aloje luego el PNG en su CDN y referencie la URL en el campo og:image.

¿Qué hace la pestaña JSON-LD Article?

El JSON-LD Schema.org Article complementa OpenGraph: OG describe el aspecto de la vista previa, JSON-LD describe el contenido de forma estructurada (autor, fecha, sección, editor). Buscadores y asistentes de IA prefieren páginas con ambas — el estudio Princeton GEO 2025 documentó +40 % de citas adicionales con presencia combinada OG + Article.

El generador emite el JSON-LD en el formato:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Brand Story — Episode 12",
  "description": "A weekly series ...",
  "url": "https://example.com/articles/12",
  "image": "https://example.com/og/12.png",
  "mainEntityOfPage": "https://example.com/articles/12",
  "datePublished": "2026-05-17",
  "articleSection": "Magazine",
  "author": { "@type": "Person", "name": "Lena Albrecht" },
  "publisher": { "@type": "Organization", "name": "Example Magazine" }
}
</script>

Protección XSS en el script inline

El generador aplica un escape backslash en las secuencias </script y </style dentro de los valores JSON. Sin esa protección, una entrada maliciosa como Test</script><script>alert(1)</script> cerraría antes de tiempo el bloque script inline y ejecutaría JavaScript arbitrario. Con el escape, </script se vuelve <\/script — sigue siendo JSON válido (un parser JSON devuelve el valor original), pero el parser HTML ya no ve un token literal de fin de script.

¿Qué lagunas son intencionales?

  • Sin depurador de fetch de URL en directo — exigiría un proxy de servidor para CORS, lo que viola la postura 100 % en cliente. Tras el despliegue, cambie a Facebook Sharing Debugger, X Card Validator o LinkedIn Post Inspector.
  • Sin generador CSV en lote — flujo B2B fuera del alcance de una sola herramienta.
  • Sin marketplace de plantillas con más de 100 OG-image — YAGNI. El generador Canvas inline entrega lo que se necesita coherente con la marca.
  • Sin pestaña Pinterest Rich Pin — baja intención de búsqueda para Rich Pins, y validador Pinterest propio tras despliegue.
  • Sin modo App-Card / Player-Card para Twitter — casos especiales (apps con deep link instalable, vídeos inline) fuera de alcance para el 95 % de los usuarios.
  • Sin pestañas WhatsApp / Telegram — ambas plataformas leen OpenGraph estándar sin particularidades; la vista previa de Facebook refleja con fidelidad cómo se ven en WhatsApp/Telegram.

¿Cómo se gestiona la privacidad?

100 % en el cliente. El generador corre por completo en el navegador. Sin endpoint de servidor, sin llamada de telemetría, sin cookies, sin cuenta. El archivo que carga como vista previa de imagen permanece local — el FileReader lo devuelve como data URL al DOM pero nunca sale de la pestaña. Al cerrar la pestaña, todos los ajustes desaparecen. Para conservar un historial, descargue el snippet HTML tras cada edición y versiónelo en su repositorio.

¿Qué consejos de flujo de trabajo merecen la pena?

Tres pequeñas rutinas que marcan la diferencia en el día a día:

  • Primero al generador, luego al depurador de compartido. Redacte título y descripción en la pestaña Editor, compruebe que las seis tarjetas plataforma están verdes. Solo después despliegue la página y envíe la URL al Facebook Sharing Debugger, X Card Validator y LinkedIn Post Inspector. Estos últimos vacían el caché de la plataforma — sin ese paso, los posts en LinkedIn muestran a menudo OG antiguos durante días.
  • og:image con cache-buster en cada actualización. Si cambia la imagen OG, añada un parámetro a la URL (?v=2026-05-17). De lo contrario, Facebook y LinkedIn mantienen la versión antigua durante meses. El generador no persiste nada — gestione el cache-buster a mano o por su sistema de build.
  • En article mantenga siempre la fecha. article:published_time y datePublished señalan a las IA la actualidad del contenido. En refrescos, ponga también article:modified_time / dateModified para que ChatGPT-Search o Perplexity citen la página antes que la versión anterior.

¿Cuándo no basta OpenGraph?

Tres casos especiales requieren más que las etiquetas OG:

  • La vista previa de Estado de WhatsApp lee OpenGraph por defecto, pero puede caer a «Preview not available» con imágenes muy estrechas (menos de 300 px de ancho). Solución: use el PNG 1200×630 que produce el generador — WhatsApp lo renderiza siempre.
  • La burbuja Rich Link de Apple Messages exige además que el <head> se renderice en servidor. Una SPA que inyecta etiquetas OG por JavaScript no será leída por el scraper de iMessage. Astro 6 SSG (como en este sitio) entrega el <head> en servidor por defecto.
  • El embed de Discord renderiza el valor theme-color como acento vertical izquierdo de la tarjeta. No fijarlo deja un acento gris neutro — funcional, pero sin identidad de marca.

¿Dónde encuentro más detalles?

Última actualización:

También le puede interesar