La balise de vos pages web - les fondamentaux
Référencement, réseaux sociaux, interopérabilité et performance web sont autant de sujets qui sont à prendre en compte à travers la balise head de vos pages web, découvrons ensemble les fondamentaux. (partie 1/2)
Cet article présente les principes fondamentaux liés au contenu de la balise <head>. Il est ainsi destiné à un public assez large. Néanmoins, certaines parties peuvent nécessiter un niveau technique plus avancé.Toute page web dispose de la même structure de base pour être interprétée correctement : une balise <html>, contenant une balise <head> et une balise <body>. Par exemple, une page en HTML 5 est formée de la manière suivante :
<!DOCTYPE html>La grande majorité de votre travail se concentre sur le <body> de la page web. Cependant, le contenu de la balise <head> n'en est pas moins extrêmement important pour la qualité et les performances de votre page web.
<html lang="fr">
<head> ??? </head>
<body> contenu de ma page </body>
</html>
Pourtant, le nombre de personnes sensibilisées à l'importance des problématiques en lien avec les techniques de cette balise reste faible : effectivement, la majorité des sites sont désormais propulsés par des CMS, permettant de générer facilement une page, et de configurer rapidement les informations de la balise <head>.Mais chaque site dispose de ses propres spécificités, et chaque élément au sein de la balise <head> doit justifier sa présence. De plus, le contenu généré automatiquement par un CMS n’est pas toujours en adéquation avec la page, la balise <head> offrant de nombreux mécanismes qu'il est difficile de mettre en place de manière générique. C'est pourquoi il est essentiel de vérifier par soit même que la balise <head> contenue dans votre page est bien construite.
Cet article a ainsi pour vocation de vous aider à mieux comprendre chacune des informations composant votre balise <head>, et surtout à les organiser et les utiliser à bon escient. Il présente dans un premier temps les différents contenus que l’on peut retrouver dans la balise <head>. Puis il détaillera dans une seconde partie en quoi la balise <head> peut influer sur les performances de votre page, et quels informations sont nécessaires pour une page destinée aux périphériques mobiles.
Les informations liées au référencement
Balise <title>
La balise <title> sert à définir un titre à votre page, qui se retrouvera en titre de votre onglet par exemple. Elle est incontournable pour le référencement. Vous devez y indiquer un titre cohérent pour votre page, unique, contenant les principaux mots clés, le tout en moins de 55 caractères. En effet, le contenu de la balise <title> est affichée par les moteurs de recherches comme Google. Le titre est alors tronqué s’il dépasse cette limite d’environ 55 caractères. Les mots-clés au delà de ce seuil seront ainsi ignorés, et donc inutiles.<title>DareBoost - Analyse et conseil en performance et qualité web</title>Meta description
Cette seconde balise très importante pour votre référencement regroupe l'ensemble de mots clés liés à la page, en moins de 160 caractères : tout comme la balise <title>, la description est affichée par les moteurs de recherche et il est inutile d’aller au delà de ces 160 caractères.<meta name="description" content="DareBoost est une solution SaaS d’analyse automatisée de la performance et de la qualité de sites web" />Cette meta information doit elle aussi être unique pour chaque page de votre site.Meta keywords
Cette meta information est sujet à de nombreux débats sur la toile. En effet, son impact sur le référencement d’une page s’est aujourd'hui considérablement amoindri.Pour appuyer ce propos, vous pouvez visualiser cette vidéo, indiquant que Google n’y prette plus attention. Cependant, d’autres moteurs de recherches tels Yahoo Search y accordent un peu plus d’intérêt, sans que l’impact ne soit conséquent pour autant.Vous pouvez continuer d’indiquer la <meta name="keywords" />, et y faire figurer les principaux mots-clés en relation avec la page, sa présence n’étant jamais pénalisée. Mais ne vous faites guère trop d’illusions sur son impact sur le référencement de votre page.Liez votre page aux réseaux sociaux
Les réseaux sociaux occupent une place prépondérante aujourd'hui, pouvant vous aider à améliorer la visibilité de votre page sur le web. Il est ainsi conseillé de fournir les différentes informations qui seront utilisées par ces réseaux.Par exemple, vous pouvez envisager l'utilisation des propriétés du protocole OpenGraph, notamment utilisées par Facebook. Elles vous permettent de mieux contrôler les informations qui seront affichées lors d'un partage de votre page sur les réseaux sociaux. Voici les quatre principales propriétés de ce protocole :<meta property="og:title" content="DareBoost" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://dareboost.com/" />
<meta property="og:image" content="https://dareboost.com/image.jpg" />
Les informations complémentaires
Favicon
La balise <head> vous permet par ailleurs de définir une icône pour votre page, appelée favicon, qui sera affichée comme image d’onglet par les navigateurs. Exemple d’utilisation :<link rel="icon" type="image/png" href="/expert/expert/expert/mypath/favicon.png"/>Deux formats différents sont indiqués ici :
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="/expert/expert/expert/mypath/favicon.ico" /><![endif]-->
- .png, supporté par la plupart des navigateurs, sauf Internet Explorer (vous pouvez aussi utiliser un .jpeg ou .gif)
- .ico, seul format supporté par Internet Explorer
Autres balises meta
Vous pouvez aussi indiquer une multitude d'informations complémentaires dans vos balises <meta>. Il est par exemple possible de donner des instructions aux robots analysant votre page, et d'indiquer aux robots d'indexation de Google de ne pas indexer la page :<meta name="robots" content="noindex" />Veillez à l’utilité de chaque information
En effet, il ne faut pas abuser des meta informations et être sûr de leur utilité.Sachez par exemple que les meta “http-equiv” permettent de redéfinir des en-têtes HTTP. Elles sont utiles si vous utilisez par exemple un serveur mutualisé, sur lequel vous ne pouvez pas configurer les en-têtes HTTP. Dans le cas contraire, rien ne justifie leur présence.
De plus, définir le jeu de caractères de la page dans le <head> peut ralentir le chargement de votre page.
Version HTML 4 (à éviter) :
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />Version HTML 5 (à éviter) :<meta charset="UTF-8" />Le navigateur stoppe l’interprétation de la page dès lors qu’il rencontre la balise lui indiquant le jeu de caractères à utiliser. Dans ce cas, il exécute à nouveau la page depuis le début en utilisant le bon jeu de caractères.Si vous remplacez ces balises par l'en-tête HTTP "Content-Type”, le navigateur sait directement quel jeu de caractères est nécessaire, et l’interprétation de la page est réalisée en une seule passe.
Note: Si vous êtes dans l'obligation de définir le jeu de caractères dans la balise <head>, placez le au plus tôt dans le <head> (si possible en premier), pour le jeu de caractère soit détecté au plus tôt.
Dans la seconde partie consacrée à ce thème, nous parlerons de l'organisation du chargement des ressources de la page depuis la balise <head> pour optimiser le temps de chargement, ainsi que des spécificités à appliquer pour les sites mobiles.
Sachez par ailleurs que l'outil d'audit de qualité et de performance DareBoost vous permet de vérifier automatiquement si votre page respecte ces bonnes pratiques.