Clear_All
Sublim.design

Les balises HTML indispensables en SEO pour réussir son référencement naturel

Publié le 19 septembre 2024

Le référencement d'une page HTML dépend de son contenu, mais aussi de l'usage des balises HTML qui la composent. Certaines ont un rôle technique, d'autres contribuent directement au SEO et peuvent avoir une incidence directe sur le référencent naturel des pages de votre site. Le point sur les balises importantes en SEO que tout bon webmaster devrait connaître :

Sommaire

  1. La balise TITLE
  2. La balise META Description
  3. La balise META Robots
  4. La balise Canonical
  5. La balise H1 est primordiale au référencement naturel
  6. L’attribut ALT de la balise image
  7. Bien renseigner l'attribut ALT
  8. Les balises Schema.org (rich snippets)
  9. Les balises Open Graph
  10. Mots en gras et balise STRONG
  11. L'importance des balises HTML5
  12. Principales balises de structure HTML5
  13. Intégration des balises HTML par le CMS Sublim.design
  14. D'autres articles sur le même sujet

La balise TITLE

C'est le titre descriptif qui apparaît dans les pages de résultats de recherche des moteurs comme Google, Bing ou Yahoo. C'est en quelque sorte la vitrine d'une page web, celle qui va inciter les internautes à cliquer pour lire l'article dans son intégralité. Ce titre doit être accrocheur et pertinent ! Il doit contenir le mot clé sur lequel vous souhaitez positionner l'article. Si elle est bien rédigée, la balise TITLE permet aussi d'augmenter le CTR (Click-Through Rate) qui mesure le nombre de clics sur un lien par rapport au nombre d'impressions sur la page des résultats des moteurs de recherche. N'hésitez pas à intégrer une date pour accentuer la fraîcheur de l'information.

Les mots-clés utilisés dans la balise TITLE ont une importance capitale pour l'indexation et le référencement naturel. Attention cependant à ne faut pas confondre cet élément avec la balise H1 qui désigne le titre principal de l'article affiché en haut de la page. Ce sont deux balises sont différentes et complémentaires.

CodeIntégration de la balise TITLE
<html>
 <head>
  <title>Référencement naturel - Les balises HTML indispensables en SEO</title>
 </head>
 <body>
 </body>
</html>

La balise TITLE se place dans l'en-tête du code HTML. Il est recommandé de renseigner un TITLE avec 10 ou 12 mots d'environ 50 à 60 caractères (espaces inclus) de manière à ce qu'il soit visible entièrement, sans être tronqué.

La balise META Description

La balise META Description vient apporter un complément d'information à la balise TITLE pour décrire le contenu d'une page web dans les résultats de recherche. Cet élément n'a aucune incidence directe sur le référencement naturel puisque Google et la majorité des autres outils de recherche ne prennent plus en compte son contenu pour l'indexation des pages.

La balise Description sert principalement à inciter les internautes à cliquer sur le lien. En choisissant des mots-clés pertinents et des tournures de phrase simples et accrocheuses, elle peut contribuer à augmenter le taux de clics (CTR) d'une page et renvoyer un message positif aux moteurs de recherche qui raisonnent de la manière suivante : « si les internautes cliquent sur ce lien, c'est que le contenu de l'article doit être intéressant ; je vais donc remonter cette page dans les classements »

CodeIntégration de la balise META Description
<html>
 <head>
  <meta name="description" content="Techniques SEO - Les balises HTML à connaître absolument pour réussir le référencement de ses pages web. Certaines sont incroyables !">
 </head>
 <body>
 </body>
</html>

La longueur de la balise META Description doit être comprise entre 100 à 155 caractères pour ne pas être tronquée et se place aussi dans l'en-tête du code-source HTML.

La balise META Robots

Il s'agit d'une balise META située dans la section HEADER du code HTML. Elle fournit aux robots d'indexation un certain nombre de directives concernant le référencement de la page, des sous-pages et des images qu'elles contiennent. Initialement, la balise Html META Robots avait deux positions : "index" pour autoriser l'indexation de la page et "noindex" pour la refuser. Elle permet aujourd'hui un réglage plus fin grâce aux options suivantes (les plus importantes) :

CodeIntégration des balises META Robots
<html>
 <head>
  <meta name="robots" content="index,follow">
  <meta name="googlebot" content="index,follow">
 </head>
 <body>
 </body>
</html>

La balise META Robot s'applique à tous les moteurs de recherche, alors que la balise META Googlebot est propre à Google.

La balise Canonical

C'est bien connu, Google n'aime pas les contenus dupliqués et cet élément indique aux moteurs de recherche quelle est la version originale d'une page web. La balise canonical est un moyen efficace pour éviter les risques de sanction du moteur de recherche Google et leurs conséquences sur le référencement naturel. Dans le cas où le contenu reprendrait les textes d'une autre page (du même site ou d'un site tiers), il convient de préciser la source grâce à cette balise intégrée dans l'en-tête du code HTML.

CodeIntégration de la balise Canonical
<html>
 <head>
  <link rel="canonical" href="https://www.sublim.design/blog/referencement/balises-html-indispensables-seo/">
 </head>
 <body>
 </body>
</html>

Sur un site e-commerce par exemple, il peut aussi arriver que deux pages produits soient quasiment identiques. C'est parfois le cas pour présenter un produit unique disponible avec des options différentes (coloris, taille, etc.) Dans ce cas, il est conseillé d'intégrer une balise canonical sur toutes les déclinaisons de page afin d'indiquer à Google l'URL de la page principale du produit.

Pour faciliter la compréhension des robots d'indexation et limiter les erreurs d'interprétation des algorithmes, il est conseillé de renseigné la balise Canonical avec une URL absolue : https://www.sublim.design/blog/referencement/balises-html-indispensables-seo/ plutôt que /blog/referencement/balises-html-indispensables-seo/ par exemple.

La balise H1 est primordiale au référencement naturel

La balise H1 (Heading 1) désigne le titre principal d'un article. Les mots-clés utilisés dans le titre doivent être sélectionnés avec soin pour résumer le contenu de la page et indiquer à Google quel est le sujet abordé. Les algorithmes des moteurs de recherche utilisent cette information pour indexer les pages et les positionner (plus ou moins bien) dans les résultats de recherche.

Pour rédiger une balise H1 efficace en SEO et donner toutes les chances de réussite à son référencement naturel, il faut éviter les tournures de phrase complexes et répondre à une intention de recherche. Pour être pertinent, le titre principal d'une page web doit en effet répondre à une question précise et à un public parfaitement identifié (concept de persona). La balise H1 doit être claire, concise et attrayante pour inciter le visiteur à continuer sa lecture.

La balise H1 est unique (un seul titre principal par page) et se place toujours en début d'article. Sa longueur conseillée varie entre 20 et 100 caractères; idéalement, cet élément doit faire environ 70 caractères.

L’attribut ALT de la balise image

Une page web, c'est du texte, des illustrations et des photos. Celles-ci ont un rôle important dans le référencement naturel, grâce notamment à la balise ALT qui permet de décrire le contenu d'une image grâce à un texte alternatif (texte de remplacement) - Les puristes du SEO parleront plutôt d'attribut ALT. Cette information est prise en compte pour identifier l'image et l'indexer correctement.

CodeIntégration de l’attribut ALT
<html>
 <head>
 </head>
 <body>
  <img alt="Balises HTML indispensables au SEO" src="https://www.sublim.design/balises-seo.jpg">
 </body>
</html>

Bien renseigner l'attribut ALT

Les balises Schema.org (rich snippets)

Le balisage Schema permet de hiérarchiser les données et de formater l'information selon les critères d'affichage de Google : on parle d'ailleurs de données structurées ou d'extraits enrichis. C'est un bon moyen pour être positionné sur la première page, en position zéro, au-dessus des liens sponsorisés sur la SERP (page de résultat de recherche).

 
Affichage des Rich Snippets sur Google

Il existe plusieurs manières de structurer les données selon leur contenu : présenter un article, le produit d'une boutique en ligne, une recette de cuisine, un livre, un film, un événement, un avis, une entreprise, une application, etc.

CodeIntégration de la balise SCHEMA
<html>
 <head>
  <script type="application/ld+json">
   {
    "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Non-Alcoholic Piña Colada",
      "image": [
     "https://example.com/photos/1x1/photo.jpg",
      "https://example.com/photos/4x3/photo.jpg",
      "https://example.com/photos/16x9/photo.jpg"
      ],
      "author": {
        "@type": "Person",
        "name": "Mary Stone"
      },
      "datePublished": "2024-03-10",
      "description": "This non-alcoholic pina colada is everyone's favorite!",
      "recipeCuisine": "American",
      "prepTime": "PT1M",
      "cookTime": "PT2M",
      "totalTime": "PT3M",
      "keywords": "non-alcoholic",
      "recipeYield": "4 servings",
      "recipeCategory": "Drink",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "120 calories"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": 5,
        "ratingCount": 18
      },
      "recipeIngredient": [
        "400ml of pineapple juice",
        "100ml cream of coconut",
        "ice"
      ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "name": "Blend",
          "text": "Blend 400ml of pineapple juice and 100ml cream of coconut until smooth.",
          "url": "https://example.com/non-alcoholic-pina-colada#step1",
          "image": "https://example.com/photos/non-alcoholic-pina-colada/step1.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Fill",
          "text": "Fill a glass with ice.",
          "url": "https://example.com/non-alcoholic-pina-colada#step2",
          "image": "https://example.com/photos/non-alcoholic-pina-colada/step2.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Pour",
          "text": "Pour the pineapple juice and coconut mixture over ice.",
          "url": "https://example.com/non-alcoholic-pina-colada#step3",
          "image": "https://example.com/photos/non-alcoholic-pina-colada/step3.jpg"
        }
      ],
      "video": {
        "@type": "VideoObject",
        "name": "How to Make a Non-Alcoholic Piña Colada",
        "description": "This is how you make a non-alcoholic piña colada.",
        "thumbnailUrl": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
         ],
        "contentUrl": "https://www.example.com/video123.mp4",
        "embedUrl": "https://www.example.com/videoplayer?video=123",
        "uploadDate": "2024-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2024-02-05T08:00:00+08:00"
       }
    }
    </script>
  </head>

 <body>
 </body>
</html>

Les balises SCHEMA doivent être saisies au format JSON-LD, idéalement dans la section HEADER, l'en-tête de la page.

Les balises Open Graph

Ce sont des éléments HTML placés dans l'en-tête du code source. Initié par Facebook en 2010, ils sont aujourd'hui repris par l'ensemble des réseaux sociaux. Un tag Open Graph donne des indications sur le titre et la description de la page, sur son type et indique quelle est l'image qui doit être affichée lorsqu'un URL est partagé sur les réseaux sociaux.

CodeIntégration des Tags OPEN GRAPH
<html>
 <head>
  <meta property="og:type" content="type" />
  <meta property="og:title" content="title" />
  <meta property="og:description" content="description" />
  <meta property="og:url" content="url" />
  <meta property="og:image" content="image_url" />
 </head>
 <body>
 </body>
</html>

Mots en gras et balise STRONG

Beaucoup d'internautes survolent les pages et font une lecture rapide (lecture en diagonale) du texte pour vérifier qu'il correspond bien à leur requête. La mise en gras de certains mots-clés permet d'identifier rapidement le sens général d'un article. C'est aussi un moyen efficace pour améliorer l'accessibilité et la lisibilité d'une page web pour les personnes dyslexiques ou malvoyantes.

CodeIntégration de la balise STRONG
<html>
 <head>
 </head>
 <body>
  <p>Utiliser la balise <b>Bold</b></p>
  <p>Utiliser la balise <strong>Strong</strong></p>
 </body>
</html>

Il existe deux manières de mettre un texte en gras, la balise La BOLD et la balise STRONG. Visuellement, les résultats sont strictement dans les deux cas. D'un point de vue du référencement naturel, rien ne prouve de l'efficacité de l'une par rapport à l'autre, or certains spécialises SEO recommandent plutôt d'utiliser la balise STRONG pour marquer l'importance d'un mot-clé ou d'une expression.

L'importance des balises HTML5

Les webmasters utilisent des balises Div (division de contenu) pour définir la position des différents éléments d'une page : en-tête, menu, textes principaux, textes secondaires, bannières publicitaires, citations, pied de page, etc. Depuis l'introduction de la norme HTML5, il est possible d'identifier tous ces éléments et donner à Google une indication précise de leur contenu.

Plutôt que d'utiliser des balises DIV « neutres », de nouvelles balises sémantiques permettent de mieux organiser les éléments qui composent une page Html :

Principales balises de structure HTML5

CodeIntégration des balises sémantiques HTM5
<html>
 <head>
 </head>
 <body>
  <header>
   <menu>...</menu>
   <nav>
    <ul>
     <li>...</li>
     <li>...</li>
    </ul>
   </nav>
  </header>
  <main>
   <article>
    <h1>...</h1>
    <p>...</p>
    <section>
     <h2>...</h2>
     <p>...</p>
    </section>
    <section>
     <h2>...</h2>
     <p>...</p>
    </section>
   </article>
  </main>
  <aside>
   <p>...</p>
  </aside>
  <footer>...</footer>
 </body>
</html>

Le SEO est un domaine passionnant et il existe bien d'autres balises qui participent au référencement naturel d'un site web. En Europe et aux États-Unis, Google règne en maître et dicte les règles du référencement. Le balisage sémantique des pages invite les webmasters à réaliser des sites mieux conçus qui répondent parfaitement à l'intention de recherche et aux requêtes les plus populaires.

Intégration des balises HTML par le CMS Sublim.design

Les CMS traditionnels que sont Wordpress, Joomla ou Prestashop permettent de renseigner les principales balises HTML. L'accès aux balises plus techniques (Open Graph, Schema.org, par exemple) nécessite bien souvent l'installation d'un plugin (Yoast Seo, Schema & Structured Data for WP, Advanced Custom Fields ...). Subim.design les prend en compte par défaut. Notre CMS permet en effet de réaliser des sites performants conformes aux recommandations Google les plus récentes pour faciliter le référencement naturel. Sublim.design facilite la saisie des balises web (nombre de mots, longueur idéale, etc) et intègre une rubrique Analyse SEO qui établit un rapport complet pour chaque page.

D'autres articles sur le même sujet

North