Generador de etiquetas meta Open Graph

Las etiquetas con las que se construye una vista previa de enlace

Cuando alguien pega tu enlace en una publicación o un mensaje, la app envía un rastreador a la página y lee un puñado de etiquetas <meta> en el <head>. Esas etiquetas provienen del protocolo Open Graph, que enumera cuatro como obligatorias:

• og:title: el título tal como debe aparecer en la vista previa.
• og:type: qué es la página. website encaja con la mayoría de las páginas y article encaja con una entrada de blog. El protocolo también define tipos como profile, book, video.movie y music.song.
• og:image: la URL de la imagen que representa la página.
• og:url: la URL canónica, que el protocolo llama el ID permanente del objeto.

El protocolo también define etiquetas opcionales, y el generador escribe las útiles: og:description, og:site_name, y los detalles de la imagen og:image:width, og:image:height y og:image:alt. Sobre el texto alternativo el protocolo es claro: si una página especifica og:image, debería especificar og:image:alt, y ese texto describe qué hay en la imagen, no es un pie de foto.

Lo que añade X: twitter:card

X también lee Open Graph. Su referencia de marcado de tarjetas (la documentación para desarrolladores de X, enlazada aquí a través de Internet Archive porque la página original ahora redirige) enumera la alternativa de cada etiqueta: twitter:title recurre a og:title, twitter:description a og:description, twitter:image a og:image y twitter:image:alt a og:image:alt. Así que la única etiqueta que vale la pena añadir es twitter:card, que elige el diseño. Si la omites, la misma referencia dice que X puede recurrir a una tarjeta de resumen pequeña, aunque quisieras la grande:

• summary_large_image: una imagen de ancho completo sobre el título. La página de la tarjeta de imagen grande de X dice que las imágenes admiten una proporción de 2:1, con dimensiones mínimas de 300 × 157 y un máximo de 4096 × 4096 píxeles, menos de 5MB, en JPG, PNG, WEBP o GIF. No se admite SVG.
• summary: una tarjeta más pequeña con una imagen cuadrada. La página de la tarjeta de resumen de X dice que la imagen admite una proporción de 1:1, desde 144 × 144 hasta 4096 × 4096 píxeles, y se recorta a un cuadrado en todas las plataformas.

La misma referencia incluye tarjetas app y player, que necesitan campos adicionales de App Store o reproductor de vídeo, así que se omiten aquí. También documenta los límites que usan las comprobaciones de arriba: 70 caracteres para un título, 200 para una descripción y 420 para el texto alternativo.

Tamaños de imagen que indican las plataformas

• LinkedIn: su guía para hacer que un sitio web se pueda compartir pide og:title, og:image, og:description y og:url, e indica un tamaño máximo de archivo de 5 MB, un mínimo de 1200 × 627 píxeles y una proporción recomendada de 1.91:1.
• Meta: sus buenas prácticas para compartir indican usar imágenes de al menos 1080 píxeles de ancho para pantallas de alta resolución, y al menos 600 píxeles de ancho para mostrar anuncios con enlace de imagen. La misma página pide og:image:width y og:image:height para que el rastreador pueda mostrar la imagen de inmediato sin tener que descargarla y procesarla primero.

Una imagen de 1200 × 630 cumple todo esto: es de al menos 1200 × 627 para LinkedIn, más ancha que 1080 para Meta, y 1.905:1, dentro del 5% del 2:1 de X.

Compruébalo y actualiza las vistas previas antiguas

Las apps guardan en caché lo que leyeron, así que corregir las etiquetas no arregla una vista previa que ya estaba almacenada. Las dos grandes redes te dan una herramienta para esto:

• El Sharing Debugger de Meta muestra las etiquetas que lee su rastreador, con cualquier error o aviso, y fuerza una nueva lectura. La guía para webmasters de Meta lo describe, y la página de buenas prácticas señala que, de lo contrario, el contenido leído se actualiza en un periodo estándar de 24 horas.
• El Post Inspector de LinkedIn actualiza una URL en caché. La página de ayuda de LinkedIn señala que la actualización solo afecta a las publicaciones nuevas: las publicaciones que ya incluyen la URL conservan la vista previa antigua.

Qué no hace esta herramienta

No obtiene tu página ni tu imagen, así que no puede ver lo que de verdad está publicado, y la vista previa de arriba es un esbozo de texto en lugar de una representación real. Escribe las etiquetas; tu sitio todavía tiene que servirlas en el <head> de la página, en el HTML que recibe el rastreador. Las etiquetas añadidas después por JavaScript puede que nunca se vean. Y no escribe tarjetas app ni player, ni las propiedades adicionales que definen tipos como book o video.movie.

Si prefieres no escribir esto a mano

Hermoso es marketing en piloto automático: investiga los anuncios que ya funcionan en tu mercado, crea anuncios de imagen y vídeo acordes a tu marca, programa las publicaciones y ejecuta campañas de pago en tus propias cuentas publicitarias. Funciona en la app web, o dentro de Claude, ChatGPT y Cursor a través de su servidor MCP.

Herramientas gratis: Generador de enlaces UTM · Generador de códigos QR · Guía de tamaños para redes sociales

Preguntas frecuentes

¿Qué etiquetas Open Graph son obligatorias?

El protocolo Open Graph lista cuatro propiedades obligatorias: og:title, og:type, og:image y og:url. og:description, og:site_name y las etiquetas de ancho, alto y alt de og:image son opcionales pero conviene añadirlas.

¿Necesito twitter:title y twitter:image si tengo etiquetas og:?

No. La referencia de cards de X dice que twitter:title, twitter:description, twitter:image y twitter:image:alt recurren a sus equivalentes og:. La etiqueta que conviene añadir es twitter:card, que elige el diseño de la card.

¿Qué tamaño debe tener una imagen de Open Graph?

LinkedIn pide al menos 1200 × 627 píxeles en 1.91:1 y menos de 5 MB. Meta sugiere al menos 1080 píxeles de ancho. La card de imagen grande de X admite 2:1 desde 300 × 157 hasta 4096 × 4096. Una imagen de 1200 × 630 encaja en las tres.

¿Por qué mi enlace sigue mostrando una imagen antigua después de cambiar las etiquetas?

La app guardó en caché el rastreo antiguo. Pasa la URL por el Sharing Debugger de Meta o el Post Inspector de LinkedIn para volver a obtenerla. LinkedIn señala que las publicaciones que ya comparten la URL conservan la vista previa antigua.

¿Por qué cambian las comillas y los ampersands en el resultado?

Llevan escape HTML para que la etiqueta siga siendo válida. Un título como Tom & Jerry's "Sale" se convierte en Tom & Jerry's "Sale" dentro del atributo content, y los navegadores y rastreadores lo leen de nuevo como el texto original.

¿La herramienta carga mi imagen?

No. Nada de lo que escribes se envía a ningún sitio y la URL de la imagen nunca se solicita, por eso la vista previa muestra un marcador de posición en lugar de la imagen.