Generador de Metadatos Open Graph
Utilidad práctica para generador de etiquetas open graph para redes sociales directamente en su navegador, con procesamiento local en memoria y sin enviar sus datos a servidores externos.
Social Tarjeta Mockup
Generado HTML Meta Etiquetas
Acerca de Generador de Metadatos Open Graph
Al compartir enlaces en redes sociales como LinkedIn, Facebook y X, así como en aplicaciones de mensajería como Slack y WhatsApp, las plataformas leen las metaetiquetas Open Graph y Twitter Cards para mostrar tarjetas de vista previa visuales enriquecidas. Las páginas que carecen de estas etiquetas solo muestran enlaces de texto azul convencionales que consiguen una interacción muy baja.
Crear estas metaetiquetas manualmente suele dar pie a errores. Indicar una relación de aspecto incorrecta para la imagen provoca recortes indeseados, mientras que superar los límites de caracteres recomendados hace que los títulos se trunquen de forma poco estética en pantallas móviles.
Este generador de Open Graph y Twitter Cards en el navegador le permite personalizar etiquetas de vista previa social con tarjetas visuales en tiempo real. Puede comprobar cómo se mostrarán su titular, descripción e imagen en miniatura antes de generar un código HTML limpio.
Para optimizar la visualización de publicaciones compartidas, previsualice fragmentos de búsqueda con el previsualizador de metaetiquetas y compruebe las reglas de rastreo con el probador de robots.txt.
Especificaciones de ingeniería y detalles de ejecución
Genera etiquetas estándar de Open Graph Protocol (og:title, og:description, og:image, og:url, og:site_name, og:type).
Crea las etiquetas correspondientes para Twitter Cards (twitter:card, twitter:title, twitter:description, twitter:image).
Proporciona un contador de caracteres dinámico con indicadores visuales de advertencia al sobrepasar los límites de las plataformas.
Incluye declaraciones de dimensiones de imagen de respaldo (og:image:width y og:image:height) para optimizar el almacenamiento en caché de los rastreadores.
Se ejecuta íntegramente en JavaScript en el navegador sin realizar peticiones a servidores externos.
Privacidad de datos y aislamiento en memoria
Sus borradores de metadatos, URL internas y títulos de campañas inéditas permanecen privados en su ordenador.
No se cargan scripts de seguimiento ni widgets de redes sociales de terceros dentro del generador.
Casos de uso comunes en producción
- Redactores de contenidos que configuran fragmentos para compartir en redes sociales de artículos de blog y casos de estudio recién creados.
- Especialistas en crecimiento (growth marketers) que diseñan tarjetas de vista previa atractivas para lanzamientos de productos y páginas de aterrizaje promocionales.
- Desarrolladores web que crean módulos parciales de metadatos sociales para plantillas de Hugo, Astro, Jekyll o WordPress.
- Equipos comerciales de comercio electrónico que estandarizan tarjetas sociales de productos en catálogos de tiendas virtuales.
- Productores de podcasts que configuran tarjetas sociales de audio con carátulas personalizadas y descripciones de episodios.
Casos extremos y límites operativos
- URL de imagen relativas: Los rastreadores de plataformas sociales no pueden resolver rutas de imagen relativas; el generador advierte al usuario si falta una URL absoluta.
- Caracteres HTML especiales: Los signos ampersand (&), las comillas y los corchetes angulares dentro de títulos y descripciones se codifican debidamente para evitar etiquetas rotas.
- Imágenes excesivamente pesadas: Las imágenes que superan los 8 MB son rechazadas por los principales rastreadores sociales; la documentación recomienda un peso inferior a 5 MB.
- Cuenta de Twitter ausente: Si no se proporciona un nombre de usuario de Twitter para el creador, el generador omite de forma limpia la etiqueta opcional twitter:creator.
Preguntas Frecuentes
¿Cuál es el tamaño de imagen ideal para las vistas previas de Open Graph?
La dimensión recomendada es de 1200x630 píxeles, lo que corresponde a una relación de aspecto de 1,91:1. Esto garantiza una visualización nítida en pantallas Retina y de alta densidad de píxeles.
¿Dónde se deben colocar las metaetiquetas generadas en el sitio web?
Pegue las metaetiquetas generadas directamente dentro de la sección <head> de su documento HTML, antes de la etiqueta de cierre </head>.
¿Por qué mi imagen social actualizada no se muestra de inmediato en LinkedIn o Facebook?
Las redes sociales almacenan en caché los metadatos obtenidos de forma intensiva durante varios días. Utilice sus herramientas oficiales de inspección de publicaciones para purgar la caché y actualizar los datos de vista previa.
¿Se pueden utilizar imágenes SVG en las etiquetas de Open Graph?
La mayoría de los rastreadores de redes sociales no admiten imágenes en formato SVG para vistas previas de enlaces. Utilice siempre formatos de mapa de bits como PNG, JPEG o WebP en la etiqueta og:image.
¿Cuál es la diferencia entre summary y summary_large_image en Twitter?
El formato summary muestra una miniatura cuadrada pequeña junto al texto, mientras que summary_large_image muestra una imagen de ancho completo encima del titular.
¿Son obligatorios los metadatos de Open Graph para el posicionamiento en buscadores?
Las etiquetas Open Graph no influyen directamente en las posiciones de búsqueda orgánica de Google, pero mejoran sustancialmente el porcentaje de clics (CTR) y la interacción en redes sociales.