Etiquetas Open Graph: cómo controlar la vista previa de un enlace
Cuando se comparte un enlace en Facebook, LinkedIn, WhatsApp, Slack o X, unas pocas líneas en el head de la página deciden qué título, qué texto y qué imagen ve la gente.
Pegue un enlace en un chat o en una publicación y, un momento después, aparece una tarjeta con una imagen, un titular y una línea de texto. Esa tarjeta no se adivina a partir de la página: se construye con las etiquetas Open Graph, un puñado de elementos meta dentro del <head> de la página. Las páginas que no las tienen reciben lo que la red social consiga extraer por su cuenta, que a menudo es el logotipo, un aviso de cookies o ninguna imagen. Esta guía explica las etiquetas que importan, las reglas de la imagen y cómo arreglar una vista previa que no se actualiza.
Qué es Open Graph
Open Graph es un pequeño conjunto de convenciones que Facebook presentó en 2010 para que cualquier página web pudiera describirse a sí misma al compartirse. Su uso se extendió mucho más allá de Facebook: LinkedIn, WhatsApp, Telegram, Slack, Discord, Microsoft Teams y muchos otros leen las mismas etiquetas. X también las lee, junto con sus propias etiquetas twitter:. Por eso, escribirlas una sola vez cubre casi todos los lugares donde se puede compartir un enlace.
Las etiquetas tienen este aspecto:
<meta property="og:type" content="article">
<meta property="og:title" content="How to Make Cold Brew at Home">
<meta property="og:description" content="The grind, the ratio and the steeping time.">
<meta property="og:url" content="https://example.com/cold-brew">
<meta property="og:image" content="https://example.com/images/cold-brew.jpg">
<meta property="og:site_name" content="The Coffee Blog">Las etiquetas que importan
| Etiqueta | Qué define | Consejo |
|---|---|---|
og:title | El titular en negrita de la tarjeta | Puede ser distinto del título para buscadores: más corto y más atractivo |
og:description | La línea bajo el titular | Una o dos frases; muchas apps solo muestran la primera línea |
og:image | La imagen | Una dirección https:// completa; vea las reglas de tamaño más abajo |
og:url | La dirección a la que se atribuye lo compartido | La dirección canónica, sin parámetros de seguimiento |
og:type | El tipo de página | website para la mayoría de las páginas, article para las entradas |
og:site_name | El sitio que aparece encima o debajo del título | El nombre de su marca |
og:locale | El idioma y la región | Por ejemplo en_US; opcional |
Tenga en cuenta que Open Graph usa property, no name. La mayoría de las plataformas aceptan las dos, pero property es lo que indica la especificación.
La imagen: tamaño y formato
La imagen es lo primero que la gente ve, y es donde más vistas previas fallan.
- Tamaño: 1200 × 630 píxeles, una proporción de 1,91 a 1, funciona en todas partes. Las imágenes de menos de 600 × 315 pueden mostrarse como una miniatura pequeña o descartarse.
- Formato: JPG o PNG son seguros. La mayoría de las plataformas aceptan WebP, pero no todas; los GIF se muestran como una imagen fija.
- Peso del archivo: manténgalo muy por debajo de unos pocos megabytes. Algunas apps, en particular WhatsApp, omiten las imágenes pesadas.
- Dirección: una dirección https:// absoluta que cualquiera pueda abrir. Las rutas relativas, las imágenes que exigen iniciar sesión y las direcciones bloqueadas por robots.txt no funcionan.
- Zona segura: mantenga el texto y las caras lejos de los bordes, porque algunas apps recortan la imagen a un cuadrado o a una franja más estrecha.
El conversor de imágenes redimensiona y comprime una imagen a estas medidas sin subirla a ningún servidor.
Tarjetas de X (Twitter)
X lee las etiquetas Open Graph para el título, la descripción y la imagen, pero hay una decisión que necesita su propia etiqueta: twitter:card. Con summary_large_image, la imagen se muestra a lo ancho encima del texto; con summary, es un cuadrado pequeño a su lado. Sin esta etiqueta, los enlaces pueden aparecer como una simple URL. twitter:site puede indicar la cuenta que está detrás del sitio. El generador de Twitter Card escribe los dos conjuntos de etiquetas a la vez.
Open Graph y los buscadores
Los buscadores no posicionan las páginas según sus etiquetas Open Graph; el resultado de búsqueda lo determinan el elemento <title> y la meta descripción. Los dos conjuntos suelen llevar un texto parecido, pero sirven a lectores distintos: el título para buscadores debe contener las palabras que la gente busca, mientras que el título para compartir puede escribirse pensando en alguien que va deslizando el dedo por su feed. La vista previa de Google muestra cómo se ve la versión para buscadores.
Por qué una vista previa sale mal o no aparece
| Síntoma | Causa probable | Solución |
|---|---|---|
| Imagen o texto antiguos después de un cambio | La plataforma guardó en caché la primera vista previa | Pídale que vuelva a leer la página, por ejemplo con el Sharing Debugger de Facebook o el Post Inspector de LinkedIn |
| Ninguna imagen | Dirección de imagen relativa o inaccesible | Use una dirección https:// completa y pública |
| Miniatura diminuta en lugar de una imagen ancha | Imagen demasiado pequeña, o falta twitter:card en X | Use 1200 × 630 y añada summary_large_image |
| El título equivocado | Etiquetas añadidas con JavaScript después de cargar la página | Ponga las etiquetas en el HTML que envía el servidor; la mayoría de los rastreadores no ejecutan scripts |
| Nada en una sola página | La página bloquea a los bots o exige iniciar sesión | Permita que el rastreador descargue la página |
El punto del JavaScript atrapa a muchas aplicaciones de una sola página: si las etiquetas solo aparecen después de ejecutar los scripts, los rastreadores de las redes sociales nunca las ven. Genérelas en el servidor, o renderice de antemano las páginas que más se comparten.
Cómo escribir las etiquetas
El generador de meta tags escribe las etiquetas para buscadores, las etiquetas Open Graph y las etiquetas de X a partir de un solo formulario breve, con vistas previas de Google, Facebook y X que se actualizan mientras escribe. También puede leer las etiquetas de una página existente a partir de su HTML con Leer etiquetas del HTML, que es la forma más rápida de revisar una página que ya tiene. El generador de Open Graph abre la misma herramienta con la vista previa para redes sociales en primer plano.