Generador de meta etiquetas Open Graph
Crea meta etiquetas Open Graph para las vistas previas en Facebook, LinkedIn, WhatsApp, Slack y Discord: título, descripción, imagen con tamaño y alt, tipo, URL, locale.
URL absoluta; 1200×630 px funciona en la mayoría de redes.
en_US, vi_VN, fr_FR…
<meta property="og:type" content="article"> <meta property="og:title" content="My Awesome Article"> <meta property="og:description" content="A short summary shown when the link is shared."> <meta property="og:url" content="https://example.com/article"> <meta property="og:site_name" content="Example"> <meta property="og:locale" content="en_US"> <meta property="og:image" content="https://example.com/og-image.png"> <meta property="og:image:secure_url" content="https://example.com/og-image.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Article cover">
¿Qué es Generador de Open Graph?
Esta herramienta genera las etiquetas Open Graph <meta property="og:…"> que controlan cómo se ve un enlace al compartirlo en Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram y muchas otras aplicaciones. Cubre og:type, título, descripción, URL, nombre del sitio, locale e imagen con URL segura, ancho, alto y texto alternativo, y avisa cuando faltan propiedades obligatorias.
Cómo usar Generador de Open Graph
- Rellena og:title, og:type, og:url y og:image (las cuatro propiedades obligatorias).
- Añade la descripción, el nombre del sitio, el locale y el tamaño y el texto alternativo de la imagen.
- Corrige cualquier aviso de propiedad ausente.
- Copia las etiquetas en el <head> de la página.
Cuándo usar Generador de Open Graph
Úsalo siempre que una página se vaya a compartir y quieras controlar la vista previa en lugar de dejar que cada aplicación la adivine. Las redes guardan las vistas previas en caché; tras cambiar las etiquetas, usa el depurador de la plataforma (p. ej. el Sharing Debugger de Facebook) para actualizarlas. Para X (Twitter), consulta también el generador de Twitter Card.
Cómo funciona Generador de Open Graph
Cada campo no vacío se convierte en una etiqueta <meta property="og:…" content="…"> con el contenido escapado en HTML, en el orden que recomienda el protocolo Open Graph. Cuando la URL de la imagen usa https, se añade una etiqueta og:image:secure_url con la misma URL; el ancho, el alto y el alt de la imagen solo se escriben si hay una imagen.
Casos de Uso Comunes
- Dar a las entradas de un blog una vista previa con imagen grande en LinkedIn y Facebook.
- Fijar og:locale en una página traducida.
- Añadir og:image:alt por accesibilidad.
- Hacer que las páginas de producto muestren el nombre y la foto del producto en WhatsApp.
Preguntas Frecuentes
¿Qué tamaño de imagen funciona mejor?
1200×630 px (1,91:1) se muestra bien en la mayoría de las plataformas. Mantén el contenido importante centrado, porque algunas aplicaciones recortan a un cuadrado.
¿Qué etiquetas og son obligatorias?
El protocolo exige og:title, og:type, og:image y og:url. La descripción y el nombre del sitio son opcionales, pero recomendables.
¿Por qué Facebook sigue mostrando mi imagen antigua?
Las vistas previas se guardan en caché. Vuelve a extraer la URL en el Sharing Debugger o cambia la URL de la imagen.