Generador de etiquetas Twitter Card para vistas previas
Escriba un título como Build & Ship y obtenga las etiquetas Twitter Card listas para pegar en la cabecera de su página, con el ampersand escrito como &. Elija la tarjeta resumen compacta o la de imagen grande; las etiquetas opcionales vacías se omiten. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Corre en su navegador. Gratis y sin límite: sus datos no salen de esta página.
Cree un conjunto completo de etiquetas meta Twitter Card sin memorizar nombres de propiedades ni preocuparse por caracteres inseguros en atributos HTML. Elija un tipo de tarjeta admitido, indique el título de la vista previa y añada, si lo desea, una descripción y una URL absoluta de imagen. El generador devuelve tanto registros estructurados como un bloque HTML listo para pegar. Funciona de forma determinista y sin solicitudes de red, por lo que una misma entrada siempre produce el mismo código y sus datos no se envían a servicios externos de previsualización.
Elija el formato adecuado para la vista previa
Empiece por el tratamiento visual que desea cuando se comparta un enlace. La tarjeta summary es la opción compacta: resulta adecuada para artículos, documentación, páginas de producto y otros enlaces donde el título y la descripción deben dominar, mientras la imagen actúa como miniatura de apoyo. Este generador admite deliberadamente esos dos formatos generales porque pueden describirse por completo mediante el tipo, el título, la descripción y la imagen.
Los demás tipos de Twitter Card necesitan campos adicionales que no forman parte de este contrato. Si usted envía un tipo no admitido, la capacidad devuelve un error de entrada tipado en lugar de generar código incompleto silenciosamente. Así, una errata o una selección incompatible no puede convertirse en un conjunto de etiquetas aparentemente válido que no represente la tarjeta prevista.
Proporcione contenido seguro para HTML
El título es obligatorio y debe contener texto que no sea solo espacios. La descripción y la imagen son opcionales; si usted no las facilita, sus etiquetas se omiten y la salida nunca rellena campos ausentes con etiquetas vacías ni valores nulos. Las rutas relativas pueden funcionar en su propio sitio, pero los rastreadores sociales necesitan una dirección que puedan solicitar de forma independiente, por lo que el generador las rechaza.
El texto se escapa para usarlo dentro de un atributo HTML entre comillas dobles. Los ampersands, comillas, signos angulares y apóstrofos se convierten en referencias de caracteres, conservando el texto visible sin permitir que rompa el límite del atributo. Los registros estructurados mantienen los valores normalizados y legibles, mientras que el bloque HTML contiene la representación escapada destinada al marcado.
Esta separación permite inspeccionar o guardar los metadatos independientemente del fragmento insertado en la cabecera.
Instale y compruebe las etiquetas generadas
Copie las líneas HTML devueltas dentro del elemento head de la página que se compartirá. Después de publicar, examine el código fuente desde una URL pública y confirme que el servidor emite realmente las etiquetas en el HTML inicial. El código del cliente que añade metadatos tras la carga puede resultar invisible para los rastreadores, y una imagen privada o protegida no podrá descargarse aunque su URL sea sintácticamente válida.
El generador valida los metadatos aportados, pero no contacta con su sitio, descarga la imagen, mide sus dimensiones ni predice cómo recortará la vista previa una red social. La caché también depende de la plataforma que consulta la página, de modo que una vista anterior puede seguir apareciendo después de actualizar las etiquetas.
Qué puede hacer con ella
Añada etiquetas sociales a un sitio estático
Genere registros y HTML predecibles para cada página sin llamar a un servicio de red ni mantener una plantilla propia.
Detecte selecciones de tarjeta no admitidas
Rechace tipos incompatibles o mal escritos antes de que lleguen metadatos incompletos a producción.
Preguntas frecuentes
¿Es obligatoria una imagen?
No. Si se omite image, el resultado no incluye twitter:image.
¿Qué ocurre si se omite la descripción?
La etiqueta twitter:description se omite por completo. La salida no crea etiquetas vacías ni campos nulos.
¿Se escapan las comillas y los ampersands?
Sí. Los caracteres capaces de romper un atributo HTML se codifican en la salida HTML, mientras los registros conservan valores legibles.
¿Comprueba esta herramienta el aspecto de la tarjeta publicada?
No. Genera y valida localmente los metadatos indicados; no consulta la página, inspecciona la imagen ni contacta con servicios sociales.
¿Qué tipo de tarjeta me conviene elegir?
Elija la tarjeta resumen cuando el título y la descripción deban mandar y la imagen sea solo una miniatura, como en artículos, documentación o fichas de producto. Elija la de imagen grande cuando la ilustración aporte sentido, como en reportajes, lanzamientos, portafolios o recetas.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/web/twitter-card-generate \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"card_type":"summary_large_image","title":"A Practical Guide to Accessible Forms"}'const res = await fetch("https://api.kit.forhosting.com/web/twitter-card-generate", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"card_type": "summary_large_image",
"title": "A Practical Guide to Accessible Forms"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/twitter-card-generate",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"card_type": "summary_large_image",
"title": "A Practical Guide to Accessible Forms"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/twitter-card-generate", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"card_type":"summary_large_image","title":"A Practical Guide to Accessible Forms"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"card_type":"summary_large_image","title":"A Practical Guide to Accessible Forms"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/twitter-card-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"card_type": "summary_large_image",
"title": "A Practical Guide to Accessible Forms"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.twitter_card_generate",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
timeout_sec | 30 |
max_crawl_pages | 25 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Elija el formato adecuado para la vista previa
La tarjeta summary_large_image concede mucho más protagonismo a la imagen y funciona bien para reportajes, lanzamientos, portfolios, recetas y páginas cuyo diseño aporta contexto útil.
Proporcione contenido seguro para HTML
Cuando se incluye una imagen, debe utilizar una URL absoluta HTTP o HTTPS.
Instale y compruebe las etiquetas generadas
Mantenga una etiqueta para twitter:card y otra para twitter:title, seguidas de twitter:description y twitter:image cuando existan esos valores opcionales. Para publicaciones automatizadas, la API cuesta $0.002 por solicitud; la versión del navegador utiliza la misma lógica determinista.
Casos de integración
Prepare los metadatos de un artículo nuevo
Convierta el titular, el resumen y la URL de la imagen principal en un bloque summary_large_image listo para pegar.
Preguntas técnicas
¿Qué tipos de Twitter Card se admiten?
El generador admite summary y summary_large_image. Cualquier otro tipo devuelve un error invalid_input.
¿Cuánto cuesta la generación mediante API?
Cada solicitud de API cuesta $0.002. La versión del navegador se ejecuta localmente con el mismo algoritmo determinista.