frontend / html

SEO technique : meta tags et Open Graph

Leçon 101 exercice

Explication

Ce que vous allez apprendre

Écrire un <title> et une meta description efficaces pour les résultats de recherche
Éviter le contenu dupliqué avec rel="canonical"
Contrôler l'aperçu d'un lien partagé sur les réseaux sociaux avec Open Graph
Distinguer les balises Open Graph des balises Twitter/X Card
Utiliser hreflang pour un site multilingue sans pénalité SEO

Dans quel contexte ?

L'équipe marketing constate que lorsqu'un lien vers blog/webcomponents.html est partagé sur LinkedIn, l'aperçu affiche une image aléatoire du site et un texte tronqué sans rapport avec l'article. En ajoutant og:title, og:description et og:image pointant vers un visuel dédié de 1200x630px, l'aperçu devient maîtrisé et cohérent avec l'identité de marque, sur tous les réseaux qui lisent le protocole Open Graph.

Étape 1 : des lecteurs avant les humains

Avant même qu'un humain ne voie votre page, deux types de "lecteurs" automatisés l'ont déjà analysée : les robots des moteurs de recherche (Google, Bing) et les robots des réseaux sociaux qui génèrent l'aperçu d'un lien partagé.

Étape 2 : ils ne lisent pas comme nous

Ces robots ne "voient" pas la page comme un humain. Ils lisent des métadonnées précises dans le <head>, invisibles à l'écran mais déterminantes pour la visibilité du site.

Étape 3 : les deux lignes qui vendent votre page

Commençons par le plus simple : title et description. Dans les résultats de recherche, le <title> devient le lien bleu cliquable, et la meta description devient le texte gris en dessous.

Ce sont littéralement les deux seules lignes que l'utilisateur voit avant de cliquer, un peu comme la couverture et le résumé d'un livre en librairie. Les négliger, c'est laisser Google choisir un extrait aléatoire à leur place.

Étape 4 : un problème plus subtil, le contenu dupliqué

Il reste un problème moins visible : une même page est parfois accessible par plusieurs URLs (avec ou sans paramètres, avec ou sans slash final). Pour un moteur de recherche, cela ressemble à du contenu dupliqué, ce qui dilue son autorité SEO.

Voici comment on le résout : rel="canonical" désigne explicitement l'URL de référence parmi toutes les variantes possibles.

Prérequis

Cette leçon suppose que vous savez déjà écrire une structure HTML basique avec un <head> correctement rempli (voir la première leçon de ce cours).

Étape 5 : contrôler l'aperçu sur les réseaux sociaux

Maintenant que Google est réglé, occupons-nous des réseaux sociaux. Sans balises Open Graph (og:title, og:image...), un réseau social choisit arbitrairement une image et un texte pour représenter votre lien partagé.

Ces balises permettent de reprendre la main sur cet aperçu, un peu comme on choisirait la photo de couverture d'une publication.

Balise	Lu par	Effet
`<title>` / `meta description`	Google, Bing	Lien bleu + texte gris dans les résultats
`rel="canonical"`	Moteurs de recherche	Évite le duplicate content
`og:title`, `og:image`	Facebook, LinkedIn, Discord	Aperçu du lien partagé
`twitter:card`	X (Twitter)	Format spécifique de la carte

Piège fréquent

Oublier og:image:width et og:image:height peut faire apparaître l'image d'aperçu recadrée n'importe comment selon le réseau social. Fournissez toujours une image aux dimensions recommandées (1200x630px) et déclarez-les explicitement.

Étape 6 : et pour le multilingue

Enfin, hreflang joue un rôle similaire pour le multilingue : il indique aux moteurs que plusieurs versions linguistiques d'une même page ne sont pas du contenu dupliqué, mais des traductions légitimes.

Et ensuite ?

La prochaine étape va encore plus loin dans le SEO technique, avec les données structurées JSON-LD, qui permettent à Google de vraiment "comprendre" le contenu.

Commandes & code

SEO technique : meta tags et Open Graph

Ce que les moteurs de recherche et les réseaux sociaux lisent avant même le contenu visible.

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

    <!-- SEO de base -->
    <title>Cours HTML complet – Technologik</title>
    <meta name="description" content="Apprenez HTML de zéro jusqu'aux Web Components et à l'accessibilité experte, avec des exemples concrets.">
    <link rel="canonical" href="https://technologik.dev/cours/html">

    <!-- Indexation -->
    <meta name="robots" content="index, follow">
    <!-- variantes utiles : noindex,nofollow / index,nofollow / max-snippet:-1 -->

    <!-- Favicon multi-format -->
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
</head>

<!-- Open Graph : contrôle l'aperçu quand un lien est partagé (Facebook, LinkedIn...) -->
<meta property="og:type" content="article">
<meta property="og:title" content="Cours HTML complet">
<meta property="og:description" content="De la structure de base aux Web Components experts.">
<meta property="og:image" content="https://technologik.dev/og/html.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://technologik.dev/cours/html">
<meta property="og:site_name" content="Technologik">
<meta property="og:locale" content="fr_FR">

<!-- Twitter/X Card : reprend une partie d'Open Graph, avec ses propres balises -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Cours HTML complet">
<meta name="twitter:description" content="De la structure de base aux Web Components experts.">
<meta name="twitter:image" content="https://technologik.dev/og/html.png">
<meta name="twitter:site" content="@technologik">

<!-- Multi-langue : indique aux moteurs les versions alternatives -->
<link rel="alternate" hreflang="fr" href="https://technologik.dev/fr/cours/html">
<link rel="alternate" hreflang="en" href="https://technologik.dev/en/courses/html">
<link rel="alternate" hreflang="x-default" href="https://technologik.dev/cours/html">

<!-- Pagination sémantique (listes d'articles, résultats...) -->
<link rel="prev" href="https://technologik.dev/blog?page=1">
<link rel="next" href="https://technologik.dev/blog?page=3">

Balise	Rôle
`rel="canonical"`	évite le duplicate content
`meta robots`	contrôle l'indexation
`og:*`	aperçu sur réseaux sociaux
`hreflang`	ciblage multilingue

Résumé

<title> et meta description restent les deux signaux SEO on-page les plus lus.
rel="canonical" désigne l'URL de référence pour éviter le contenu dupliqué.
Open Graph et Twitter Card contrôlent l'apparence des liens partagés — sans elles, l'aperçu est aléatoire.
hreflang évite qu'un moteur pénalise plusieurs versions linguistiques comme duplicate content.

Exercices pratiques

1 disponible

Mission : maîtriser l'aperçu LinkedIn de blog/webcomponents.html

Objectif : Corriger un aperçu de lien partagé aléatoire sur les réseaux sociaux, et sécuriser l'indexation de la page contre le contenu dupliqué.

Contexte

L'équipe marketing constate que lorsque le lien vers blog/webcomponents.html est partagé sur LinkedIn, l'aperçu affiche une image aléatoire du site et un texte tronqué sans rapport avec l'article. La page est aussi accessible par deux URLs différentes : avec et sans slash final, ce que Google pourrait interpréter comme du contenu dupliqué.

Ta mission : corriger l'aperçu social et désigner l'URL de référence.

Résoudre l’exercice →