Generador de etiquetas Open Graph

¿Qué es el generador de etiquetas Open Graph?

El generador de etiquetas Open Graph escribe las metaetiquetas que controlan cómo se ve un enlace al compartirlo: el título, la descripción, la imagen y la URL que leen Facebook, LinkedIn, WhatsApp, Slack, Discord y X para construir una tarjeta de vista previa. Rellena los campos, observa cómo se actualiza la vista previa y copia el bloque de etiquetas en el head de tu página. Cubre las etiquetas Open Graph y Twitter Card y funciona por completo en tu navegador.

Cómo se usa

1. Introduce la URL de la página, el título, la descripción y la URL de la imagen. La imagen debe medir al menos 1200 × 630 píxeles y tener una URL absoluta.
2. Define el tipo: sitio web, artículo, vídeo, música, perfil, libro, producto, lugar o evento.
3. Elige el estilo de Twitter Card: summary_large_image sirve para casi todo.
4. Revisa la vista previa y copia las etiquetas en tu sección head.
5. Después de publicar, pasa la URL por el depurador de la plataforma (Facebook Sharing Debugger, LinkedIn Post Inspector) para limpiar su caché.

Las etiquetas que importan

• og:title y og:description pueden diferir de tu título SEO; escríbelos para un feed social, más cortos y directos.
• og:image es la que la gente nota. 1200 × 630, menos de 1 MB, JPG o PNG, URL absoluta, e incluye og:image:width y height para que el primer uso compartido se muestre bien.
• og:url debe ser la URL canónica, sin parámetros de seguimiento.
• twitter:card con summary_large_image, más twitter:title, description e image; X recurre a las etiquetas OG para lo que falte.

Por qué se rompen las vistas previas (imágenes antiguas en caché, rutas relativas, cadenas de redirecciones, imágenes bloqueadas por robots.txt) y cómo arreglar cada caso en cada plataforma se explica en etiquetas Open Graph explicadas: cómo arreglar las vistas previas de enlaces en cada plataforma.

Errores comunes

• Rutas de imagen relativas. Todas las plataformas exigen una URL https absoluta.
• Una imagen de menos de 600 píxeles de ancho, que activa la diminuta miniatura cuadrada.
• Olvidar que las plataformas guardan las vistas previas en caché; cambiar las etiquetas no sirve de nada hasta que se vuelve a leer la URL.
• Bloquear la carpeta de imágenes en robots.txt, lo que impide que el rastreador obtenga la imagen.
• Etiquetas colocadas en el body en lugar de en el head.

Herramientas relacionadas

Comprueba qué tiene ahora una página en vivo con el extractor de metaetiquetas, ajusta una imagen de vista previa a 1200 × 630 con el redimensionador de imágenes y previsualiza el resultado de búsqueda con la vista previa SERP.

Preguntas frecuentes

¿Necesito etiquetas Open Graph y de Twitter?

Open Graph cubre la mayoría de las plataformas; añade twitter:card para que X use el diseño de imagen grande. El generador incluye ambas.

¿Por qué mi vista previa sigue mostrando la imagen antigua?

La plataforma la guardó en caché. Vuelve a leer la URL con su herramienta de depuración.

¿WordPress añade estas etiquetas automáticamente?

Yoast y Rank Math lo hacen a partir de la imagen destacada. Usa esta herramienta para páginas estáticas, plantillas propias o para sobrescribirlas página por página.

¿Se guardan datos?

No. Las etiquetas se generan en tu navegador.