SuperDevTools

Générateur de meta tags et Open Graph avec aperçu

Lire les balises d'une page existante

Collez le code source du <head> d'une page, ou la page entière. Le code est seulement lu : aucun script n'est exécuté, aucune image n'est chargée.

La page

Une version par ligne : code de langue, une espace, puis l'adresse complète. x-default désigne la version par défaut.

Partage du lien (Open Graph et carte)

Adresse complète en https://. Dimensions conseillées : 1200 × 630 pixels (format 1,91:1).

Aperçus

Aperçus approximatifs : chaque moteur et chaque application a sa propre mise en page, coupe les textes à sa façon et peut réécrire le titre ou la description. L'image indiquée par adresse n'est pas téléchargée : seul son emplacement est dessiné.

Résultat de recherche
Carte de partage grande image
Carte de partage compacte
Aperçu dans une messagerie

Regarde cette page :

Points à vérifier

    Code HTML à coller dans le <head>

    Tout se passe dans votre navigateur : rien de ce que vous saisissez ou collez n'est envoyé.

    Les balises du <head>, écrites et vérifiées au même endroit

    Ce générateur de meta tags prépare les lignes à placer dans le <head> d'une page : titre, meta description, URL canonique, consignes aux robots, langue, viewport, couleur du navigateur, favicon et balises Open Graph qui décident de l'allure d'un lien partagé. Pendant que vous tapez, quatre aperçus se redessinent : un résultat de recherche, une carte de partage grande image, une carte compacte et un message contenant le lien.

    Le code produit est échappé : un titre comme Prix & avis : "Pro" < 50 € devient <title>Prix &amp; avis : "Pro" &lt; 50 €</title>, et dans les attributs content les guillemets deviennent &quot;.

    Mode d'emploi

    1. Remplissez « Titre (balise title) » et « Meta description ». Sous chaque champ, un compteur affiche le nombre de caractères et une largeur approximative en pixels.
    2. Indiquez l'« URL canonique », puis réglez « Indexation (robots) » et « Liens de la page (robots) ».
    3. Si votre site existe en plusieurs langues, complétez « Versions dans d'autres langues » : une ligne par version, par exemple en https://www.example.com/en/.
    4. Dans la partie partage, choisissez le « Type de contenu », la « Carte de partage » (summary_large_image pour une grande image, summary pour une vignette), l'adresse de l'image, ses dimensions, le nom du site et og:locale (par exemple fr_FR).
    5. Lisez « Points à vérifier », puis cliquez sur « Copier le code » et collez-le dans le <head> de votre page.

    Pour partir d'une page existante, ouvrez « Lire les balises d'une page existante », collez son code source et cliquez sur « Lire les balises » : le formulaire se remplit. Rien n'est envoyé : tout se passe dans votre navigateur.

    À quoi sert chaque balise

    Le title est la ligne cliquable d'un résultat de recherche et le nom de l'onglet. La meta description sert de résumé sous ce titre. Les moteurs coupent ces textes à l'affichage, selon une largeur en pixels plutôt qu'un nombre fixe de caractères, et ils les réécrivent parfois. Les repères de l'outil (environ 50 à 60 caractères pour le titre, 150 à 160 pour la description) sont des ordres de grandeur, pas une règle officielle. L'exemple fourni, « Confiture d'abricots maison : la recette en 4 étapes », compte 52 caractères et sa description 146 : les deux tiennent dans les repères.

    L'URL canonique désigne l'adresse de référence quand une même page répond à plusieurs adresses. La balise robots avec noindex retire une page des résultats ; nofollow demande de ne pas suivre ses liens.

    Les balises Open Graph (og:title, og:description, og:image…) sont lues par les réseaux sociaux et les messageries quand un lien est collé. Laissés vides, le titre et la description de partage reprennent ceux de la page.

    Image de partage et test de l'aperçu

    Une image de 1200 × 630 pixels, au format 1,91:1, convient aux grandes cartes. Si vous saisissez 800 × 418, l'outil signale qu'elle risque d'être floue ; avec 1000 × 1000, il prévient qu'elle sera recadrée. L'outil ne télécharge pas cette adresse : il dessine un emplacement. Pour voir le rendu réel, utilisez « Essayer une image de votre appareil » : le fichier s'affiche dans les aperçus sans quitter votre ordinateur, et ses dimensions sont reprises.

    Ces aperçus sont des maquettes génériques. Après la mise en ligne, testez le lien en le collant dans une conversation privée : les plateformes gardent souvent l'ancien aperçu en mémoire quelques jours, et certaines proposent un outil pour le rafraîchir.

    Questions fréquentes

    Faut-il ajouter la balise meta keywords ?

    Non. Les grands moteurs de recherche l'ignorent depuis longtemps, c'est pourquoi l'outil ne la propose pas.

    Pourquoi mon titre n'apparaît-il pas tel quel dans les résultats ?

    Les moteurs peuvent remplacer un titre jugé trop long, trop vague ou différent du contenu.

    Mon ancien aperçu s'affiche encore après modification, est-ce normal ?

    Oui. Les aperçus de lien sont mis en cache par les plateformes de partage. Vérifiez que les nouvelles balises sont bien en ligne, puis attendez le prochain passage de leur robot.