Twitter Card Preview

Nuevo

Previsualiza cómo se verá tu URL cuando se comparta en Twitter/X con maquetas en modo claro y oscuro.

Gratis siempre
Sin registro
Sin almacenamiento

example.com

Sin título

Sin descripción

Insertar esta herramienta

Agrega esta herramienta a tu sitio web con un fragmento iframe.

<iframe src="https://dukotools.com/tools/twitter-card-preview?embed=1" width="100%" height="600" frameborder="0" allow="clipboard-write" loading="lazy" title="twitter-card-preview tool"></iframe>

About Twitter Card Preview

La vista previa de la tarjeta de Twitter le muestra exactamente cómo se verá su URL cuando alguien la comparta en Twitter, tanto en modo claro como oscuro, antes de publicar la página. Twitter ofrece dos formatos de tarjeta: la tarjeta de resumen compacta coloca una pequeña miniatura cuadrada a la izquierda, mientras que la tarjeta resumen_imagen_grande coloca una imagen de ancho completo encima del título y la descripción. Esta herramienta representa ambos formatos con precisión. La vista previa dual claro/oscuro, una al lado de la otra, le permite verificar la legibilidad de ambos temas simultáneamente. El panel de validación verifica cada campo con los requisitos de Twitter y muestra una insignia de aprobado o reprobado por campo. La sección de salida HTML muestra las metaetiquetas exactas que necesita pegar en el encabezado de su página. Una sección de Cómo realizar la prueba explica cómo utilizar el Validador de tarjetas de Twitter y qué significa la caché de vista previa.

Características clave

  • Vista previa dual claro/oscuro

    Muestra maquetas precisas de tarjetas de Twitter en temas de interfaz de usuario claros y oscuros simultáneamente.

  • Modos de resumen e imagen grande

    Representa ambos tipos de tarjetas con las dimensiones correctas y el cambio de diseño al instante.

  • Insignias de validación por campo

    Insignias de aprobado o reprobado por campo según los límites de caracteres de Twitter y los requisitos de imagen.

  • Salida de metaetiqueta HTML

    Genera las etiquetas exactas de twitter:card, twitter:title, twitter:description, twitter:image y handle.

  • URL compartible

    Codifica todos los valores de la tarjeta en la URL para marcar o compartir configuraciones.

Cómo utilizar

  1. 1

    Elige tipo de tarjeta

    Seleccione resumen para una tarjeta compacta o resumen_imagen_grande para una tarjeta con imagen de ancho completo.

  2. 2

    Complete el contenido de la tarjeta

    Ingrese el título, la descripción y la URL de la imagen. Agregue el identificador de su sitio y el identificador del creador.

  3. 3

    Revisa ambas vistas previas

    Verifique las maquetas del modo claro y del modo oscuro simultáneamente para verificar la legibilidad en ambos temas.

  4. 4

    Corregir advertencias de validación

    Consulta el panel de validación. Las insignias rojas de falla indican campos que exceden los límites o no cumplen con los requisitos.

  5. 5

    Copiar metaetiquetas

    Haga clic en el botón Copiar para tomar todas las metaetiquetas de Twitter y pegarlas en el encabezado de su página.

Casos de uso del mundo real

Marketing de contenidos

Un especialista en marketing de contenido obtiene una vista previa de las tarjetas de los artículos antes de publicarlos para garantizar que la imagen y el titular se vean atractivos en la línea de tiempo de Twitter.

Control de calidad del desarrollador

Un desarrollador verifica las vistas previas del modo claro y oscuro para asegurarse de que la imagen de la tarjeta tenga suficiente contraste en ambos temas.

Gerente de redes sociales

Un administrador de redes sociales verifica que las etiquetas de las tarjetas de Twitter funcionen correctamente antes de programar una publicación importante de la campaña.

Preguntas frecuentes

Related Free Tools