Retour à l'implémentation du schema

Meta Tags et Open Graph

Guide technique complet pour l'optimisation de la recherche IA

Que sont les meta tags ?

Les meta tags sont des extraits de code dans votre HTML qui décrivent le contenu de votre page. Ils sont invisibles pour les visiteurs mais visibles pour les moteurs de recherche et les plateformes IA. Considérez-les comme des étiquettes qui expliquent de quoi parle votre page.

Pour l'optimisation GEO, les meta tags aident les moteurs IA à comprendre le contexte, l'objectif de votre contenu et comment l'afficher lorsqu'il est partagé. Des meta tags appropriés améliorent la découvrabilité et la présentation de votre contenu.

Meta tags essentiels

Meta Description

Un bref résumé du contenu de votre page. Apparaît dans les résultats de recherche et les réponses des moteurs IA. 150-160 caractères est idéal.

<meta name="description" content="Learn how to optimize your website for AI search engines with Bloffee's complete GEO optimization platform. Improve your content for ChatGPT, Claude, and other AI tools." />

Meilleures pratiques : Rédigez des descriptions uniques pour chaque page. Incluez naturellement les mots-clés principaux. Rendez-la convaincante et précise.

Balise Title

Le titre de votre page apparaît dans les onglets du navigateur, les résultats de recherche et lors du partage. 50-60 caractères recommandés. Incluez votre marque et mot-clé principal.

<title>Complete Guide to Meta Tags & Open Graph</title>

URL canonique

Indique aux moteurs de recherche la version préférée de votre page. Évite les problèmes de contenu dupliqué. Essentiel pour le GEO.

<link rel="canonical" href="https://geo-score.online/learn/technical/meta-tags-complete" />

Balise Meta Robots

Contrôle comment les moteurs de recherche et robots IA interagissent avec votre page. Utilisez "index, follow" pour autoriser l'accès complet.

<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />

Balises Open Graph

Les balises Open Graph contrôlent l'apparence de votre contenu lorsqu'il est partagé sur les réseaux sociaux. Créées à l'origine par Facebook, elles sont maintenant utilisées par de nombreuses plateformes dont les outils IA.

Exemple Open Graph complet

<meta property="og:title" content="Complete Guide to Meta Tags" /> <meta property="og:description" content="Master meta tags and Open Graph for GEO optimization." /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://geo-score.online/learn/technical/meta-tags-complete" /> <meta property="og:image" content="https://geo-score.online/images/meta-tags-guide.jpg" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:site_name" content="Bloffee" /> <meta property="og:locale" content="en_US" /> <meta property="article:published_time" content="2025-01-10T00:00:00.000Z" /> <meta property="article:modified_time" content="2025-01-10T12:00:00.000Z" /> <meta property="article:author" content="Bloffee" />

Exigences pour l'image Open Graph

Votre og:image est crucial. Il apparaît lorsque le contenu est partagé. Suivez ces spécifications :

  • Taille recommandée : 1200 x 630 pixels
  • Taille minimale : 600 x 314 pixels
  • Taille de fichier maximale : 8 Mo
  • Format : JPG ou PNG
  • Ratio d'aspect : 1,91:1

Balises Twitter Card

Les Twitter Cards fonctionnent de manière similaire à Open Graph mais sont spécifiques à Twitter/X. Elles améliorent l'apparence de vos liens sur la plateforme.

Exemple Twitter Card

<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@bloffee" /> <meta name="twitter:creator" content="@bloffee" /> <meta name="twitter:title" content="Complete Guide to Meta Tags" /> <meta name="twitter:description" content="Master meta tags and Open Graph for GEO." /> <meta name="twitter:image" content="https://geo-score.online/images/meta-tags-guide.jpg" />

Types de Twitter Card

  • summary : Petite vignette d'image carrée
  • summary_large_image : Grande image bannière (recommandé)
  • app : Pour les promotions d'applications mobiles
  • player : Pour le contenu vidéo/audio

Meta tags avancés pour le GEO

Informations sur l'auteur

Aide les moteurs IA à comprendre la paternité et l'autorité du contenu.

<meta name="author" content="Bloffee Team" /> <link rel="author" href="https://geo-score.online/about" />

Langue et locale

Spécifiez la langue du contenu pour les sites internationaux.

<html lang="en"> <meta property="og:locale" content="en_US" /> <meta property="og:locale:alternate" content="nl_NL" /> <meta property="og:locale:alternate" content="fr_FR" />

Charset et Viewport

Balises techniques essentielles pour un rendu approprié.

<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Modèle complet de meta tags

Utilisez ce modèle comme point de départ pour toutes vos pages :

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Primary Meta Tags --> <title>Your Page Title | Brand Name</title> <meta name="title" content="Your Page Title | Brand Name"> <meta name="description" content="Clear description of your page content in 150-160 characters."> <meta name="author" content="Your Name or Company"> <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1"> <link rel="canonical" href="https://yoursite.com/page-url"> <!-- Open Graph / Facebook --> <meta property="og:type" content="article"> <meta property="og:url" content="https://yoursite.com/page-url"> <meta property="og:title" content="Your Page Title"> <meta property="og:description" content="Clear description for social sharing."> <meta property="og:image" content="https://yoursite.com/image.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:site_name" content="Your Brand"> <meta property="og:locale" content="en_US"> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:url" content="https://yoursite.com/page-url"> <meta name="twitter:title" content="Your Page Title"> <meta name="twitter:description" content="Clear description for Twitter."> <meta name="twitter:image" content="https://yoursite.com/image.jpg"> </head> <body> <!-- Your content --> </body> </html>

Tester vos meta tags

Testez toujours les meta tags avant publication :

Débogueur de partage Facebook

Testez les balises Open Graph : developers.facebook.com/tools/debug/

Validateur Twitter Card

Testez les Twitter Cards : cards-dev.twitter.com/validator

Inspecteur de publication LinkedIn

Testez le partage LinkedIn : linkedin.com/post-inspector/

Conseils rapides meta tags

  • Rédigez des meta descriptions uniques pour chaque page
  • Gardez les titres sous 60 caractères
  • Utilisez des images de haute qualité pour og:image (1200x630px)
  • Incluez toujours les URL canoniques
  • Testez avec les outils de débogage avant publication
  • Mettez à jour og:image lorsque vous refaites le design ou rebrandez

Ressources connexes

Guide complet des meta tags et Open Graph pour la recherche IA