Generador de Open Graph
Genera metaeqtiquetas Open Graph y tarjetas de Twitter para tu sitio web con nuestro generador de etiquetas OG online gratuito. Rellena los detalles de tu página y previsualiza al instante cómo aparecerá tu enlace en Facebook, X/Twitter y LinkedIn. Personaliza tu título OG, descripción, imagen, nombre del sitio y tipo de tarjeta con representación de la tarjeta social en tiempo real. Todo el HTML generado está listo para copiar en el <head> de tu sitio web - sin registro.
Fill in your page details. Twitter tags will fall back to OG values if left blank.
¿Por qué usar nuestro generador de Open Graph?
- Vistas previas sociales multiplataforma: ve exactamente cómo aparecerá tu enlace en Facebook, X/Twitter y LinkedIn, todo en tiempo real. Previsualiza tarjetas enriquecidas con imágenes, títulos, descripciones y atribución del sitio antes de publicar.
- Vista previa en vivo mientras escribes: cada cambio en tu título OG, descripción o URL de imagen actualiza al instante las vistas previas de la tarjeta social. No hace falta generar y comprobar: lo que ves es lo que mostrarán las plataformas.
- Validación de dimensiones de imagen: las imágenes OG deben tener al menos 1200×630 píxeles con una proporción de 1,91:1 para una representación óptima. Nuestra herramienta valida la URL de tu imagen y te avisa de problemas habituales como enlaces rotos o URL no válidas.
- 100 % privado y en el lado del cliente: toda la generación de etiquetas y la representación de vistas previas ocurre enteramente en tu navegador. Nunca se sube a ningún servidor ninguna URL de página, título, descripción ni imagen: tus datos siguen siendo tuyos.
Casos de uso habituales del generador de Open Graph
- Responsables de SEO y marketing: optimiza cómo aparece tu contenido cuando se comparte en redes sociales. Previsualiza y perfecciona las etiquetas OG para maximizar la tasa de clics de los enlaces compartidos en Facebook, X, LinkedIn y Slack.
- Desarrolladores y diseñadores web: genera rápidamente metaeqtiquetas OG y de tarjeta de Twitter para nuevas páginas de destino, entradas de blog o aplicaciones web. Copia el fragmento HTML exacto para pegarlo en tus plantillas.
- Responsables de redes sociales: verifica cómo aparecerán los enlaces compartidos en las distintas plataformas sociales antes de publicar. Asegúrate de que imágenes, títulos y descripciones se vean profesionales y coherentes con la marca en todas partes.
- Creadores de contenido y blogueros: redacta y previsualiza cómo aparecerán tus entradas de blog y artículos cuando se compartan. Consigue que tu contenido destaque en feeds sociales saturados con metadatos OG atractivos.
- Startups y lanzamientos de producto: configura etiquetas de vista previa social adecuadas para páginas de lanzamiento, páginas de destino y campañas de marketing. Las primeras impresiones importan: haz que tus enlaces se vean premium en todas partes.
- Dueños de tiendas de comercio electrónico: genera etiquetas OG para páginas de producto y muestra vistas previas enriquecidas con imágenes de producto, precios y descripciones al compartir en redes sociales. Atrae más tráfico desde los enlaces compartidos.
Entender las etiquetas de Open Graph y redes sociales
- Etiquetas Open Graph esenciales explicadas: estas son las etiquetas más importantes. og:title define el titular de tu contenido (idealmente 40-60 caracteres), mientras que og:description ofrece un resumen de 2-3 frases (150-200 caracteres). Juntas forman la vista previa textual que los usuarios ven antes de hacer clic.
- og:image y og:image:width/height: la imagen OG es el ancla visual de tu tarjeta social. El tamaño recomendado es 1200×630 píxeles (proporción 1,91:1) para una visualización óptima en todas las plataformas. Especifica siempre el ancho y la altura para evitar saltos de diseño durante la carga de la imagen.
- og:url y og:type: og:url establece la URL canónica del contenido compartido; todas las señales sociales apuntan a esta URL. og:type indica a las plataformas qué tipo de contenido compartes (website, article, video.movie, music.song, etc.) para una representación correcta.
- Tarjetas de Twitter: Twitter/X usa sus propias metaeqtiquetas (twitter:card, twitter:site, twitter:creator) junto con las etiquetas OG. Usa summary_large_image para una tarjeta con foto destacada, o summary para una tarjeta compacta con miniatura. Twitter recurre a los valores OG cuando no se proporcionan etiquetas específicas de Twitter.
- Requisitos de imagen y buenas prácticas: las imágenes OG deben tener al menos 600×315 píxeles, pero se recomiendan 1200×630 píxeles para pantallas de alta densidad. Las imágenes menores de 200×200 píxeles no se mostrarán en Facebook.
Preguntas frecuentes
Un generador de Open Graph es una herramienta que te ayuda a crear las metaeqtiquetas (etiquetas OG) necesarias para vistas previas enriquecidas en redes sociales. Cuando compartes un enlace en Facebook, LinkedIn, X/Twitter o Slack, estas plataformas usan las etiquetas OG para mostrar una tarjeta con título, descripción e imagen. Nuestro generador ofrece un formulario sencillo para introducir tus datos y previsualizar al instante cómo aparecerá el enlace en varias plataformas.
Las etiquetas Open Graph (og:title, og:image, etc.) las usan Facebook, LinkedIn, Discord, Slack y muchas otras plataformas. Las tarjetas de Twitter son etiquetas específicas de Twitter/X (twitter:card, twitter:site, twitter:creator) que te dan control adicional sobre cómo aparece tu contenido en Twitter. Twitter también admite etiquetas OG como respaldo: si no se proporcionan etiquetas específicas de Twitter, Twitter usará los valores OG.
El tamaño de imagen OG recomendado es 1200×630 píxeles con una proporción de 1,91:1. Esto garantiza una visualización óptima en Facebook, LinkedIn, Twitter y la mayoría de las otras plataformas. El tamaño mínimo aceptable es 600×315 píxeles. Usa siempre imágenes de alta resolución para una visualización nítida en pantallas Retina y de alta densidad.
Hay varias razones habituales: (1) la URL de la imagen no es absoluta (debe empezar por https://), (2) la imagen es demasiado pequeña (menos de 200×200 píxeles), (3) el formato de imagen no es compatible, (4) el servidor bloquea a los rastreadores o (5) la plataforma ha almacenado en caché una versión anterior. Usa el Depurador de uso compartido de Facebook o el Validador de tarjetas de Twitter para diagnosticar y actualizar.
Usa estas herramientas oficiales de depuración: Facebook Sharing Debugger (developers.facebook.com/tools/debug), Twitter Card Validator (cards-dev.twitter.com/validator) y LinkedIn Post Inspector (linkedin.com/post-inspector). Introduce tu URL para ver cómo lee cada plataforma tus etiquetas y para borrar las vistas previas almacenadas en caché.
Para los títulos OG (og:title), apunta a 40-60 caracteres. Facebook muestra hasta ~90 caracteres antes de truncar. Para las descripciones OG (og:description), mantente dentro de 150-200 caracteres. Los títulos de Twitter deberían tener menos de 70 caracteres para una visualización óptima.
Lo mejor es incluir ambas. Aunque Twitter admite etiquetas OG como respaldo, proporcionar tarjetas de Twitter explícitas te da control total sobre cómo aparece el contenido en X/Twitter, con soporte para el tipo de tarjeta summary_large_image y la atribución del creador.
No. Todas las URL de imagen de OG y Twitter deben ser URL absolutas que empiecen por https://. Los rastreadores de las plataformas sociales obtienen el código fuente de tu página y necesitan una URL completa para descargar la imagen. Las rutas relativas no funcionarán porque el rastreador no puede resolverlas.
Sí, nuestro generador de Open Graph es 100 % gratuito y se ejecuta enteramente en tu navegador. Nunca se envía a ningún servidor ninguna URL de página, título, descripción ni URL de imagen. Tus datos permanecen privados y nunca abandonan tu dispositivo.