logoNext.js Français
DocumentationBlogApprendre

Métadonnées

Les métadonnées représentent le résumé du contenu d'un site web et sont utilisées pour associer un titre, une description et une image au site.

Titre

La balise title est l'un des éléments SEO les plus importants pour deux raisons principales :

Premièrement, c'est ce que les utilisateurs voient lorsqu'ils cliquent pour accéder à votre site depuis les résultats de recherche.

Deuxièmement, c'est l'un des principaux éléments que Google utilise pour comprendre le sujet de votre page. Il est recommandé d'utiliser des mots-clés dans le titre car cela améliore généralement le positionnement dans les moteurs de recherche.

Voici un exemple :

<title>iPhone 12 XS Max À Vendre au Colorado - Grosses Remises | Apple</title>

Cette page contient tous les mots-clés principaux et rend également l'offre attractive pour les utilisateurs en mettant en avant une proposition de valeur claire : des remises !

Description

La balise meta description est un autre élément SEO important, mais moins que le titre. Selon Google, cet élément n'est pas pris en compte pour le classement, mais il peut affecter votre taux de clics dans les résultats de recherche.

Utilisez la balise meta description pour compléter les informations de votre titre. Intégrez-y davantage de mots-clés s'il en reste qui n'ont pas pu être inclus dans le titre. Ces mots-clés apparaîtront en gras si la recherche d'un utilisateur les contient.

Exemple d'une balise meta description en HTML :

<meta
  name="description"
  content="Découvrez l'iPhone 12 XR Pro et l'iPhone 12 Pro Max. Visitez votre magasin local pour des conseils d'expert."
/>

Voici comment cela apparaît dans la page lorsqu'il fait partie des résultats de recherche (SERP) :

Exemple d'un extrait SERP avec un Titre et une Description

Exemple d'un extrait SERP avec un Titre et une Description

Dans Next.js, nous définissons le titre et la description dans le composant Head. Voici à quoi pourraient ressembler les balises meta title et description dans Next.js :

import Head from 'next/head';
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>
          iPhone 12 XS Max À Vendre au Colorado - Grosses Remises | Apple
        </title>
        <meta
          name="description"
          content="Découvrez l'iPhone 12 XR Pro et l'iPhone 12 Pro Max. Visitez votre magasin local pour des conseils d'expert."
          key="desc"
        />
      </Head>
      <h1>iPhones en Vente</h1>
      <p>insérez une liste d'iPhones en vente.</p>
    </div>
  );
}
 
export default IndexPage;

Le composant Head peut être utilisé sur n'importe quelle page de votre application pour décrire ou fournir des informations sur le contenu de la page.

Open Graph

Le protocole Open Graph, initialement développé par Facebook, standardise l'utilisation des métadonnées sur n'importe quelle page web. Vous pouvez fournir autant ou aussi peu d'informations que vous le souhaitez, mais toutes les parties d'Open Graph s'assemblent pour créer une représentation du site auquel elles sont attachées.

D'autres réseaux sociaux (comme Pinterest, Twitter, LinkedIn, etc.) peuvent également utiliser Open Graph pour afficher des cartes enrichies lors du partage d'une URL. Twitter dispose également de ses propres balises Twitter Cards.

Bien que ces balises Open Graph présentent de nombreuses similitudes avec les balises liées au SEO, elles n'offrent aucun avantage pour le classement dans les moteurs de recherche. Cependant, elles sont toujours recommandées car les utilisateurs peuvent partager votre contenu sur les réseaux sociaux ou des outils de messagerie privée comme WhatsApp ou Telegram.

Vous pouvez ajouter des balises Open Graph en définissant l'attribut property dans les balises meta à l'intérieur du composant Head. Par exemple :

import Head from 'next/head';
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>Titre Attrayant</title>
        <meta name="description" content="Découvrez notre page attrayante" key="desc" />
        <meta property="og:title" content="Titre Social pour une Page Attrayante" />
        <meta
          property="og:description"
          content="Et une description sociale pour notre page attrayante"
        />
        <meta
          property="og:image"
          content="https://example.com/images/cool-page.jpg"
        />
      </Head>
      <h1>Page Attrayante</h1>
      <p>Ceci est une page attrayante. Elle contient beaucoup de contenu intéressant !</p>
    </div>
  );
}
 
export default IndexPage;

Avoir un lien partageable offrant une description et un titre, accompagnés d'une image représentant le contenu de la page, n'a pas d'effet direct sur le classement SEO, mais cela augmente indirectement le taux de clics, ce qui finira par attirer plus de visiteurs sur votre site.

Données Structurées et JSON-LD

Les données structurées facilitent la compréhension de vos pages par les moteurs de recherche. Au fil des années, plusieurs vocabulaires ont été utilisés, mais le principal actuellement est schema.org.

Selon le site, schema.org est une "activité communautaire collaborative dont la mission est de créer, maintenir et promouvoir des schémas pour les données structurées sur Internet, sur les pages web, dans les emails et au-delà."

Le vocabulaire de schema.org peut être utilisé avec plusieurs encodages différents, notamment RDFa, Microdata et JSON-LD.

Différents moteurs de recherche peuvent adopter différents vocabulaires au sein de schema.org, et aucun moteur de recherche ne couvre tous les cas d'utilisation décrits dans le vocabulaire du site. Assurez-vous de vérifier quels vocabulaires sont acceptés dans chaque cas.

Exemple de ce à quoi pourrait ressembler une page produit avec l'ajout des données de schéma produit JSON-LD :

import Head from 'next/head';
 
function ProductPage() {
  function addProductJsonLd() {
    return {
      __html: `{
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": "Enclume Executive",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "description": "Plus élégante que l'Enclume Classique d'ACME, l'Enclume Executive est parfaite pour les voyageurs d'affaires cherchant quelque chose à lâcher d'une certaine hauteur.",
      "sku": "0446310786",
      "mpn": "925872",
      "brand": {
        "@type": "Brand",
        "name": "ACME"
      },
      "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "4",
          "bestRating": "5"
        },
        "author": {
          "@type": "Person",
          "name": "Fred Benson"
        }
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.4",
        "reviewCount": "89"
      },
      "offers": {
        "@type": "Offer",
        "url": "https://example.com/anvil",
        "priceCurrency": "USD",
        "price": "119.99",
        "priceValidUntil": "2020-11-20",
        "itemCondition": "https://schema.org/UsedCondition",
        "availability": "https://schema.org/InStock"
      }
    }
  `,
    };
  }
  return (
    <div>
      <Head>
        <title>Mon Produit</title>
        <meta
          name="description"
          content="Super produit avec livraison gratuite."
          key="desc"
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={addProductJsonLd()}
          key="product-jsonld"
        />
      </Head>
      <h1>Mon Produit</h1>
      <p>Super produit en vente.</p>
    </div>
  );
}
 
export default ProductPage;

Dans cet exemple, les données sont codées en dur sous forme de chaîne, mais vous pouvez facilement passer les données à la méthode addProductJsonLd pour les rendre totalement dynamiques.

Pour Aller Plus Loin

Structure des URLs

Previous Page

SEO On Page

Next Page