InicioHerramientasGenerador de Open Graph
Generador de Open Graph con vista previa del enlace
Rellena el título, la descripción, la URL y la imagen: la herramienta genera las metaetiquetas Open Graph y Twitter Cards, muestra cómo se verá el enlace en un feed y en un chat, y detecta los errores habituales: og:image relativa, SVG, imagen diminuta, og:locale mal escrito.
—
Tarjeta grande en un feed
Tarjeta compacta
Vista previa en un chat
Las maquetas son aproximadas: cada red social y cada app de mensajería (WhatsApp, Telegram, Slack) recorta el texto y la imagen a su manera y guarda la tarjeta en caché la primera vez que se comparte el enlace.
Etiquetas para <head>
Todo se calcula en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo usarla
- Rellena los camposEscribe el título y la descripción para alguien que se desplaza por un feed, no para un buscador: pueden ser distintos del title y la meta description de la página.
- Comprueba la imagenEscribe la URL completa de og:image y pulsa «Comprobar imagen», o elige un archivo: la herramienta muestra su tamaño y su proporción.
- Mira las vistas previasLa tarjeta grande, la compacta y la vista previa en un chat muestran dónde se corta el texto y cómo se recorta la imagen.
- Copia las etiquetasPega el bloque en el <head>. Si el enlace ya se había compartido, actualiza la caché en el depurador de la red; si no, seguirá mostrando la tarjeta antigua.
Qué es Open Graph y qué etiquetas son obligatorias
Open Graph es un protocolo de marcado creado por Facebook: las metaetiquetas del <head> indican qué título, descripción e imagen mostrar cuando alguien comparte un enlace. Hoy lo lee casi todo: redes sociales, WhatsApp y otras apps de mensajería, chats de equipo y buscadores.
La especificación de ogp.me enumera cuatro propiedades obligatorias: og:title, og:type, og:image y og:url. En la práctica se añaden og:description, og:site_name, og:locale y og:image:alt.
X (Twitter) tiene sus propias etiquetas twitter:*, pero recurre a Open Graph cuando faltan. Basta con indicar twitter:card, el tipo de tarjeta, y opcionalmente twitter:site con tu cuenta.
Tamaño de og:image: 1200 × 630 y proporción 1,91:1
Para una tarjeta grande, usa una imagen de 1200 × 630 px: es la recomendación de Meta para compartir enlaces y una proporción (1,91:1) que la mayoría de los servicios muestra sin recortar. Las reglas que revisa la herramienta:
- URL completa.
og:imagedebe empezar por https:// y el dominio: las redes no resuelven rutas relativas como/og.png. - Formato de mapa de bits. PNG, JPEG, WebP o GIF. SVG no se admite.
- Al menos 200 × 200 px, o no habrá tarjeta grande; X acepta imágenes de hasta 4096 px por lado y menos de 5 MB.
- La tarjeta compacta (
summary) muestra la imagen cuadrada: usa una imagen cuadrada de al menos 144 × 144 px. - Lo importante, en el centro. Los feeds y las apps de mensajería recortan los bordes de forma distinta; no pegues texto al borde.
Añadir og:image:width y og:image:height permite que la tarjeta se pinte al instante, antes de descargar la imagen. La herramienta las añade cuando el tamaño está comprobado.
Errores habituales y la caché de la vista previa
- og:locale con guion. El formato es idioma y territorio con guion bajo:
es_ES,es_MX,es_AR. Es distinto de hreflang, que usa guion (es-MX): mira el generador de hreflang. - Una sola imagen para todo el sitio. Las tarjetas de páginas distintas se vuelven indistinguibles. Crea una imagen propia al menos para las páginas clave.
- Etiquetas inyectadas con JavaScript. La mayoría de los rastreadores de redes sociales no ejecutan scripts: las etiquetas tienen que estar en el HTML que devuelve el servidor.
- La tarjeta antigua después de editar. Las redes guardan la vista previa en caché. Tras cambiar las etiquetas, actualiza los datos en el depurador de la red o añade un parámetro de versión a la URL de la imagen (
og.png?v=2). - Una imagen tras un login o bloqueada para rastreadores. Comprueba que el archivo se abre sin cookies y no está bloqueado en robots.txt; puedes verlo con el probador de robots.txt.
Fuentes
- The Open Graph protocol — ogp.me.
- X Developer Platform. Cards markup reference; Summary Card with Large Image — developer.x.com.
- Meta for Developers. Sharing best practices for websites — developers.facebook.com.
Preguntas frecuentes
¿Qué etiquetas Open Graph son obligatorias?
Según la especificación de ogp.me: og:title, og:type, og:image y og:url. En la práctica también se añaden og:description, og:site_name, og:locale y og:image:alt, además de twitter:card para X.
¿Qué tamaño debe tener og:image?
1200 × 630 px, con proporción 1,91:1. Con un lado de menos de 200 px no hay tarjeta grande. La tarjeta compacta summary necesita una imagen cuadrada.
¿Hacen falta etiquetas específicas de Twitter (X)?
No. X lee og:title, og:description y og:image cuando faltan twitter:title, twitter:description y twitter:image. Basta con añadir twitter:card.
¿Por qué una red sigue mostrando la imagen antigua?
Las vistas previas se guardan en caché. Tras cambiar las etiquetas, actualiza la tarjeta en el depurador de la red o cambia la URL de la imagen, por ejemplo añadiendo ?v=2.
¿Puedo usar SVG en og:image?
No, SVG no se admite. Usa PNG, JPEG o WebP.
¿Cómo se escribe og:locale?
Idioma y territorio con guion bajo: es_ES para España, es_MX para México, es_AR para Argentina. La forma con guion (es-MX) es para hreflang y el atributo lang, no para Open Graph.
¿Se envían mis datos a un servidor?
No. Las etiquetas se generan en tu navegador. La imagen de una URL la carga tu navegador directamente desde tu sitio, y solo cuando pulsas el botón; un archivo elegido se queda en tu ordenador.
Más en SEO
- Vista previa del snippet
¿Cómo se verán el título y la descripción en Google y se cortarán?
- Analizador de legibilidad
¿Qué tan difícil es leer este texto y qué frases son demasiado largas?
- Generador y probador de robots.txt
¿Qué regla de robots.txt bloquea o permite esta URL para un rastreador?
- Generador de hreflang
¿Qué etiquetas hreflang conectan las versiones de idioma de una página?
- Generador de UTM
¿Cómo crear enlaces UTM coherentes para cada campaña y canal?
- Generador de QR con UTM
¿Qué stand, folleto o póster trajo visitas, y cómo etiquetar un código QR para cada uno?