Structures pré-construites

Structure html simple

Voici un premier template HTML idéal pour une page de contenus web facile à lire et à interpréter pour les moteurs de recherche, en suivant les recommandations officielles de Google :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Description courte et pertinente de la page">
  <title>Titre de la page - Nom de votre site</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
</head>
<body>
  <header>
    <nav>
      <!-- Ajoutez ici la navigation de votre site -->
    </nav>
  </header>
  <main>
    <article>
      <h1>Titre principal de la page (H1)</h1>
      <section>
        <h2>Titre de la première section (H2)</h2>
        <p>Contenu de la première section, comprenant des paragraphes, des listes, des images, etc.</p>
      </section>
      <section>
        <h2>Titre de la deuxième section (H2)</h2>
        <p>Contenu de la deuxième section, comprenant des paragraphes, des listes, des images, etc.</p>
      </section>
      <!-- Ajoutez ici d'autres sections si nécessaire -->
    </article>
  </main>
  <aside>
    <!-- Ajoutez ici des éléments complémentaires, tels que des liens, des publicités ou des widgets -->
  </aside>
  <footer>
    <!-- Ajoutez ici le pied de page de votre site, comprenant des liens, des informations de contact, etc. -->
  </footer>
</body>
</html>

Assurez-vous d’adapter ce modèle en fonction de votre contenu et de votre design. N’oubliez pas d’utiliser des balises sémantiques appropriées et de structurer votre contenu avec des titres (h1, h2, h3, etc.) pour faciliter la lecture et l’interprétation par les moteurs de recherche.

Template comprenant des données structurées

Voici le template HTML avec l’ajout de balises de données structurées (schema.org) pour décrire une entreprise située au 8 rue du Gros Horloge à Rouen, en respectant au maximum les recommandations de Google :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Description courte et pertinente de la page">
  <title>Titre de la page - Nom de votre entreprise</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": "Nom de votre entreprise",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "8 rue du Gros Horloge",
      "addressLocality": "Rouen",
      "postalCode": "76000",
      "addressCountry": "France"
    },
    "telephone": "+33 1 23 45 67 89",
    "url": "https://www.example.com",
    "logo": "https://www.example.com/logo.png",
    "image": "https://www.example.com/image-entreprise.jpg",
    "description": "Description détaillée de votre entreprise",
    "openingHours": "Mo,Tu,We,Th,Fr 09:00-18:00",
    "priceRange": "$$$",
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": 49.44084,
      "longitude": 1.09366
    }
  }
  </script>
</head>
<body>
  <header>
    <nav>
      <!-- Ajoutez ici la navigation de votre site -->
    </nav>
  </header>
  <main>
    <article>
      <h1>Titre principal de la page (H1)</h1>
      <section>
        <h2>Titre de la première section (H2)</h2>
        <p>Contenu de la première section, comprenant des paragraphes, des listes, des images, etc.</p>
      </section>
      <section>
        <h2>Titre de la deuxième section (H2)</h2>
        <p>Contenu de la deuxième section, comprenant des paragraphes, des listes, des images, etc.</p>
      </section>
      <!-- Ajoutez ici d'autres sections si nécessaire -->
    </article>
  </main>
  <aside>
    <!-- Ajoutez ici des éléments complémentaires, tels que des liens, des publicités ou des widgets -->
  </aside>
  <footer>
    <!-- Ajoutez ici le pied de page de votre site, comprenant des liens, des informations de contact, etc. -->
  </footer>
</body>
</html>

Ce modèle inclut des balises de données structurées pour fournir des informations détaillées sur votre entreprise, telles que l’adresse, les horaires d’ouverture et les coordonnées géographiques. Adaptez ces informations en fonction de votre entreprise et assurez-vous que les données soient à jour et exactes.

Pour vérifier la bonne utilisation des données structurées, vous pouvez soumettre votre code à l’outil de validation officiel de Google : https://validator.schema.org/

Pour vérifier si votre page passe la validation de la compatibilité des résultats enrichis, c’est par ici → https://search.google.com/test/rich-results?hl=fr

Structure intégrant le balisage Open Graph

Voici maintenant un template HTML avec l’ajout des balises Open Graph pour optimiser la visibilité de la page lorsqu’elle est partagée sur les réseaux sociaux :

<!DOCTYPE html>
<html lang="fr" prefix="og: http://ogp.me/ns#">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Description courte et pertinente de la page">
  <title>Titre de la page - Nom de votre entreprise</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
  
  <!-- Balises Open Graph -->
  <meta property="og:title" content="Titre de la page - Nom de votre entreprise">
  <meta property="og:description" content="Description courte et pertinente de la page">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.example.com/">
  <meta property="og:image" content="https://www.example.com/image-entreprise.jpg">
  <meta property="og:locale" content="fr_FR">
  <meta property="og:site_name" content="Nom de votre entreprise">
  
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": "Nom de votre entreprise",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "8 rue du Gros Horloge",
      "addressLocality": "Rouen",
      "postalCode": "76000",
      "addressCountry": "France"
    },
    "telephone": "+33 1 23 45 67 89",
    "url": "https://www.example.com",
    "logo": "https://www.example.com/logo.png",
    "image": "https://www.example.com/image-entreprise.jpg",
    "description": "Description détaillée de votre entreprise",
    "openingHours": "Mo,Tu,We,Th,Fr 09:00-18:00",
    "priceRange": "$$$",
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": 49.44084,
      "longitude": 1.09366
    }
  }
  </script>
</head>
<body>
  <header>
    <nav>
      <!-- Ajoutez ici la navigation de votre site -->
    </nav>
  </header>
  <main>
    <article>
      <h1>Titre principal de la page (H1)</h1>
      <section>
        <h2>Titre de la première section (H2)</h2>
        <p>Contenu de la première section, comprenant des paragraphes, des listes, des images, etc.</p>
      </section>
      <section>
        <h2>Titre de la deuxième section (H2)</h2>
        <p>Contenu de la deuxième section, comprenant des paragraphes, des listes, des images, etc.</p>
      </section>
      <!-- Ajoutez ici d'autres sections si nécessaire -->
    </article>
  </main>
  <aside>
    <!-- Ajoutez ici des éléments complémentaires, tels que des liens, des publicités ou des widgets -->
  </aside>
  <footer>
    <!-- Ajoutez ici le pied de page de votre site, comprenant des liens, des informations de contact, etc. -->
  </footer>
</body>
</html>