Softonic

Générateur de balises Meta

Étape 1 / 3
SEO de base
0/60
0/160
Robots
Suivant

Remplissez un formulaire, titre de la page, description, URL canonique, image sociale, auteur, nom du site, identifiant Twitter, et le générateur émet un bloc de balises meta prêt à coller couvrant les bases du SEO, Open Graph (pour Facebook, LinkedIn, Discord, Slack), carte Twitter, favicon/icône Apple touch, et un JSON-LD Schema.org optionnel pour Article ou Produit. Pratique lorsque vous configurez un site statique à la main ou que vous ajoutez des métadonnées à un CMS qui expose uniquement un éditeur <head> brut.

Comment construire l'extrait d'en-tête

  1. 1

    Entrez les métadonnées de la page

    Titre, description, URL canonique, auteur, nom du site.

  2. 2

    Ajoutez l'URL de l'image sociale

    Utilisé pour `og:image` et `twitter:image`. 1200×630 est idéal.

  3. 3

    Choisissez des options

    Type de carte Twitter, directives robots, couleur du thème, type Schema.org.

  4. 4

    Copiez la sortie

    Un bloc de balises HTML `<meta>` prêt à coller entre `<head>...</head>`.

Ce que produit le générateur

<!-- Balises Meta Principales -->
<title>Titre de la page, Nom du site</title>
<meta name="description" content="Un résumé de 150 caractères du contenu de la page.">
<link rel="canonical" href="https://example.com/page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Titre de la page">
<meta property="og:description" content="Même description ou une description optimisée pour les réseaux sociaux">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:site_name" content="Nom du site">

<!-- Carte Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@siteaccount">
<meta name="twitter:creator" content="@authoraccount">
<meta name="twitter:title" content="Titre de la page">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/og-image.jpg">

<!-- Icônes -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#0b5ed7">

Conseils champ par champ

  • Titre : 50–60 caractères. Incluez le mot-clé principal. Mettez la marque à la fin : Titre de la page, Marque.
  • Description : 140–160 caractères. Se lit bien isolément. Évitez les formules toutes faites qui se répètent sur les pages.
  • Canonical : URL absolue, incluant https://. Correspond à og:url.
  • Image OG : 1200×630 px minimum (le ratio préféré par Facebook 1.91:1). JPG ou PNG. Moins de 8 Mo.
  • Carte Twitter : summary_large_image si vous avez une bonne image ; summary pour une petite vignette.
  • Robots : index, follow pour les pages publiques ; noindex, nofollow pour les pages de staging ou de contenu léger.

Extras optionnels

  • JSON-LD pour Article ou Produit permet à Google d’afficher des résultats enrichis (auteur, date de publication, prix, étoiles d’évaluation).
  • theme-color colore le chrome du navigateur sur Android Chrome et iOS Safari.
  • og:locale pour les sites multilingues (par exemple en_US, es_ES).
  • Extras og:type=article : article:published_time, article:author, article:section, article:tag.

Erreurs courantes que ce générateur prévient

  • Oublier la balise viewport. Votre page s’affiche en largeur de bureau sur mobile, niveau de zoom 0.3.
  • Titres différents dans <title>, og:title et twitter:title. Cartes de partage incohérentes.
  • URLs d’images relatives dans og:image. Facebook ne peut pas les résoudre ; la carte ne s’affiche pas.
  • Manque de og:type. Les valeurs par défaut fonctionnent, mais Facebook préfère une valeur explicite.

Questions fréquentes

Techniquement, Twitter revient à Open Graph si ses propres balises sont absentes, donc si vous définissez uniquement OG, Twitter affichera toujours une carte. Ajouter des balises spécifiques à Twitter vous permet de personnaliser l’expérience (par exemple, un ratio d’image différent).

1200×630 px (1.91:1). Facebook et LinkedIn affichent cela en taille réelle ; Twitter le recadre pour la carte de résumé. Ne mettez pas de contenu critique sur les bords, le centre 60 % est la zone de sécurité.

Non. Les pages se classent bien sans cela. Le JSON-LD permet des fonctionnalités de résultats enrichis (cartes de recettes, accordéons FAQ, listes de produits) lorsque le type de contenu correspond à un schéma Schema.org. Ajoutez-le là où cela convient.

Entre <head> et </head> dans votre HTML, avant tout fichier CSS ou script externe qui pourrait retarder le parseur.

Non. Tout est généré localement dans votre navigateur.

Outils similaires

Convertisseur de taille de fichier

Convertissez entre octets, Ko, Mo, Go, To et les unités binaires IEC (Kio, Mio, Gio, Tio), en combinant décimal et binaire comme vous le souhaitez.

Générateur de Vagues SVG

Générez un séparateur en vague SVG fluide pour en-têtes et pieds de page, avec amplitude, fréquence, couleur et position haut ou bas réglables. Copiez le code SVG.

Générateur de flèches CSS

Créez localement une flèche CSS avec direction, couleur, taille et épaisseur de bordure, puis copiez la règle.

Convertisseur d'encodage de fichiers texte

Convertissez du texte entre UTF-8, UTF-16, Latin-1, Windows-1252 et d'autres encodages pour réparer les caractères corrompus.

Générateur de licence

Générez le texte complet des licences open source avec votre nom et l'année remplis. Couvre les licences MIT, Apache 2.0, GPLv3, BSD-3, MPL-2.0 et CC.

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Outil disponible dans d’autres langues