","err_audit_input_required":"Pegue primero el HTML que contiene sus metaetiquetas.","mockups_heading":"Cómo se ve como vista previa de un enlace","mockups_disclaimer":"Estas cuatro tarjetas son aproximaciones de estilo del Chrome de vista previa de enlace real de cada plataforma, creadas solo con fines de planificación; no son una captura en vivo ni una captura de pantalla de Twitter/X, Facebook, LinkedIn o Discord, y las plataformas pueden cambiar el estilo de su propia interfaz de usuario de vista previa con el tiempo.","mockup_twitter_heading":"Gorjeo / X","mockup_facebook_heading":"facebook","mockup_linkedin_heading":"LinkedIn","mockup_discord_heading":"discordia","mockup_image_alt":"Imagen de vista previa del enlace","mockup_no_image":"No se proporcionó ninguna imagen","mockup_no_image_short":"Sin imagen","domain_default_fallback":"ejemplo.com","audit_missing_title":"Falta og:title: la mayoría de las plataformas muestran un título genérico o en blanco sin él.","audit_missing_description":"Falta og:description: la tarjeta de vista previa no mostrará ningún texto de resumen.","audit_missing_image":"Falta og:image: la mayoría de las plataformas no muestran ninguna imagen o recurren a la primera imagen encontrada en la página.","audit_missing_url":"Falta og:url: sin él, es posible que las URL alternativas (con parámetros de seguimiento, versiones AMP, etc.) no se consoliden en la página canónica.","audit_title_too_long":"og:title tiene {length} caracteres, por encima del punto de ~{max} caracteres donde la mayoría de las plataformas lo truncarán.","audit_title_long":"og:title tiene {length} caracteres: por encima del punto de ~{max} caracteres donde algunas plataformas comienzan a truncarlo, aunque es posible que aún se muestre completamente en otros lugares.","audit_title_ok":"og:title tiene {length} caracteres, dentro del rango seguro para la mayoría de las plataformas.","audit_description_too_long":"og:description tiene {length} caracteres, por encima del punto de ~{max} caracteres donde la mayoría de las plataformas lo cortarán.","audit_description_long":"og:description tiene {length} caracteres, por encima del punto de ~{max} caracteres donde algunas plataformas comienzan a truncarlo.","audit_description_ok":"og:description tiene {length} caracteres, dentro del rango seguro para la mayoría de las plataformas.","audit_url_not_absolute":"og:url value \"{value}\" no es una URL http(s) absoluta; debe ser la URL canónica completa de la página.","audit_image_not_absolute":"og:el valor de imagen \"{value}\" no es una URL http(s) absoluta; la mayoría de las plataformas requieren una URL de imagen completamente calificada.","audit_image_dims_small":"El og:image:width/height declarado es {w}×{h}, por debajo del mínimo ampliamente recomendado de 1200×630 para vistas previas de enlaces.","audit_image_dims_ok":"El og:image:width/height declarado es {w}×{h}: cumple con el mínimo ampliamente recomendado de 1200×630.","audit_image_dims_unparseable":"og:image:width/og:image:height están presentes pero no son números válidos.","audit_image_dims_unknown":"No se declara og:image:width/og:image:height: las dimensiones reales en píxeles no se pueden verificar sin recuperar la imagen, lo que esta herramienta nunca hace, por diseño, por razones de privacidad. Mínimo recomendado: 1200×630.","audit_twitter_card_missing":"Sin etiqueta twitter:card: Twitter/X generalmente recurrirá a las etiquetas og: equivalentes, pero una twitter:card explícita es más confiable.","audit_twitter_card_invalid":"twitter:el valor de la tarjeta \"{value}\" no es uno de los cuatro valores que acepta el validador de tarjetas de Twitter: resumen, resumen_imagen_grande, aplicación, reproductor.","audit_twitter_card_ok":"twitter:card es \"{value}\", un valor válido.","audit_large_image_needs_image":"twitter:card es resumen_grande_imagen pero no se encontró og:image ni twitter:image; este tipo de tarjeta necesita una imagen para renderizarse correctamente.","audit_twitter_title_fallback":"Sin twitter:title establecido: Twitter/X volverá a og:title.","audit_twitter_description_fallback":"No hay twitter:descripción establecida: Twitter/X volverá a og:descripción.","audit_twitter_image_fallback":"Sin twitter:image establecido: Twitter/X volverá a og:image.","audit_duplicate_tag_item":"\"{tag}\" se declara {count} veces; solo el último análisis de la mayoría de las plataformas tendrá efecto."};
⭐ 0
🔍
Texto Imagen PDF y Docs Audio Música Electrónica Tiempo Utilidades Validadores Esoterismo Juegos

Generador de tarjetas OG y Twitter: creador, auditor y vista previa de metaetiquetas

Cree etiquetas <meta> de Open Graph y Twitter Card listas para pegar a partir de un formulario, o pegue un <head> existente para auditarlo en busca de etiquetas faltantes, longitud del título/descripción y validez de la tarjeta twitter:; luego, obtenga una vista previa de ambas en maquetas de tarjetas de enlace de Twitter/X, Facebook, LinkedIn y Discord genuinamente rediseñadas.

Buy Me a Coffee at ko-fi.com
Procesando... 0%
Entrada de lectura
Etiquetas de construcción/auditoría
Vistas previas de renderizado
hecho

Resultado

Las metaetiquetas Open Graph y Twitter Card deciden cómo se ve un enlace en el instante en que se pega en Slack, iMessage, un tweet o un canal de Discord: un título, una descripción y una imagen elegida por el propio <head> de la página, no por lo que la plataforma extrae del texto visible del cuerpo. Esta herramienta es a la vez un constructor y un auditor, no un rellenador de plantillas genérico. En el modo CONSTRUIR, complete un título, descripción, URL de imagen, URL canónica, tipo de contenido y tipo de tarjeta de Twitter, y compondrá exactamente el bloque de etiquetas <meta property="og:..."> y <meta name="twitter:..."> listo para pegar en el <head> de su página, omitiendo cualquier campo que deje vacío en lugar de emitir etiquetas huecas con contenido en blanco.

En el modo AUDIT, pegue su 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 metaetiqueta og: y twitter: ya presente, luego ejecuta las comprobaciones que realmente importan: las cuatro etiquetas comúnmente requeridas (og:title, og:description, og:image, og:url) se marcan si faltan; og:title se mide contra el punto de aproximadamente 60 caracteres donde algunas plataformas comienzan a truncarlo y el punto de aproximadamente 90 caracteres donde la mayoría de las plataformas lo harán; og:description se mide con respecto al rango de aproximadamente 155 a 200 caracteres que permiten la mayoría de las plataformas antes de cortarlo; twitter:card se compara con los cuatro valores reales que acepta el validador de tarjetas de Twitter (resumen, resumen_imagen_grande, aplicación, reproductor) y se marca si se trata de 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 su nombre.

Las dimensiones de la imagen reciben un tratamiento honesto: esta herramienta no puede verificar el tamaño real de píxeles de su imagen sin recuperarlo, y deliberadamente nunca lo hace, cumpliendo con la política de no solicitud externa de este sitio. Si su HTML ya declara og:image:width y og:image:height, esos números declarados se comparan con el mínimo ampliamente recomendado de 1200×630; de lo contrario, recibirá una nota orientativa clara en lugar de un aprobado o reprobado inventado. Ambos modos muestran las mismas cuatro maquetas de vista previa de enlaces: Twitter/X (alternando entre su diseño compacto de "resumen" en miniatura y el diseño de ancho completo "summary_large_image" dependiendo del valor de twitter:card), Facebook, LinkedIn y Discord, cada uno genuinamente rediseñado para que coincida con la tipografía y las convenciones de diseño propias de esa plataforma en lugar de un cuadro con un logotipo diferente, y cada uno está claramente etiquetado como una aproximación ilustrativa para propósitos de planificación, ya que es real. Las plataformas cambian el estilo de su vista previa de Chrome con el tiempo y esta herramienta nunca los recupera ni los extrae para verificarlos.

🛡️
Ejecutado en el navegador

Tus archivos y datos nunca salen de este dispositivo. El procesamiento se realiza completamente sin conexión. 100% seguro.

Formatos y reglas aceptados

  • El modo BUILD compone og:title, og:description, og:image, og:url, og:type, og:site_name y las etiquetas correspondientes de twitter:card/twitter:site/twitter:title/description/image, omitiendo cualquier campo que quede en blanco, con una copia con un solo clic del bloque listo para pegar.
  • El modo AUDIT extrae cada etiqueta og:/twitter: <meta> del HTML pegado a través del DOMParser del navegador, marca que faltan etiquetas requeridas (og:title/description/image/url), etiquetas duplicadas y valores de twitter:card no válidos.
  • La guía de longitud utiliza los umbrales reales comúnmente citados: og:title alrededor de 60 caracteres antes de que algunas plataformas comiencen a truncarlo (hasta aproximadamente 90 en las más permisivas), og:description alrededor de 155-200 caracteres.
  • Muestra la tarjeta Twitter/X en su diseño correcto para el tipo de tarjeta declarado: una tarjeta "resumen" compacta con una pequeña miniatura cuadrada o el diseño "summary_large_image" de ancho completo, junto con vistas previas de Facebook, LinkedIn y Discord.

Beneficios clave

✓ Dos herramientas reales en una: un modo CONSTRUIR que genera la etiqueta HTML exacta og: y twitter: <meta> desde un formulario, y un modo AUDIT que analiza el HTML pegado para encontrar y calificar sus etiquetas existentes.
✓ Validación real, no una lista de verificación cosmética: faltan etiquetas requeridas, longitud de og:title/og:description verificada con los límites reales en los que las plataformas truncan y twitter:card verificada con sus cuatro valores reales permitidos.
✓ Honestamente acerca de lo que no se puede verificar sin conexión: las dimensiones en píxeles de la imagen son solo orientativas a menos que su HTML ya declare og:image:width/og:image:height, ya que esta herramienta nunca recupera su imagen, por diseño, por privacidad.
✓ Cuatro maquetas de plataformas genuinamente diferentes (resumen de Twitter/X versus diseños de resumen_imagen_grande, Facebook, LinkedIn, Discord) creadas a partir del mismo título/descripción/imagen, claramente etiquetadas como ilustrativas.

Casos de uso

  • • Envíe una nueva publicación de blog con tarjetas sociales adecuadas: complete el título, la descripción y una imagen de portada alojada, genere el bloque de etiquetas og:/twitter: y péguelo directamente en el <head> de la página.
  • • Audite el <head> de una página de destino existente después de una migración de CMS para detectar una og:image faltante, un og:title que es lo suficientemente largo como para truncarse en algunas plataformas o un valor sobrante de twitter:card no válido.
  • • Compare cómo se lee el mismo título e imagen en la tarjeta de resumen compacta de Twitter/X versus su diseño de imagen_grande_resumen de ancho completo antes de decidir qué tipo de tarjeta twitter: declarar.