Saltar al contenido
AZ Tools

Generador Open Graph y Twitter Card

Construye el bloque estándar de metadatos de tarjeta de vista previa que toda plataforma social y app de chat busca cuando alguien comparte tu URL. Título, descripción, imagen, tipo y la variante específica de Twitter Card son configurables. Una pequeña vista previa muestra aproximadamente cómo aparecerá el enlace en un feed social. Copia el resultado directo al `<head>` de tu página.

—
Básico
Open Graph
Twitter Card
Bloque <meta>
<title>Site Title — Page Title</title>
<meta name="description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." />
<link rel="canonical" href="https://example.com/page" />

<!-- Open Graph -->
<meta property="og:title" content="Site Title — Page Title" />
<meta property="og:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:image:alt" content="Cover image describing the page" />
<meta property="og:site_name" content="Example Site" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Site Title — Page Title" />
<meta name="twitter:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." />
<meta name="twitter:image" content="https://example.com/og-image.png" />
<meta name="twitter:image:alt" content="Cover image describing the page" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@author" />

Vista previa

Cover image describing the page

Example Site

Site Title — Page Title

A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card.

Valida el resultado con Sharing Debugger de Facebook o Card Validator de Twitter tras desplegar.

Cómo usar

  1. Rellena título, descripción, URL canónica y URL de imagen de portada 1200×630.
  2. Elige el `og:type` de Open Graph (article, website, …) y un estilo de Twitter Card (summary, summary_large_image, …).
  3. Copia el bloque generado al `<head>` de tu página — funciona en HTML, Astro, Next.js, etc.

Preguntas frecuentes

¿Qué tamaño de imagen debo usar?
1200 × 630 píxeles (1.91:1) es el seguro por defecto — satisface Facebook, LinkedIn, Slack y la tarjeta `summary_large_image` de Twitter. La `summary` simple de Twitter usa 1:1, pero la mayoría de sitios usan una sola imagen para ambos.
¿Diferencia entre `summary` y `summary_large_image`?
`summary` muestra una miniatura cuadrada pequeña junto al título y descripción. `summary_large_image` muestra una imagen banner de ancho completo sobre el título. Usa la grande para posts con contenido pesado; la pequeña cuando la imagen es incidental.
¿Importa el enlace canónico?
Sí. Los crawlers lo usan para deduplicar variantes de URL (`?utm_source=…`, slashes finales) y dirigir el engagement social (likes, comentarios) a una única URL canónica.

Herramientas relacionadas

Verificador de Límite de Caracteres SNS / SEO

Escribe una vez y mira cómo tu texto encaja en 28+ límites de plataforma — Twitter, Instagram, títulos SEO, copy de anuncios, app stores.

Texto 0 0

Conversor de JSON a struct de Go

Convierte un objeto JSON en un struct de Go tipado con etiquetas json, al instante en tu navegador.

Desarrollo 0 0

Decodificador de Snowflake ID (Discord, Twitter)

Decodifica un Snowflake ID de Discord, Twitter/X o Instagram en su marca de tiempo de creación, worker/proceso o datacenter, y secuencia — con modo de época personalizada — todo en tu navegador.

Desarrollo 0 0

Generador de Animación CSS

Construye una animación CSS visualmente — elige preset, ajusta duración/easing/iteración, mira el preview y copia los keyframes.

Desarrollo 0 0

Generador de Hash (SHA)

Genera hashes SHA-1, SHA-256, SHA-384 y SHA-512 a partir de texto.

Desarrollo 0 0

Generador de UUID

Genera UUID v4 aleatorios en lote, con copia.

Desarrollo 0 0