Generador de Open Graph
Rellena el título, la descripción, la dirección y la imagen, comprueba cómo se verá la tarjeta del enlace en las principales aplicaciones y copia las etiquetas Open Graph para el head de tu página.
- Vista previa de la tarjeta
- 7 tipos de contenido
- Comprobación de imagen
- Funciona en tu navegador
Página
Usa «Sitio web» para las páginas de inicio y para todo lo que no encaje en otro tipo.
La dirección canónica de la página. Los «me gusta» y las veces que se comparte se cuentan para esta dirección.
Imagen
Dirección completa de la imagen. Recomendado: 1200 × 630 px (1,91:1), JPG o PNG, menos de 5 MB.
Una vista previa web no puede cargar imágenes de otros sitios, así que elige el archivo desde tu dispositivo. Solo se muestra aquí y se mide: nunca sale de tu dispositivo.
Una frase que diga qué muestra la imagen, para quienes no pueden verla.
Más imágenes
Una imagen basta para la mayoría de las páginas. Añade más para que se pueda elegir al compartir en Facebook.
Artículo
Un enlace a la página del autor. Facebook también acepta la dirección de un perfil.
Separadas por comas. Cada una se convierte en una etiqueta propia.
Producto
Código de tres letras como USD, EUR o GBP.
Perfil
Libro
Un enlace a la página del autor. Facebook también acepta la dirección de un perfil.
Vídeo
Añade la dirección del archivo de vídeo en «Vídeo y audio», más abajo.
Canción
Vídeo y audio
App de Facebook, X Card y etiquetas básicas
Solo hace falta para las estadísticas de Facebook sobre tu dominio.
Vista previa
Estas vistas previas siguen el diseño y los límites de texto de cada aplicación; la tarjeta real puede variar un poco y cambia de vez en cuando. Después de publicar, cada red conserva la vista previa antigua hasta que se actualiza su caché.
Lista de comprobación
Código HTML
Importar desde un HTML existente
El código pegado solo se lee como texto dentro de tu navegador. Sus scripts nunca se ejecutan, no se carga nada desde él y no se envía nada a ningún sitio. Al importar se sustituye lo que haya ahora en el formulario.
Cómo crear etiquetas Open Graph
El código y las vistas previas se actualizan mientras escribes.
- 1
Elige el tipo de contenido
Selecciona sitio web, artículo, producto, perfil, libro, vídeo o canción y, después, introduce el título, la descripción, la URL de la página y el nombre del sitio.
- 2
Añade la imagen
Introduce la dirección de la imagen para compartir. Para previsualizarla y medirla, elige el mismo archivo en tu dispositivo: solo lo lee tu navegador.
- 3
Revisa y copia
Mira las vistas previas, repasa la lista de comprobación y pega el código en el <code><head></code> de tu página.
Todo lo que necesita la vista previa de un enlace
Etiquetas escritas según el protocolo Open Graph.
Vistas previas de cuatro diseños
Facebook, LinkedIn, WhatsApp / iMessage y Slack / Discord, cada uno con sus propios límites de texto. Las tarjetas reales pueden variar ligeramente y cambian con el tiempo.
Comprobación de imagen
Elige la imagen en tu dispositivo para ver su tamaño en píxeles, su proporción, su formato y su peso, con avisos cuando es demasiado pequeña, pesa demasiado o va a quedar recortada.
Detalles de cada tipo
Fecha de publicación, autor, sección y etiquetas para los artículos; precio, moneda, disponibilidad y marca para los productos; y campos para perfiles, libros, vídeos y canciones.
Varias imágenes, vídeo y audio
Añade más imágenes con ancho, alto y texto alternativo, y og:video u og:audio con su tipo MIME.
Tarjeta de X y etiquetas básicas
Añade, si quieres, el tipo de tarjeta de X y tu cuenta, un ID de aplicación de Facebook, y la etiqueta title y la meta descripción con los mismos textos.
Importar HTML existente
Pega el código fuente de una página para cargar en el formulario sus etiquetas Open Graph actuales y corregirlas. Los scripts del código pegado no se ejecutan.
Privado por diseño
Todo funciona en tu navegador. Lo que escribes, pegas o abres no se envía a ningún servidor.
Gratis y sin registro
Sin cuenta, sin límites y sin marca de agua: en el móvil, la tableta o el ordenador.
Qué son las etiquetas Open Graph y cómo las usan las aplicaciones
Cuando alguien publica un enlace, la aplicación descarga la página y busca las etiquetas Open Graph en su head para componer la tarjeta de vista previa: un título, un texto breve, una imagen y el nombre del sitio. Facebook presentó el protocolo en 2010, y hoy lo leen LinkedIn, WhatsApp, Slack, Discord, iMessage, X y muchas otras. Sin estas etiquetas, la aplicación tiene que adivinar: puede tomar la imagen equivocada, usar un aviso de cookies como descripción o mostrar solo la dirección.
El protocolo exige cuatro propiedades: og:title, og:type, og:image y og:url. En la práctica conviene añadir también og:description y og:site_name. Las etiquetas Open Graph usan el atributo property, no name. La imagen es lo primero en lo que se fija la gente: 1200 × 630 píxeles, una proporción de 1,91:1, funciona en todas las tarjetas grandes. Indicar og:image:width y og:image:height permite a la aplicación maquetar la tarjeta antes de haber cargado la imagen.
Errores típicos: una dirección de imagen relativa o con http, que muchas aplicaciones se niegan a cargar; un og:url distinto de la URL canónica, de modo que las veces que se comparte se reparten entre dos direcciones; una imagen demasiado pequeña o tan pesada que la aplicación la descarta; y una única imagen y descripción genéricas para todas las páginas de un sitio. Recuerda que las aplicaciones guardan las vistas previas en caché. Después de cambiar las etiquetas, la tarjeta antigua puede seguir viéndose hasta que se actualice la caché de esa aplicación.
Propiedades básicas de Open Graph
| Propiedad | Qué contiene | Consejo |
|---|---|---|
| <code>og:title</code> | Titular de la tarjeta | Sin el nombre del sitio; limítalo a unos 60–90 caracteres |
| <code>og:description</code> | Una o dos líneas debajo del título | Unos 55–200 caracteres; algunas aplicaciones no la muestran |
| <code>og:image</code> | Imagen de la tarjeta | 1200 × 630 px, JPG o PNG, dirección https:// completa |
| <code>og:url</code> | Dirección canónica de la página | La misma dirección que en la etiqueta canonical |
| <code>og:type</code> | Clase de contenido | <code>website</code>, salvo que otro tipo encaje claramente |
| <code>og:site_name</code> | Nombre del sitio web | Aparece sobre el título en varias aplicaciones de mensajería |
Consejos
- ¿Todavía no tienes imagen para compartir? Crea una con el tamaño correcto en el Generador de imágenes OG.
- Recorta una imagen existente a 1200 × 630 px con la herramienta Redimensionar para redes sociales y reduce el peso del archivo con el Compresor de imágenes.
- Para las tarjetas de reproductor y de aplicación de X, usa el Generador de Twitter Cards; para canonical, robots y hreflang, el Generador de metaetiquetas.
- Tras publicar, comparte el enlace en un chat privado o en un borrador para comprobar la tarjeta real, y actualiza la caché de vistas previas de la red si sigue mostrando la versión antigua.
Preguntas frecuentes
¿No encuentras tu respuesta? Escríbenos: respondemos rápido.
¿Qué tamaño debe tener una imagen Open Graph?
1200 × 630 píxeles, una proporción de 1,91:1, es la opción segura para las tarjetas grandes. Usa JPG o PNG y procura que el archivo pese poco: esta herramienta avisa por encima de 300 KB, porque WhatsApp a menudo no muestra la imagen con archivos más pesados, y por encima de los límites de 5 MB y 8 MB de LinkedIn y Facebook.
¿Qué etiquetas Open Graph son obligatorias?
El protocolo exige og:title, og:type, og:image y og:url. Añade también og:description y og:site_name: la mayoría de las aplicaciones las muestran.
¿Por qué no se actualiza la vista previa de mi enlace?
Las aplicaciones guardan la vista previa la primera vez que se comparte un enlace. Después de cambiar las etiquetas, la tarjeta antigua se mantiene hasta que esa caché caduca o se actualiza. Facebook y LinkedIn ofrecen cada una una herramienta para desarrolladores que vuelve a descargar la página.
¿Las etiquetas Open Graph ayudan al SEO?
No son un factor de posicionamiento para los buscadores. Determinan cómo se ve un enlace cuando se comparte, y una tarjeta clara con una buena imagen consigue más clics que una dirección sin más.
¿Qué diferencia hay entre las etiquetas Open Graph y las metaetiquetas?
La etiqueta title y la meta descripción se escriben para los buscadores. Las etiquetas Open Graph se escriben para las aplicaciones que muestran vistas previas de enlaces. Pueden llevar los mismos textos, pero una página necesita ambos conjuntos.
¿Se envían mis datos a un servidor?
No. La herramienta funciona por completo en tu navegador. Lo que introduces no se sube, no se registra y no se guarda en nuestros servidores.
Más herramientas SEO y web gratuitas
Genera etiquetas y archivos, comprueba códigos de estado, redirecciones, DNS y certificados: gratis y sin cuenta.