Generador de OG y Twitter Cards — Constructor, Auditor y Previsualización de Etiquetas Meta
Crea etiquetas <meta> Open Graph y Twitter Card listas para pegar desde un formulario, o pega un <head> existente para auditarlo en busca de etiquetas ausentes, longitud de título/descripción y validez de twitter:card; luego previsualiza ambas en simulaciones de tarjetas de enlace con el estilo real de Twitter/X, Facebook, LinkedIn y Discord.
🔒 Procesado íntegramente en su navegador: nada de lo que ingresa aquí se carga nunca.
Resultado
Las etiquetas meta Open Graph y Twitter Card deciden el aspecto de un enlace en el instante en que se pega en Slack, iMessage, un tuit o un canal de Discord: un título, una descripción y una imagen elegidos por el <head> de la página, no por lo que la plataforma pueda extraer del texto visible del cuerpo. Esta herramienta es tanto un constructor como un auditor, no un simple rellenador de plantillas. En el modo CREAR, completa un título, una descripción, una URL de imagen, una URL canónica, un tipo de contenido y un tipo de tarjeta de Twitter, y compone el bloque exacto de etiquetas <meta property="og:..."> y <meta name="twitter:..."> listo para pegar en el <head> de tu página, omitiendo cualquier campo que dejes vacío en lugar de emitir etiquetas huecas con contenido en blanco.
En el modo AUDITAR, pega tu marcado <head> existente o el HTML de una página completa y la herramienta lo analiza con el DOMParser nativo del navegador para extraer cada etiqueta meta og: y twitter: ya presente, luego ejecuta las comprobaciones que realmente importan: las cuatro etiquetas comúnmente obligatorias (og:title, og:description, og:image, og:url) se señalan si faltan; og:title se mide contra el punto aproximado de 60 caracteres donde algunas plataformas empiezan a truncarlo y el punto aproximado de 90 caracteres donde la mayoría lo hará; og:description se mide contra el rango aproximado de 155 a 200 caracteres que la mayoría de plataformas permiten antes de cortarlo; twitter:card se comprueba contra los cuatro valores reales que acepta el validador de tarjetas de Twitter — summary, summary_large_image, app, player — y se señala si es cualquier otra cosa; y las etiquetas duplicadas (la misma propiedad declarada dos veces, un error de copiar y pegar sorprendentemente común) se indican por nombre.
Las dimensiones de la imagen reciben un tratamiento sincero: esta herramienta no puede verificar el tamaño real en píxeles de tu imagen sin descargarla, y deliberadamente nunca lo hace, en consonancia con la política de no realizar peticiones externas de este sitio. Si tu HTML ya declara og:image:width y og:image:height, esas cifras declaradas se comprueban contra el mínimo ampliamente recomendado de 1200×630; si no, recibes una nota de orientación clara en lugar de un aprobado o suspenso ficticio. Ambos modos renderizan las mismas cuatro simulaciones de previsualización de enlace — Twitter/X (alternando entre su formato compacto de miniatura «summary» y el formato de ancho completo «summary_large_image» según el valor de twitter:card), Facebook, LinkedIn y Discord — cada una con un estilo genuino que coincide con las convenciones tipográficas y de formato de esa plataforma, en lugar de una caja con un logotipo diferente, y cada una está claramente etiquetada como una aproximación ilustrativa para fines de planificación, ya que las plataformas reales rediseñan su aspecto de previsualización con el tiempo y esta herramienta nunca las descarga ni las analiza para comprobarlo.