ForHosting KIT · Veille et lecture de sites web

Générateur de balises Twitter Card pour vos aperçus

Saisissez un titre comme Build & Ship et obtenez les balises Twitter Card à coller telles quelles dans la section head de votre page, l'esperluette étant écrite &. Choisissez la carte résumé compacte ou celle à grand visuel ; les balises facultatives laissées vides sont omises. Gratuit dans votre navigateur.

Gratuit
Fonctionne dans votre navigateur
Sans inscription
Vos données restent sur votre appareil

Lancer gratuitement Voir l’API

Utilisez-le depuis WebAPIE-mailTelegramApp bientôt

Créez un jeu complet de balises meta Twitter Card sans mémoriser les noms des propriétés ni craindre les caractères dangereux dans les attributs HTML. Le générateur fournit à la fois des enregistrements structurés et un bloc HTML prêt à coller. Son fonctionnement est déterministe et sans requête réseau : une entrée identique produit toujours le même balisage, sans transmettre vos données à un service tiers de prévisualisation.

Choisissez le format adapté à votre aperçu

Commencez par choisir le rendu visuel souhaité lorsqu’un lien est partagé. Les autres types de Twitter Card requièrent des champs supplémentaires qui ne font pas partie de ce contrat. Si vous envoyez un type non compatible, la capacité renvoie une erreur de saisie typée au lieu de produire silencieusement un balisage incomplet.

Une faute de frappe ou un choix incompatible ne peut donc pas passer pour un jeu de balises plausible qui représenterait mal la carte voulue.

Fournissez un contenu sûr pour le HTML

Le titre est obligatoire et doit contenir autre chose que des espaces. Un chemin relatif peut fonctionner sur votre propre site, mais les robots des réseaux sociaux ont besoin d’une adresse qu’ils puissent demander indépendamment, raison pour laquelle le générateur le refuse. Le texte est échappé pour être placé dans un attribut HTML entouré de guillemets doubles.

Esperluettes, guillemets, chevrons et apostrophes deviennent des références de caractères : le texte visible est préservé sans pouvoir rompre la limite de l’attribut. Les enregistrements structurés gardent les valeurs normalisées et lisibles, tandis que le bloc HTML contient leur représentation échappée. Une application peut ainsi examiner ou conserver les métadonnées séparément du fragment inséré dans l’en-tête.

Installez et vérifiez les balises générées

Copiez les lignes HTML renvoyées dans l’élément head de la page destinée au partage. Après la mise en ligne, consultez le code source depuis une URL publique afin de confirmer que le serveur émet réellement les balises dans le HTML initial. Un script côté client qui ajoute les métadonnées après le chargement peut rester invisible aux robots, et une image privée ou protégée ne sera pas récupérable même avec une URL syntaxiquement valide.

Le générateur valide les métadonnées reçues, mais il ne contacte pas votre site, ne télécharge pas l’image, n’en mesure pas les dimensions et ne prédit pas le recadrage réalisé par un réseau social. La mise en cache dépend également de la plateforme qui consulte la page ; un ancien aperçu peut donc subsister après une modification.

Cas d’usage

Ajouter des balises sociales à un site statique

Générez des enregistrements et du HTML prévisibles pour chaque page, sans service réseau ni modèle de balises à maintenir.

Détecter les types de carte incompatibles

Refusez les types incompatibles ou mal orthographiés avant que des métadonnées incomplètes arrivent en production.

Questions fréquentes

Une image est-elle obligatoire ?

Non. Si image est omis, twitter:image n’apparaît pas.

Que se passe-t-il sans description ?

La balise twitter:description est entièrement omise. La sortie ne crée ni balise vide ni champ nul.

Les guillemets et esperluettes sont-ils échappés ?

Oui. Les caractères susceptibles de rompre un attribut sont encodés dans le HTML, tandis que les enregistrements restent lisibles.

Cet outil vérifie-t-il l’apparence de la carte publiée ?

Non. Il génère et valide localement les métadonnées fournies, sans consulter la page, analyser l’image ni contacter un service social.

Quel type de carte faut-il choisir ?

Choisissez le résumé lorsque le titre et le texte doivent dominer et que le visuel n'est qu'une vignette, comme pour un article, une documentation ou une fiche produit. Choisissez le grand format quand le visuel porte le sens, comme pour un reportage, un lancement, un portfolio ou une recette.

Outils associés

Pour les développeurs — accès API

Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.

Endpoint

POSThttps://api.kit.forhosting.com/web/twitter-card-generate

Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.

Appeler depuis votre 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)

Exemple de requête

{
  "card_type": "summary_large_image",
  "title": "A Practical Guide to Accessible Forms"
}

Exemple de réponse

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.twitter_card_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.

Tarifs

par requête$0.002

Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.

Limites

`timeout_sec`	30
`max_crawl_pages`	25

Erreurs

HTTP	Code	Signification
`401`	`unauthorized`	Clé API absente ou invalide : vérifiez l’en-tête Authorization.
`402`	`insufficient_balance`	Solde insuffisant : rechargez votre compte pour lancer cette tâche.
`404`	`unknown_type`	Type de tâche inconnu : vérifiez le champ type de votre requête.
`429`	`rate_limited`	Trop de requêtes : ralentissez la cadence, puis réessayez.

Notes techniques

Choisissez un type de carte pris en charge, indiquez le titre de l’aperçu et ajoutez éventuellement une description ainsi qu’une URL d’image absolue.

Choisissez le format adapté à votre aperçu

La carte summary constitue l’option compacte : elle convient aux articles, à la documentation, aux pages de produits et aux liens pour lesquels le titre et la description doivent rester prioritaires, l’image servant de vignette complémentaire. La carte summary_large_image accorde bien davantage de place au visuel et convient aux dossiers éditoriaux, lancements, portfolios, recettes et pages dont l’illustration apporte un contexte utile. Ce générateur prend volontairement en charge ces deux formats généralistes, car le type, le titre, la description et l’image suffisent à les définir complètement.

Fournissez un contenu sûr pour le HTML

La description et l’image sont facultatives : si vous ne les indiquez pas, leurs balises sont absentes, et la sortie ne remplace jamais les champs manquants par des balises vides ou des valeurs nulles. Toute image fournie doit utiliser une URL absolue HTTP ou HTTPS.

Installez et vérifiez les balises générées

Conservez une balise twitter:card et une balise twitter:title, puis twitter:description et twitter:image lorsque ces valeurs facultatives sont présentes. Pour une publication automatisée, l’API coûte $0.002 par requête ; la version navigateur emploie exactement la même logique déterministe.

Cas d'intégration

Préparer les métadonnées d’un nouvel article

Transformez le titre, le résumé et l’URL de l’image principale en bloc summary_large_image prêt à coller.

Questions techniques

Quels types de Twitter Card sont pris en charge ?

Le générateur accepte summary et summary_large_image. Tout autre type renvoie une erreur invalid_input.

Quel est le prix d’une génération par API ?

Chaque requête API coûte $0.002. La version navigateur s’exécute localement avec le même algorithme déterministe.

Consulter la documentation complète du KIT →

Lancer gratuitement

Choisissez le format adapté à votre aperçu

Fournissez un contenu sûr pour le HTML

Installez et vérifiez les balises générées

Cas d’usage

Ajouter des balises sociales à un site statique

Détecter les types de carte incompatibles

Questions fréquentes

Outils associés

Pour les développeurs — accès API

Endpoint

Appeler depuis votre stack

Exemple de requête

Exemple de réponse

Tarifs

Limites

Erreurs

Notes techniques

Choisissez le format adapté à votre aperçu

Fournissez un contenu sûr pour le HTML

Installez et vérifiez les balises générées

Cas d'intégration

Préparer les métadonnées d’un nouvel article

Questions techniques

merci