Générateur de balises Open Graph

Remplissez le titre, la description, l’URL canonique (canonical), l’image d’aperçu et l’og:type, et ce générateur écrit les balises <meta> Open Graph correspondantes, prêtes à coller dans le <head> de votre page. Les champs que vous laissez vides sont simplement omis, et les guillemets et esperluettes de votre texte sont échappés pour que le balisage reste valide. Le générateur écrit uniquement les cinq propriétés og: principales, pas les balises Twitter Card ni les balises d’article.

Comment générer vos balises OG

  1. 1

    Choisissez l'og:type

    website pour les pages d'accueil, article pour les publications, product pour les pages de boutique, video.other pour les intégrations. Le champ est du texte libre, donc n'importe quelle valeur og:type valide fonctionne.

  2. 2

    Remplissez les champs principaux

    Titre, description, URL canonique et une URL d'image absolue. Tout champ laissé vide est omis de la sortie.

  3. 3

    Générez les balises

    Les guillemets et esperluettes sont échappés pour vous, et vous obtenez une ligne meta par champ rempli.

  4. 4

    Copiez le bloc dans le head

    Collez-le dans le `<head>` du modèle de votre page, au-dessus des balises sociales déjà présentes.

Les balises produites par ce générateur

<meta property="og:type" content="article">
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A one-line description.">
<meta property="og:url" content="https://example.com/post/123">
<meta property="og:image" content="https://example.com/og-image.jpg">

C’est toute la sortie. og:type est toujours écrit, tandis que og:title, og:description, og:url et og:image ne sont ajoutés que lorsque vous les remplissez. Ces cinq propriétés sont les premières que lisent Facebook, LinkedIn, Slack, Discord, WhatsApp et X, elles couvrent donc le cas courant.

Le générateur n’écrit pas les balises de carte twitter:, ni og:image:width / og:image:height, og:site_name, og:locale ou les balises article:. Si vous en avez besoin, ajoutez-les à la main à côté du bloc généré.

Les valeurs og:type qui comptent

Type Quand l’utiliser
website Page d’accueil, pages de destination, contenu statique
article Articles de blog, actualités, pages éditoriales
product Pages de détail produit d’e-commerce
video.other Contenu vidéo et intégrations
profile Pages de profil d’auteur ou d’utilisateur
music.song Pages de pistes individuelles

Balises à ajouter à la main

Balise Rôle Exemple de valeur
og:site_name Nom du site dans son ensemble Example
og:locale Langue et région de la page en_US
og:image:width Aide les scrapers à disposer la carte plus vite 1200
og:image:height Aide les scrapers à disposer la carte plus vite 630
twitter:card Disposition de la carte sur X summary_large_image

X se rabat sur les balises og: lorsqu’il n’y a pas de balises twitter:, donc une page ne portant que les cinq propriétés générées s’affiche correctement en aperçu là aussi. N’ajoutez des balises twitter: que lorsque vous voulez un titre, une description ou une image différents spécifiquement sur X.

Erreurs courantes que ce générateur vous aide à éviter

  • name au lieu de property. Les propriétés Open Graph vont dans property="og:...". Le générateur écrit toujours le bon attribut.
  • Guillemets et esperluettes non échappés. Un " ou & brut dans votre titre casse la balise. Le générateur les échappe pour vous.
  • URL d’image relatives. Les scrapers sociaux n’acceptent que des URL absolues. Collez l’adresse https:// complète de l’image, car le générateur n’ajoute pas votre domaine.
  • Mauvaise taille d’image. 1200 × 630 pixels est la taille universellement sûre. En dessous de 200 × 200 pixels, l’image est généralement rejetée.

Questions fréquentes

Dans le <head> de votre HTML, tout en haut, de préférence près du <title>. Les scrapers lisent le head et s’arrêtent souvent tôt, donc garder les balises OG près du haut évite qu’elles soient manquées sur de très grandes pages.

Non. Il écrit uniquement les cinq propriétés og: principales. X se rabat sur Open Graph lorsqu’il n’y a pas de balises twitter:, donc votre aperçu fonctionne toujours. N’ajoutez des balises twitter: à la main que lorsque vous voulez un titre, une description ou une image différents sur X.

1200 × 630 pixels, JPG ou PNG, est la taille universellement sûre. Elle fonctionne sur Facebook, LinkedIn, grandes cartes de X, Slack, Discord et iMessage. Tout ce qui est plus petit que 200 × 200 pixels risque d’être entièrement rejeté.

Donnez à chaque version linguistique sa propre page avec ses propres balises og:, et ajoutez og:locale (par exemple en_US) ainsi que og:locale:alternate pour les autres versions à la main. Ce générateur n’écrit pas les balises de locale pour vous.

Outils similaires

Outil disponible dans d’autres langues