CodeGym /Cours /Frontend SELF FR /Microdonnées

Microdonnées

Frontend SELF FR
Niveau 11 , Leçon 3
Disponible

9.1 Qu'est-ce que les microdonnées ?

Les microdonnées (structured data) sont une façon d'ajouter des métadonnées aux documents HTML pour améliorer l'interprétation du contenu d'une page web par les moteurs de recherche et d'autres services. Les microdonnées sont utilisées pour décrire diverses entités et leurs relations sur une page web, ce qui aide à améliorer la visibilité de la page dans les résultats de recherche et fournit des fonctionnalités supplémentaires comme les extraits enrichis.

Les microdonnées sont des données structurées ajoutées au code HTML d'une page. Elles fournissent aux moteurs de recherche des informations supplémentaires sur le contenu de la page, telles que le type de contenu, l'auteur, la date de publication, la note et d'autres données.

Principaux types de microdonnées :

  • Schema.org : le standard de microdonnées le plus largement utilisé, supporté par les principaux moteurs de recherche (Google, Bing, Yahoo, Yandex)
  • JSON-LD : format d'encodage de microdonnées sous forme de JSON, recommandé par Google
  • Microdata : format de microdonnées intégré directement dans le code HTML

9.2 Schema.org

Schema.org est un dictionnaire de types de données et leurs propriétés, développé pour structurer les données sur les pages web. Il supporte de nombreux types de données, tels que des articles, événements, organisations, produits, etc.

Exemples d'utilisation de Schema.org

Article :

HTML
    
      <article>
        <h1>Titre de l'article</h1>
        <p>Auteur : Nom de l'auteur</p>
        <p>Date de publication : 1 janvier 2024</p>
        <img src="https://example.com/image.jpg" alt="Exemple d'image">
        <p>Texte de l'article...</p>
      </article>
    
  
JavaScript
    
      <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Article",
          "headline": "Titre de l'article",
          "author": {
            "@type": "Person",
            "name": "Nom de l'auteur"
          },
          "datePublished": "2024-01-01",
          "image": "https://example.com/image.jpg",
          "publisher": {
            "@type": "Organization",
            "name": "Éditeur",
            "logo": {
              "@type": "ImageObject",
              "url": "https://example.com/logo.png"
            }
          }
        }
      </script>
    
  

Produit :

HTML
    
      <body>
        <h1>Nom du produit</h1>
        <img src="https://example.com/product.jpg" alt="Image du produit">
        <p>Description du produit</p>
        <p>Prix : $29.99</p>
      </body>
    
  
JavaScript
    
      <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Product",
          "name": "Nom du produit",
          "image": "https://example.com/product.jpg",
          "description": "Description du produit",
          "sku": "0446310786",
          "offers": {
            "@type": "Offer",
            "priceCurrency": "USD",
            "price": "29.99",
            "itemCondition": "https://schema.org/NewCondition",
            "availability": "https://schema.org/InStock",
            "url": "https://example.com/product"
          }
        }
      </script>
    
  

Avantages de l'utilisation de Schema.org :

  1. Amélioration de la visibilité : les moteurs de recherche peuvent afficher des données supplémentaires dans les résultats de recherche (extraits enrichis).
  2. Meilleure interprétation : les moteurs de recherche comprennent mieux le contenu, ce qui peut améliorer le classement de la page.
  3. Support des standards : Schema.org est supporté par tous les principaux moteurs de recherche.

9.3 JSON-LD

JSON-LD (JavaScript Object Notation for Linked Data) est une méthode d'encodage des microdonnées en format JSON, insérée dans une balise <script> sur la page. Google recommande d'utiliser JSON-LD pour les données structurées.

Exemple d'utilisation de JSON-LD

Organisation :

HTML
    
      <body>
        <h1>Nom de l'entreprise</h1>
        <p>Description de l'entreprise</p>
        <div>Contacts</div>
      </body>
    
  
JavaScript
    
      <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Organization",
          "name": "Nom de l'entreprise",
          "url": "https://example.com",
          "logo": "https://example.com/logo.png",
          "contactPoint": {
            "@type": "ContactPoint",
            "telephone": "+1-800-555-1212",
            "contactType": "Service Client"
          }
        }
      </script>
    
  

9.4 Microdata

Microdata est un format de microdonnées intégré dans HTML. Les attributs microdata sont ajoutés directement aux éléments HTML pour les lier aux types et propriétés du dictionnaire Schema.org.

Exemple d'utilisation de Microdata

Événement :

HTML
    
      <body itemscope itemtype="https://schema.org/Event">
        <h1 itemprop="name">Nom de l'événement</h1>
        <p itemprop="startDate" content="2024-05-01T19:00">1 mai 2024, 19:00</p>
        <div itemprop="location" itemscope itemtype="https://schema.org/Place">
          <span itemprop="name">Lieu de l'événement</span>
          <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
            <span itemprop="streetAddress">Rue, numéro</span>
            <span itemprop="addressLocality">Ville</span>
            <span itemprop="postalCode">Code postal</span>
            <span itemprop="addressCountry">Pays</span>
          </div>
        </div>
      </body>
    
  

Avantages de l'utilisation des microdonnées :

  1. Extraits enrichis : les moteurs de recherche peuvent afficher des extraits enrichis dans les résultats de recherche, augmentant le taux de clics.
  2. Meilleure compréhension du contenu : les moteurs de recherche comprennent mieux le contenu, ce qui peut améliorer le classement de la page.
  3. Support de la recherche vocale : les données structurées peuvent améliorer les résultats de la recherche vocale.
  4. Intégration avec d'autres services : les microdonnées permettent d'intégrer le contenu à divers services, tels que Google Knowledge Graph et d'autres.
Commentaires
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION