Vérificateur & simulateur OGP
- Sécurisé
- Les résultats du diagnostic ne sont ni enregistrés ni publiés.
Notes
Un outil pour valider les balises OGP et simuler l’apparence d’une page lorsqu’elle est partagée sur les réseaux sociaux.
Utile pour créer des images OGP et tester des balises meta HTML.
Source d’entrée
Choisissez l’une des trois méthodes.
| URL du site | Adapté aux sites accessibles publiquement. |
|---|---|
| Source HTML | Adapté aux sites en développement ou soumis à des restrictions d’accès. |
| Fichier image | Adapté pour vérifier le rendu d’une image OGP pendant sa création. |
Résultat du diagnostic
Évalué en trois niveaux.
| Note A | Répond à toutes les recommandations. |
|---|---|
| Note B | Répond aux éléments requis, mais il reste des recommandations. |
| Note C | Certains éléments doivent être corrigés. |
Exemple recommandé
Les réglages ci-dessous couvrent les principaux réseaux.
<meta property="og:title" content="Titre de la page">
<meta property="og:description" content="Description de la page">
<meta property="og:url" content="URL de la page">
<meta property="og:image" content="URL de l’image OGP">
<meta property="og:type" content="Type de page">
<meta property="og:site_name" content="Nom du site">
<meta name="twitter:card" content="Type de Twitter Card">Détails des balises
Balises OGP de base
Balises utilisables sur la plupart des réseaux. Il est recommandé de définir toutes les suivantes.
Utilisez l’attribut `property`.
<meta property="og:title" content="Titre de la page">
<meta property="og:description" content="Description de la page">
<meta property="og:url" content="URL de la page">
<meta property="og:image" content="URL de l’image OGP">
<meta property="og:type" content="Type de page">
<meta property="og:site_name" content="Nom du site">og:title
Définit le titre de la page. Généralement la même valeur que la balise `title`.
Sur X (Twitter), si elle manque, la Twitter Card peut être désactivée : c’est donc pratiquement requis.
<meta property="og:title" content="Titre de la page">Exemple
<meta property="og:title" content="Vérificateur & simulateur OGP">og:description
Définit la description de la page. Généralement la même valeur que la balise `description`.
Sur la plupart des réseaux, si elle est omise, `description` peut servir de fallback.
<meta property="og:description" content="Description de la page">Exemple
<meta property="og:description" content="Diagnostiquez les réglages OGP et prévisualisez l’apparence de votre page lors d’un partage sur les réseaux sociaux à partir d’une URL ou du HTML. Compatible avec X, Facebook et LINE, et simulation possible depuis un fichier image.">og:url
Définissez l’URL de la page cible en URL absolue.
<meta property="og:url" content="URL de la page">Exemple
<meta property="og:url" content="https://develop.tools/ogp-simulator/">og:image
Définissez l’URL de l’image OGP en URL absolue. Taille recommandée : `1200px`×`630px`.
Comme elle peut s’afficher en 1:1, gardez l’information importante dans la zone centrale `630px`×`630px`.
<meta property="og:image" content="URL de l’image OGP">Exemple
<meta property="og:image" content="https://develop.tools/_assets/img/meta/ogp/tools/ogp-simulator.png">og:type
Spécifie le type de la page.
| website | Page d’accueil du site |
|---|---|
| article | Pages non accueil (ex. articles) |
| blog | Page d’accueil du blog |
| product | Pages de détail produit/service |
<meta property="og:type" content="Type de page">Exemple
<meta property="og:type" content="article">og:site_name
Spécifie le nom du site. Généralement commun à toutes les pages.
<meta property="og:site_name" content="Nom du site">Exemple
<meta property="og:site_name" content="develop.tools">Balises X (Twitter)
Balises prioritaires pour X (ex‑Twitter).
Si les balises OGP de base sont définies, vous pouvez toutes les omettre sans problème.
Définissez `twitter:card` uniquement si vous voulez contrôler la taille de la miniature.
Utilisez l’attribut `name`.
<meta name="twitter:card" content="Type de Twitter Card">
<meta name="twitter:title" content="Titre de la page">
<meta name="twitter:description" content="Description de la page">
<meta name="twitter:image" content="URL de la miniature">
<meta name="twitter:site" content="Nom d’utilisateur X/Twitter du site">
<meta name="twitter:creator" content="Nom d’utilisateur X/Twitter de l’auteur">twitter:card
Définit le type de Twitter Card. Spécifiez-le si vous voulez une grande miniature.
Si omis, la valeur devient `summary`.
| summary | Petite miniature (carrée) + infos du site côte à côte |
|---|---|
| summary_large_image | Grande miniature + infos du site empilées |
<meta name="twitter:card" content="Type de Twitter Card">Exemple
<meta name="twitter:card" content="summary_large_image">Balises Facebook
Balises utilisées par Facebook.
Spécifiez-les si vous souhaitez utiliser des fonctionnalités d’analyse propres à Facebook.
<meta property="fb:app_id" content="ID d’application Facebook">