Aller au contenu
PROJET WEB DYNAMIQUE

OG tags

Open Graph – Ne soyez pas moche sur les réseaux

Vous avez soigné votre SEO pour plaire à Google. Super. Mais que se passe-t-il quand quelqu'un partage votre lien sur Facebook, LinkedIn, WhatsApp ou Slack ?

Sans Open Graph (OG), c'est la roulette russe : une image coupée, un titre bizarre ou pire... rien du tout.

Avec les balises OG, vous prenez le contrôle de votre apparence. C'est la différence entre tendre une carte de visite dorée et gribouiller son nom sur une serviette en papier.

I. C'est quoi ce truc ?

Le protocole "Open Graph" a été inventé par Facebook, mais aujourd'hui tous les réseaux sociaux l'utilisent (LinkedIn, Twitter/X, Discord, etc.).

C'est simple : ce sont des balises cachées dans le <head> de votre code qui disent aux réseaux sociaux :

"Eh ! Quand on partage cette page, affiche CETTE image et CE titre, pas n'importe quoi."

II. Les 4 Fantastiques (Les Balises Indispensables)

Vous n'avez besoin que de 4 balises pour transformer l'apparence de vos liens.

1. og:image (La Star)

C'est l'élément le plus important. Une image vaut 1000 mots, surtout sur un fil d'actualité où l'on scrolle à toute vitesse.

  • Le conseil : Utilisez une image spécifique, aux bonnes dimensions (idéalement 1200 x 630 pixels).

  • L'erreur : Laisser le réseau social choisir une image au hasard (souvent votre logo tout petit ou une icône de pied de page).

2. og:title (L'Accroche)

Similaire à votre balise <title> SEO, mais vous pouvez être plus "clicky" ou conversationnel ici.

  • Exemple : "Découvrez notre recette !" (Un peu mou) vs "Le Gâteau au Chocolat qui a cassé Internet 🍫" (Mieux).

3. og:description (Le Teasing)

Un court résumé (2-3 lignes max). Contrairement à la meta description Google, celle-ci est souvent affichée en gros sous le titre sur Facebook/LinkedIn.

4. og:url (L'Adresse Officielle)

L'URL canonique de la page (sans les paramètres de tracking bizarres).

III. Le Choc des Photos : Avant / Après

Visualisez le partage de votre lien sur un fil LinkedIn ou dans une conversation WhatsApp :

🤢 Sans Open Graph (Le mode "Loto") 😎 Avec Open Graph (Le mode "Pro")
Image : Aucune, ou une icône pixélisée coupée en deux. Image : Une grande bannière visuelle qui claque.
Titre : "Accueil" ou "index.html". Titre : "Boostez votre Productivité : Le Guide".
Desc : "Copyright 2024... Mentions légales..." (Il a pris le premier texte qu'il a trouvé). Desc : "5 méthodes simples pour gagner 2h par jour."
Résultat : On dirait un site cassé ou un spam. Résultat : On a confiance, on clique.

IV. Code : À quoi ça ressemble ?

C'est très simple à ajouter dans votre HTML (<head>) :

HTML

<meta property="og:title" content="Le Guide Ultime du SEO" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://monsite.com/guide-seo" />
<meta property="og:image" content="https://monsite.com/images/banner-social.jpg" />
<meta property="og:description" content="Tout comprendre au référencement en 5 minutes chrono." />

💡 Le cousin Twitter :

Twitter (X) utilise l'Open Graph, mais préfère ses propres balises pour un rendu optimal. Ajoutez simplement :

<meta name="twitter:card" content="summary_large_image">

Cela force l'affichage de la grande image.

V. L'Outil Magique : Le Debugger

Vous avez ajouté vos balises mais l'image ne s'affiche pas ? C'est souvent une histoire de cache. Les réseaux sociaux gardent en mémoire l'ancienne version de votre page.

Pour forcer la mise à jour et prévisualiser le résultat, utilisez les outils officiels (gratuits) :

  1. Pour Facebook & Messenger :

    👉 Facebook Sharing Debugger (La référence absolue)

  2. Pour LinkedIn :

    👉 LinkedIn Post Inspector (Indispensable pour le B2B)

  3. Pour Twitter / X :

    👉 Twitter Card Validator

La méthode : Copiez votre URL dedans, cliquez sur "Debug" ou "Inspect", et hop ! Vous voyez exactement ce que verront vos utilisateurs. Si l'image n'apparaît pas, cliquez sur le bouton "Scrape Again" pour forcer le robot à relire votre page.

❗ Attention, il faut que le site soit en ligne ! Pas de localhost.

📝 Exercice Flash

  1. Allez sur le Facebook Sharing Debugger.

  2. Entrez l'URL de votre site préféré (ou le vôtre).

  3. Regardez la "Card" générée.

    • L'image est-elle coupée ?

    • Le titre donne-t-il envie ?

  4. Si c'était votre site, quelle image auriez-vous choisie pour obtenir plus de clics ?

Et voilà pour la technique !

On a couvert la structure (SEO On-Page) et l'apparence sociale (Open Graph).