X

Les essentiels de la balise < head >

23 avril 2019

Une page écrite en langage HTML (Hypertext markup language) est constituée d’une série de balises qui en définissent la structure. La balise <body> contient la majorité des éléments de la page qui seront visualisés en ligne par l’internaute (le « corps » de la page). La balise <head>, quant à elle, donne de nombreuses indications aux moteurs de recherche mais pas seulement (la « tête » de la page).

  1. Le doctype : <!DOCTYPE html>
    Placé avant la balise <head>, il indique au navigateur quelle version du code HTML est utilisée dans la page. C’est la définition du type de document. En HTML5 (la dernière version du code), cette balise s’indique comme ci-dessus. Par ailleurs, elle ne se referme pas.
  2. La balise title : <title>Le titre de votre page </title>
    Ce titre apparaît en haut à gauche de votre navigateur, juste au-dessus des éléments de navigation ou de la barre de recherche. C’est le seul élément visuel de la balise <head>.
  3. Les méta données (meta tags) : <meta />Les meta tags (ou méta données)
    Elles servent à indiquer aux robots des moteurs de recherche :
    – à quelle fréquence la page web est mise à jour,
    – la description du site (c’est le morceau de texte qui apparaîtra sous le titre du site dans le résultat des moteurs de recherche)
    – et ses mots-clés.
    Certains meta tags peuvent aider à améliorer le référencement naturel de son site auprès des moteurs de recherche : ils participent aux règles de SEO (Search engine optimization, optimisation pour les moteurs de recherche). Toutefois, il ne s’agit pas de leur seule fonction. Cette balise se referme toute seule : il s’agit de l’une des rares balises auto-fermantes du code HTML.
    Voir aussi  : Métadonnées, partage, humans.txt
  4. Les liens vers les feuilles de styles et les scripts : <link> et <script>
    Les liens vers les feuilles de style (codées en CSS – Cascading style sheet – qui gèrent tous les aspects liés à l’apparence du site/blog) et les scripts sont contenus dans les balises <link> pour les feuilles de style (auto-fermantes) et par <script> pour les scripts dont la fonction est d’ajouter des animations ou des effets, par exemple au survol d’un élément de la page, (balise à refermer). Dans le cadre d’un site propulsé par WordPress, ces balises sont ajoutées automatiquement.

A propos des balises <meta>

  1. Compatibilité avec les caractères accentuésLa langue française compte de nombreux accents. Faute de définir un jeu de caractères compatibles, ceux-ci sont remplacés par des symboles plutôt incompréhensibles. L’attribut charset permet de palier au problème. Avec WordPress, cette balise s’inscrit automatiquement dans le code de la page.
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Se place immédiatement après la balise <head>
  2. La description du site
    <meta name="description" content="La description de votre site.
    Attention : celle-ci ne doit pas dépasser 200 caractères" />    Si cette balise est absente, ce sont les premiers mots de votre page qui seront, en principe, affichés dans les moteurs de recherche.
  3. Les mots-clés
    <meta name="keywords" content="mot, mot2,mot3"/>
    Les « keywords » sont les mots-clés qui caractérisent votre site. Ils sont séparés par une virgule et ne sont, en principe, pas limités mais il est recommandé de ne pas utiliser plus de vingt mots. Tous les moteurs de recherche ne reconnaissent pas cette balise.
  4. Instructions pour les robots
    <meta name="robots" content="all" />
    Ce code donne des instructions de comportement aux robots des moteurs de recherche. "all" indique qu’ils doivent indexer toutes les pages du site. D’autres options sont possibles :
    – « noindex » (ne pas indexer la page),
    – "nofollow" (ne pas suivre les liens contenus dans la page),
    – "noarchive" (ne pas enregistrer la page en « cache », son contenu reste donc privé).
    Il est possible de combiner les options en les séparant par une virgule : <meta name="robots" content="noindex, nofollow" />
    Dans l’exemple suivant, il est indiqué aux robots des moteurs de recherche qu’ils peuvent repasser sur le site le lendemain. La fréquence de leur passage dépendra aussi de celle de vos mises à jour. Options possibles : 15 days, 1 month…
    <meta name="revisit-After" content="1 day" />
  5. Les signatures
    <meta itemprop="copyright" content="Nom du site, de la société ou le vôtre" />
    <meta name="author" content="Votre nom" />

 

Ressources

#