Cómo generar metaetiquetas HTML para Twitter Cards

Para qué sirve

El generador permite preparar el marcado HTML de una Twitter Card a partir de un título y de datos opcionales. Es útil cuando quieres reunir los metadatos que describen cómo puede presentarse una página al compartirla en una plataforma compatible. El resultado se centra en los campos de la tarjeta, no en el contenido visible de la página.

Puedes empezar con el título y añadir una descripción, una URL de imagen, el sitio y la cuenta del creador cuando esos datos formen parte de tu página. El tipo de tarjeta parte de summary_large_image si no se indica otro valor en el control correspondiente. Antes de usar el resultado, revisa que los valores representen la página que vas a publicar.

Cómo generar el marcado

1. Escribe un título no vacío en el campo correspondiente. El título es necesario para que se genere el marcado; si lo dejas vacío, no se producen entradas de metadatos.

2. Comprueba el tipo de tarjeta. Si no introduces un tipo distinto, el valor predeterminado es summary_large_image.

3. Añade, cuando proceda, una descripción no vacía, una URL de imagen, el sitio y el creador. La descripción, la imagen, el sitio y el creador se incorporan como campos adicionales cuando sus entradas no están vacías.

4. Revisa el resultado HTML generado. Con un título, el marcado incluye los metadatos del tipo de tarjeta y del título. Los campos opcionales aparecen según los datos que hayas proporcionado.

5. Si tu título o tus descripciones contienen caracteres reservados en HTML, comprueba el texto resultante antes de copiarlo. Los valores de entrada se escapan para insertarse en el marcado HTML.

Cómo leer el resultado

La presencia del tipo de tarjeta y del título indica que se han generado los campos principales a partir de un título válido. Si también aparecen campos de descripción, imagen, sitio o creador, corresponden a las entradas opcionales no vacías. Si falta todo el marcado, revisa primero que el título no esté vacío.

El escape HTML modifica la forma de ciertos caracteres dentro del marcado para que los valores se inserten como contenido de atributo. Por eso, el texto que ves en el código puede no coincidir literalmente con lo escrito en el formulario, aunque represente esos mismos datos al interpretarse como HTML.

Este resultado no demuestra por sí solo que una plataforma vaya a mostrar una vista previa enriquecida, aceptar la tarjeta o validar una URL. La configuración declarada del servicio indica acceso de red desactivado, pero ese dato no permite deducir cómo se ejecuta, si guarda entradas o si ofrece una garantía de privacidad.

Ejemplo práctico

Una persona prepara los metadatos de una guía de senderismo de Asturias antes de incorporar el marcado HTML a su página.

Introduce como título «Rutas costeras de Asturias», añade una descripción sobre una guía de senderismo y completa los campos opcionales de imagen, sitio y creador con los datos de esa página. Revisa después la estructura HTML generada.

El resultado contiene metadatos del tipo de tarjeta y del título. También puede contener los campos correspondientes a la descripción, la imagen, el sitio y el creador si esas entradas no están vacías; los caracteres reservados aparecen escapados en HTML.

Limitaciones

• El acceso de red declarado está desactivado. Este dato no permite concluir si las entradas se almacenan, si la ejecución es local o si existe una garantía de privacidad.
• El marcado generado no demuestra por sí solo que una plataforma acepte la tarjeta, muestre una vista previa enriquecida o valide una URL.

Errores frecuentes

• Causa: el título se ha dejado vacío o solo contiene una entrada que no aporta texto. Corrección: escribe un título antes de revisar el resultado, porque sin un título no se genera marcado ni aparecen entradas de metadatos.

Preguntas frecuentes

¿Qué ocurre si dejo vacío el título?

Solo si introduces un título no vacío. Con el título vacío no se genera marcado ni aparecen entradas de metadatos.

¿Qué tipo de tarjeta aparece si no selecciono otro?

El generador parte de summary_large_image cuando no introduces otro tipo de tarjeta. El resultado incluye el tipo de tarjeta y el título cuando el título es válido.

¿Puedo añadir una descripción, una imagen, un sitio y un creador?

Cuando la entrada no está vacía, se añade el campo correspondiente para la descripción, la imagen, el sitio o el creador. Después conviene comprobar el marcado generado.