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

Generador Open Graph y Twitter Card

Desarrollo

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ásicoTítuloDescripciónURL canónicaURL de imagenAlt de imagen

Open Graph

Nombre del sitioog:typeog:locale

Twitter Card

twitter:cardtwitter:site (@)twitter:creator (@)

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

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

Rellena título, descripción, URL canónica y URL de imagen de portada 1200×630.
Elige el `og:type` de Open Graph (article, website, …) y un estilo de Twitter Card (summary, summary_large_image, …).
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.