Générateur de balises meta — Open Graph et cartes X
Un générateur de balises meta pour le référencement et le partage, avec aperçus des liens
Traitement dans le navigateur · aucun envoi de fichier
Des valeurs d’exemple sont remplies. Remplacez-les par les informations de votre page.
Utilisez l’adresse complète commençant par https:// (ou http://).
Adresse complète de l’image affichée lors du partage du lien. L’aperçu charge l’image directement depuis cette adresse.
Avec ou sans @. Laissez vide pour omettre la balise.
Balises générées
12 lignes de balises générées, 2 points à vérifier
- Sans image, les aperçus KakaoTalk et Facebook n’affichent aucune illustration.
- La carte grande image est sélectionnée, mais il n’y a pas d’image.
<title>Compteur de caractères — Compter mots et caractères</title> <meta name="description" content="Collez votre texte pour compter instantanément les caractères avec et sans espaces, les mots et les octets."> <link rel="canonical" href="https://www.example.com/fr/character-counter/"> <meta property="og:type" content="website"> <meta property="og:title" content="Compteur de caractères — Compter mots et caractères"> <meta property="og:description" content="Collez votre texte pour compter instantanément les caractères avec et sans espaces, les mots et les octets."> <meta property="og:url" content="https://www.example.com/fr/character-counter/"> <meta property="og:site_name" content="Site d’exemple"> <meta property="og:locale" content="fr_FR"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Compteur de caractères — Compter mots et caractères"> <meta name="twitter:description" content="Collez votre texte pour compter instantanément les caractères avec et sans espaces, les mots et les octets.">
Collez-les dans le <head> de votre HTML.
Aperçus (maquettes)
Compteur de caractères — Compter mots et caractères
Collez votre texte pour compter instantanément les caractères avec et sans espaces, les mots et les octets.
example.com
Site d’exemple
https://www.example.com/fr/character-counter/
Compteur de caractères — Compter mots et caractères
Collez votre texte pour compter instantanément les caractères avec et sans espaces, les mots et les octets.
Ce sont des maquettes des vraies applications ; les longueurs et les points de coupure peuvent différer. Vérifiez la largeur du titre et de la description Google avec l’outil d’aperçu SERP. KakaoTalk peut garder un certain temps l’aperçu d’un lien déjà vu ; un ancien aperçu peut donc apparaître après la modification des balises.
Les noms de balises suivent le protocole Open Graph (ogp.me) et les cartes X (Twitter). KakaoTalk, Facebook, LinkedIn et Slack lisent og:title, og:description, og:image et og:url ; X lit twitter:card et peut se rabattre sur les balises og: pour le reste. Les guillemets, <, > et & de votre texte sont échappés pour le HTML. Rien de ce que vous saisissez n’est enregistré ni envoyé.
Présentation
Ce générateur de balises meta écrit les balises du head qui déterminent l’apparence d’une page dans les résultats de recherche et lorsque son lien est partagé. Les messageries et les réseaux sociaux construisent leurs cartes de lien à partir des balises Open Graph, et X ajoute ses propres balises de carte. Remplissez un court formulaire et obtenez un HTML à coller tel quel dans le head de votre page, avec l’échappement des guillemets géré pour vous et des maquettes d’une carte de lien KakaoTalk et d’un résultat Google.
Mode d’emploi
- Saisissez le titre, la description et l’URL de la page. Des valeurs d’exemple sont remplies pour commencer.
- Ajoutez l’URL complète de l’image de partage et une courte description de celle-ci. Sans image, un avertissement vous rappelle que les cartes de partage n’auront pas d’illustration.
- Choisissez le nom du site, le type de page, la langue et le type de carte X. L’identifiant X est facultatif.
- Corrigez ce qui est signalé sous les balises générées, comme des URL relatives ou un titre vide.
- Copiez les balises dans le head de votre page.
- Consultez les maquettes d’aperçu pour avoir une idée approximative du résultat.
Fonctionnement
- Les noms de balises suivent le protocole Open Graph (ogp.me) : og:type, og:title, og:description, og:url, og:site_name, og:locale, og:image et og:image:alt, plus les balises de carte X : twitter:card, twitter:site, twitter:title, twitter:description et twitter:image.
- L’URL de la page sert à la fois pour le lien canonical et pour og:url.
- Les guillemets, <, > et & sont échappés en entités HTML, les sauts de ligne et les espaces répétés sont réduits à une seule espace, et les champs vides ne produisent aucune balise.
- Les identifiants X ne sont acceptés que s’ils comptent 1 à 15 lettres, chiffres ou tirets bas.
- Les aperçus sont des maquettes ; les vraies applications utilisent leurs propres polices et règles de troncature.
Exemples
| Saisie | Balise générée |
|---|---|
| Titre : Compteur de caractères | <title>Compteur de caractères</title>, og:title, twitter:title |
| Description avec des “guillemets” | content="Description avec des "guillemets"" |
| Identifiant X : toolsnack | <meta name="twitter:site" content="@toolsnack"> |
| Image /og.png | Avertissement : utilisez une adresse https:// complète |
Questions fréquentes
Quelles balises les aperçus de liens utilisent-ils ?
KakaoTalk, Facebook, LinkedIn et Slack lisent og:title, og:description, og:image et og:url. X lit d’abord twitter:card et peut se rabattre sur les balises og: pour le titre, la description et l’image.
Pourquoi mon image n’apparaît-elle pas dans l’aperçu ?
og:image doit être une adresse complète commençant par https://. Les chemins relatifs comme /og.png sont ignorés par la plupart des robots, et l’image doit être accessible publiquement.
J’ai modifié les balises, mais l’ancien aperçu s’affiche toujours.
Des applications comme KakaoTalk ou Facebook peuvent garder un certain temps l’aperçu d’un lien déjà vu. Il se met à jour avec le temps, et les outils pour développeurs des plateformes permettent de leur demander de relire la page.
Quelle longueur pour le titre et la description ?
Google coupe les extraits selon leur largeur, pas selon le nombre de caractères. Utilisez l’outil d’aperçu SERP pour voir exactement où votre titre et votre description seraient tronqués.
Mes saisies sont-elles enregistrées ?
Non. Les balises et les aperçus sont construits dans votre navigateur. Si vous saisissez l’URL d’une image, votre navigateur charge directement cette image pour afficher l’aperçu.
