Glossaire SEO

Trouvez la définition de tous les termes du lexique SEO.

Apprendre le SEO Tutoriels sur les outils Glossaire SEO Support
A

Absence de document.write

Qu'est-ce que l'instruction document.write ?

Il s'agit d'une méthode JavaScript native aux navigateurs qui permet d'écrire dynamiquement du code HTML ou JavaScript directement dans une page. Lorsque la page est entièrement chargée, il remplace le code existant par celui défini.

<html>
    ...
    <script>
        document.write("Je remplace le contenu de la page");
    </script>
</html>

Pourquoi est-elle à éviter ?

L'utilisation de document.write peut retarder de plusieurs secondes l'affichage de la page, de plus, dans certains cas (une connexion lente par exemple) chrome bloque son usage et rend incertain le rendu de la page.

Comment remplacer son utilisation ?

Lorsque l'instruction document.write est utilisée dans le code JavaScript de la page, il est nécessaire de la retirer ou de la remplacer par des méthodes de manipulation du DOM.

Par exemple, pour insérer du code HTML :

<script>
    document.getElementById("conteneur").innerHTML = "Du contenu HTML ajouté proprement";
</script>

Pour intégrer dynamiquement un script JavaScript :

<script>
    var script = document.createElement('script'); 
    script.src = 'https://cdn.exemple.com/script.js'; 
    document.head.appendChild(script);
</script>

Si un script tiers utilise document.write, rapprochez-vous du fournisseur afin de trouver une solution alternative.

Absence de plugins

C’est quoi un plugin ?

Un plugin est un petit programme conçu pour venir se greffer à un programme principal appelé logiciel hôte (Par exemple : votre navigateur). Les plugins sont utilisés par de nombreux sites web. Ils permettent aux internautes de regarder des vidéos, entendre des sons, jouer à des jeux, voir des infographies, etc.
Parmis les plus connus, on retrouve les plugins Java et Flash par exemple.

Pourquoi sont-ils abandonnés ?

L'avènement du mobile nécessite de créer des contenus simples et rapidement consommables, ne nécessitant pas de plugins. Certains d'entre eux ne sont même pas lisibles par les téléphones portables, ce qui nuit  à l'expérience utilisateur.
De nombreux problèmes concernant la sécurité ont également été identifiés, comme l'accès au micro ou caméra de votre ordinateur par exemple.

Enfin, les robots des moteurs de recherche ne peuvent pas exploiter le contenu de certains plugins pour le référencement. Ce qui veut dire que le contenu des plugins n'apparaît pas sur les résultats des moteurs de recherche, notamment avec Flash et Java.

Comment résoudre ce problème ?

Flash, Silverlight et Java étant de plus en plus rejetés par les navigateurs, la solution la plus évidente pour éviter le blocage par les moteurs de recherche est de ne pas utiliser de plugin pour l’affichage de votre contenu.

Par ailleurs, il est possible de convertir du contenu basé sur un plugin grâce au HTML5. Ce format permet :

  • d'adapter le contenu de votre site à tous les types d'écrans
  • d'être plus sécurisé
  • de n'effectuer aucune installation particluière
  • d'occuper moins de place qu'un plugin

Absence de sur-optimisation (stuffing)

C’est quoi le stuffing de mots clés ?

On parle également de bourrage de mots clés ou de sur-optimisation. Il s’agit d’utiliser la répétition excessive de keywords dans des éléments qui participent au référencement (titres, ancres de lien,...)

Pourquoi il est important  de ne pas sur-optimiser les mots clés ?

Le stuffing est une pratique de black hat qui peut être sanctionnée par les moteurs de recherche. Cette pratique est peut être néfaste sur plusieurs points :

  • les moteurs de recherche vont rapidement détecter que vous tentez de tromper leurs robots d’indexation. Ainsi, vous risquez de voir votre site être reléguer dans les dernières pages des SERP

  • le keyword stuffing pénalise la qualité de votre contenu, qui risque de perdre en qualité et en lisibilité pour l’internaute. Votre site connaîtra une baisse de trafic et une hausse du taux de rebond. En conséquence, votre site apparaîtra comme “de mauvaise qualité” pour Google et vous serez poussé vers les bas-fonds des SERP

Comment éviter la sur-optimisation de mots clés ?

La meilleure façon de combattre le stuffing aujourd’hui est de produire un contenu de qualité mêlant présence de mots clés ciblés pour le référencement et lisibilité pour l’internaute. 
N’hésitez pas à favoriser un champ lexical développé plutôt que de vous concentrez sur une répétition de vos mots clés, qui peut être considérée comme abusive.
En effet, Google et son algorithme prennent désormais en compte la richesse sémantique de votre contenu. C’est pourquoi, même si vous n’avez pas explicitement évoqué certains mots clés, vous pourrez tout de même être positionnée sur une expression principale et sur des expressions secondaires, si votre champ lexical y fait référence.

Accès au bas de page

Qu'est-ce le bas de page ?

Il s'agit tout simplement du pied de page où toutes les informations principales du site WEB sont généralement présentes.

Pourquoi son accès est important ?

Les utilisateurs ont tendance à accéder au bas de page pour obtenir une vue d'ensemble de ce que le site propose en terme de produits et/ou services. Plus la page occupe une hauteur importante, plus les utilisateurs sur mobile devront défiler pour y accéder et peuvent être découragés. Le fait de garder une hauteur de page minime permet donc aux utilisateurs d'accéder plus facilement aux informations qu'ils recherchent et améliore leur expérience.

Comment diminuer la hauteur de page ?

Pour un accès optimal, il est recommandé de ne pas dépasser 10 000px. Si la hauteur de page dépasse cette recommandation, il est nécessaire de :

  • ne garder que le contenu utile de la page
  • utiliser des blocs dépliables où le contenu apparait lors d'intéraction utilisateur
  • revoir la mise en page : diminuer les marges, taille du textes, taille des images etc

Accessibility Score

L'Accessibility Score© (Score d'accessibilité en français) est un indicateur créé par Cocolyze permettant de mesurer la facilité d'accès d'un utilisateur à une page web.

Cet indicateur prend en compte la performance de la page et de ses ressources. Il va étudier quatre critères principaux qui influent sur la rapidité de chargement de la page :  le temps de réponse du serveur, le poids de la page, le degrés de sécurisation de la page et la taille des images.

En fonction de chaque résultat, Cocolyze propose une analyse détaillée et les solutions possibles pour résoudre les problèmes d’accessibilité à la page.

L'appellation Accessibility Score© est une marque déposée par Cocolyze.

Adaptation des images

Qu’est-ce que l’adaptation des images ?

Le fait qu'une image s'adapte à un écran signifie que ses dimensions correspondent aux dimensions de l'écran, elle s'exprime en pixel, exemple : 600px x 400px. L’objectif est donc que la taille de l’image s’adapte aux dimensions de l’écran, mais également sa résolution et sa qualité. 

Pourquoi c’est important ?

Les dimensions d’une image doivent être adaptées à l’écran du navigateur : une image trop grande risque de mettre du temps à charger et de ne pas être visible durant ce temps de chargement. Tandis qu’une image trop petite risque d'être affichée de manière pixelisée.
C’est pourquoi les images adaptatives sont nécessaires pour rendre son site web “responsive”, c’est-à-dire que la même page d’un site aura un rendu adapté à la taille de l’écran que vous utilisez. Il est donc nécessaire d’adapter ses images pour ne pas avoir d’images trop grandes sur un smartphone, par exemple.

Comment résoudre ce problème ?

Il est possible d'enregistrer une image sous différentes dimensions afin que celle ayant les dimensions les plus adaptées soit chargée.

Le fait de définir différentes dimensions d'images est possible grâce à l'attribut srcset. On l’indique de la manière suivante : "(url image alternative 1) (description largeur), (url image alternative 2) (description largeur)".

<img src="image.jpg" srcset="petite-image.jpg 480w, grande-image.jpg 1080w">

A noter que la description de la largeur est spécifiée avec l'unité w, et non px. Il s’agit de la taille réelle de l'image. Elle peut être trouvée en examinant les propriétés du fichier image sur l'ordinateur.

Lorsque cet attribut est spécifié, le navigateur charge l'image adéquate. 

Il est important de laisser l'attribut src défini, afin que les navigateurs qui ne prennent pas en compte l'attribut srcset puissent l'afficher.

Agrandissement autorisé

Qu'est-ce qu'un agrandissement ?

Un agrandissement est simplement le fait d'augmenter la taille d'un contenu sur une page WEB. Lorsqu'un utilisateur navigue sur un site et plus particulièrement depuis un téléphone, il se peut qu'il n'arrive pas à lire le texte ou désire regarder plus précisément une image, dans ce cas de figure, il zoomera sur la page afin d'obtenir une taille convenable.

Pourquoi c'est important ?

Il est possible d'interdire l'agrandissement d'une page WEB via la balise "meta viewport" qui donne des instructions quant à la taille et à l'échelle des éléments selon la fenêtre du navigateur. Lorsque cette interdiction est définie, l'utilisateur ne sera pas en mesure d'agrandir le contenu et il se peut qu'il ne parvienne même pas à lire le texte de la page. Cette frustration dégrade l'expérience utilisateur et risque de le faire fuire.

Comment l'autoriser ?

Par défaut, les navigateurs autorisent le zoom, si aucune balise "meta viewport" n'est définie, il n'est pas nécéssaire d'intervenir.

Si une balise "meta viewport" est définie, veillez à ce que :

  • l'instruction "user-scalable=no" ne soit pas déclarée
  • l'instruction "maximum-scale" ne soit pas définie en dessous de 5

Exemple d'une "meta viewport" interdisant l'agrandissement :

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

Exemple d'une "meta viewport" autorisant l'agrandissement :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=6" />

Ajax

L’AJAX (Asynchronous JavaScript and XML) est une architecture informatique, un concept de programmation web qui cumulent plusieurs technologies : Javascript, le JSON et XML. Cette association a été pensée dans le but de créer des pages plus dynamiques, d’optimiser l’interaction avec l’utilisateur et d’apporter davantage de confort d’utilisation.
L’Ajax est une technique compatible avec la majorité des navigateurs web (Google, Safari, Mozilla Firefox, etc…). Elle est applicable sur tous les supports : smartphones, tablettes, ordinateurs, etc… quelque soit le système d’exploitation (Linux, Mac, Windows).

Alternative textuelle

C’est quoi une description d'image ?

Une description d'image permet aux robots des moteurs de recherche de comprendre ce qu'est une image et de l'indexer. En langage HTML, il s'agit de l'attribut alt, qui permet de créer une alternative textuelle à une image. 

Pourquoi c’est important ?

L’alternative textuelle va donc indiquer à Google à quoi correspond l’image. Il est important de rédiger correctement l’intitulé de votre image dans le code HTML, car l’alternative textuelle est prise en compte par les robots pour le référencement de votre site.

De plus, lorsque votre image n’apparaît pas à l’écran, le texte écrit  dans l’attribut alt du code HTML apparaîtra aux internautes pour donner quelques détails sur celle-ci.

Comment rédiger une alternative textuelle ? 

Le plus simple et efficace pour rédiger un attribut alt est d’utiliser des phrases courtes et descriptives. 

Par exemple  : <img src="https://example.com/image.jpg" alt="alternative textuelle claire" />

Il faut fournir un attribut alt à chaque élément d’image <img>. 

En résumé, pour qu’un attribut alt soit rédigé et correctement référencé, il faut :

  • que l’alternative textuelle rédigée soit claire, descriptive et courte

  • que l’attribut n'inclut pas de termes tels que graphique, image ou diagramme

Animations non composées

Qu'est qu'une animation non composée ?

Lorsqu'un navigateur interprète le code d'une page et convertit le HTML, CSS et JavaScript en pixels, il effectue ce qu'on appelle le pipeline de pixels. C'est un processus qui comporte 5 étapes séquentielles :

  1. JavaScript / CSS
  2. Calculs de style
  3. Mise en page
  4. Rendu
  5. Composition

À chaque étape, le navigateur utilise le résultat de l'étape précédente pour créer de nouvelles données.  Une animation non composée est un rendu qui oblige la navigateur à revenir sur une étape précédente (JavaScript / CSS, Calculs de style et Mise en page) ce qui augmente les calculs nécessaires et donc le délai de rendu.

Pourquoi sont-elles à éviter ?

Les animations non composées peuvent sembler saccadées lors du rendu par le navigateur sur des machines peu puissantes  ou lorsque de lourdes tâches sont exécutées en même temps. Ce manque de fluidité nuit à la perception visuelle de la page pour les utilisateurs.

Comment les corriger ?

Il existe plusieurs raisons pour lesquelles une animation est non composée où il est nécessaire d'intervenir sur les règles CSS mises en place :

  • propriété CSS incompatible
  • la propriété liée à "transform" dépend de la taille de la zone
  • la propriété liée à "filter" peut déplacer des pixels
  • le mode de composite de l'effet n'est pas "replace"
  • la cible contient une autre animation incompatible
  • l'effet comporte des paramètres de minutage non compatibles

Pour plus d'informations sur le pipeline de pixels et l'optimisation des performances pour le rendu, consultez la documentation Google sur les performances de rendu.

Autoriser l'exploration

Afin d'analyser le contenu de votre page, Google doit être capable d'explorer (ou "crawler") votre page. C'est à dire qu'il doit être capable d'y accèder tel qu'un utilisateur via son navigateur.

Pourquoi l'exploration est-elle parfois bloquée?

Généralement, lorsqu'un site est en cours de construction ou pour des raisons internes, certains webmasters décident de bloquer volontairement l'accès à leurs pages via Google. 
Attention, cela n'empêchera pas Google d'indéxer vos pages dans ses résultats s'il trouve des liens vers votre site, cela l'empêchera seulement de voir son contenu. 

Il faut intervenir sur le fichier Robots.txt, un fichier texte à la racine du site internet, accessible depuis l'adresse www.siteweb.com/robots.txt. 

Dans ce fichier, il est possible de définir des directives afin d'autoriser ou d'interdire un ou plusieurs robots à explorer certaines de vos pages. 

Retrouvez la documentation complète du fichier Robots.txt sur la documentation Google

 

B

Bibliothèques volumineuses

Qu'est-ce qu'une bibliothèque JavaScript ?

Une bibliothèque est une ressource tierce intégrée à la page contenant du code JavaScript. Elle apporte un ensemble de fonctionnalités supplémentaires au navigateur. L'intégration de la bibliothèque s'effectue grâce à la balise HTML <script>.

Par exemple, la bibliothèque D3.js permet de réaliser différents types de graphique très rapidement.

<script src="https://d3js.org/d3.v6.min.js"></script>

Pourquoi est-il important qu'elles soient légères ?

Les bibliothèques JavaScript volumineuses peuvent entrainer de mauvaises performances du fait qu'elles consomment davatange les ressources du navigateur lors de leur interprétation, et alourdissent la charge réseau nécessaire à leur téléchargement. Il est donc intéressant d'utiliser des bibliothèques légères afin d'améliorer le chargement de la page ainsi que le délai d'intéractivité.

Que faire des bibliothèques volumineuses ?

Lorsqu'une bibliothèque possède une alternative plus légère, ou offrant moins de fonctionnalités mais comblant l'utilité que vous en faites, il est intéressant de remplacer celle-ci. Le remplacement d'une bibliothèque JavaScript n'est pas quelque chose d'anodin puisque vous devez intervenir dans le code, et modifier l'ensemble des appels utilisant l'ancienne bibliothèque pour la nouvelle.

Par l'exemple, la bibliothèque "Moment", qui permet de manipuler les dates, peut être remplacée par "dayjs", ce qui allège le poids de la page de 69Ko.

 

C

Cocon thématique

Un cocon thématique est un ensemble de mots ou expressions appartenant au même thème et au même champ lexical. Une page riche avec du contenu de qualité contient en général plusieurs cocons thématiques contenant eux même des mots clés.

Utiliser le cocon thématique

Lors de la création de votre contenu, les cocons thématiques identifiés par Cocolyze vous permettent d’enrichir votre page avec les bonnes expressions et les bons mots clés. En intégrant intelligemment les mots clés des différents cocons thématiques vous pourrez :

  • Enrichir votre contenu au niveau lexical et améliorer la qualité de celui-ci.

  • Arriver plus facilement à un contenu textuel suffisant au niveau quantitatif (nombre de mots minimum pour être bien positionné).

Comment Cocolyze identifie les cocons thématiques ?

1. Exploration.

Cocolyze explore les pages des 20 premiers résultats de recherche dans les SERPs et analyse le contenu.

2. Analyse.

Parmi différents éléments analysés par Cocolyze, l’algorithme identifie :

  • La densité pondérée de chacun des mots clés. En fonction de la position d’un mot clé sur la page, celui-ci a plus ou moins de poids. Par exemple, le mot clé dans le titre <h1> a plus de poids que dans un paragraphe. Cocolyze identifie donc le nombre total d’occurrences, ainsi que leurs poids 

Les thématiques de mots clés. Via un algorithme développé en interne, Cocolyze est capable de regrouper les mots clés, à la fois génériques et longue traine par thématique.

Code déprécié

Qu'est-ce que du code déprécié ?

Le code déprécié est principalement du code JavaScript faisant appel à des fonctions obsolètes du navigateur. Le navigateur maintient temporairement ces fonctions dépassées (ce sont des méthodes API : Access Programming Interface) par soucis de compatibilité mais tend à les retirer ou les modifier dans un avenir proche.

Pourquoi est-il à éviter ?

Lors de mise à jour du navigateur, le code utilisant ces méthodes risque de ne plus fonctionner et donc de provoquer des erreurs JavaScript. L'apparition d'erreurs peut mener à des problèmes plus ou moins graves selon l'utilité du code. Le contenu peut être manquant, la navigation dans le site peut ne plus fonctionner, les interactions avec les différents éléments de la page peuvent ne pas répondre. En bref, votre page se met à avoir des bugs qui n'étaient pas présents jusqu'à maintenant.

Comment corriger du code déprécié ?

Lorsque une méthode fournie par le navigateur est marquée comme dépréciée, il est nécessaire d'intervenir dans le code lui faisait appel afin de changer la méthode pour une alternative permettant de garantir la compatibilité future. Si ce code provient de l'utilisation d'un module tiers, il est alors nécéssaire de mettre à jour celui-ci ou de trouver une alternative plus moderne.

Les méthodes dépréciées apparaissent sous forme d'un avertissement dans le console du navigateur Chrome. Voici un avertissement sur la présence d'une méthode obsolète dont l'utilisation va prochainement changer :

speechSynthesis.speak() : speechSynthesis.speak() without user activation is no longer allowed since M71, 
around December 2018. See https://www.chromestatus.com/feature/5687444770914304 for more details

 

 

Code superflu

A quoi correspond le code superflu?

Il s'agit principalement de code JavaScript dont le rôle est de combler des fonctionnalités manquantes sur certains navigateurs, et plus particulièrement sur les anciennes versions. Ces fonctions, dont l'objectif est d'assurer la compatibilité sur les différents supports, s'appellent des polyfills. Ils peuvent être jugés comme superflus du fait que la majorité des navigateurs récents ne les utilisent pas.

En quoi est-ce problématique ?

Les polyfills (et attributs "transform") sont une bonne chose du fait qu'ils permettent aux anciens navigateurs d'utiliser des fonctionnalités récentes et sont donc importants pour l'accessibilité de tous les utilisateurs, même ceux qui ne mettent pas à jour leur navigateur. Ce qui est problématique, c'est le fait qu'ils soient chargés par les navigateurs modernes qui n'en ont pas besoin. Tout comme les scripts inutilisés, le téléchargement de code non utilisé retarde le chargement de la page et allourdit l'interpétation nécessaire du code par le navigateur, ce qui altère la rapidité de la page.

Comment accélerer le chargement sur les navigateurs récents ?

La solution la plus courante consiste à détecter le navigateur de l'internaute et à ne charger que les polyfills nécessaires :

if (navigateur_recent()) {
    lancement();
} else {
    charger_script('polyfills.js', lancement);
}

function lancement() {
    ...
}

Une autre solution consiste à utiliser la nouvelle syntaxte pour le chargement de modules JavaScript, ce qui permet de charger le script adéquate en fonction de l'interpretation du code HTML par le navigateur :

<!-- Les navigateurs modernes chargeront ce script et les anciens l'ignoreront -->
<script type="module" src="script.js"></script>

<!-- Les anciens navigateurs chargeront ce script et les récents l'ignoreront -->
<script nomodule src="script_avec_polyfills.js"></script>

Retrouvez plus d'informations concernant cette technique sur l'article de Philip Walton, ingénieur chez Google (en anglais).

Communications HTTPS

Qu'est-ce que le HTTPS ?

Le protocole HTTPS permet de chiffrer les communications HTTP (Hypertext Transfer Protocol : protocole WEB nécessaire pour  échanger avec un serveur) entres les utilisateurs et un site WEB. De plus lorsqu'un navigateur effectue une connexion sécurisée grâce au protocole HTTPS avec un site, le serveur WEB lui transmet un certificat d'authenticité. Ce certificat sert à vérifier l'identité du site auprès d'autorités de certification reconnues comme Symantec, VeriSign ou encore Digicert. Ce comportement est directement intégré dans les navigateurs et si un problème survient, la navigateur empêchera l'accès au site WEB pour les utilisateurs.

Pourquoi est-il important ?

Le protocole HTTPS empêche concrètement la falsification et l'écoute des communicatons entre un utilisateur et un site WEB, ce qui améliore grandement la sécurité relative au site et met en confiance les utilisateurs. Par ailleurs, ce critère est très important aux yeux de Google et influe directement sur le positionnement d'une page.

Comment le mettre en place ?

La mise en place du protocole HTTPS se fait au niveau du serveur où une configuration spécifique doit être mise en place. De même, il est nécessaire de rediriger tout le trafic non sécurisé HTTP vers HTTPS.  Retrouvez plus d’informations sur la mise en place du protocole HTTPS sur la documentation de Google (en anglais).

Lorsque le HTTPS est actif sur un site, il est nécessaire que toutes les ressources de la page soient également chargées via ce protocole sinon le phénomène de "Mixed Content" (mélange HTTPS / HTTP) survient et peut poser des problèmes quant au chargement des ressources non sécurisées. Retrouvez l’ensemble des solutions permettant de régler le problème du Mixed Content sur la documentation Google (en anglais).

 

Compression textuelle

Qu'est-ce que la compression textuelle ?

La compression textuelle permet de compresser toutes les ressources de votre site web faisant appel à l’utilisation de texte (html, JavaScript, style CSS, appels AJAX). 

Pourquoi c’est important ?

Cette opération permet de diminuer le poids des données envoyées au client : le serveur va compresser les données ciblées, puis les envoyer jusqu’au navigateur qui va se charger de les décompresser et de les utiliser pour afficher le contenu textuel de votre page.
Grâce à ce procédé, l’expérience utilisateur sera améliorée, car le temps de chargement de votre page web sera réduit.

Comment mettre en place la compression textuelle ?

Il existe plusieurs formats et méthodes de compression : Gzip, Deflate et Brotli.

Lors d'une requête d'un navigateur vers un serveur, celui-ci spécifie dans une en-tête HTTP "Accept-Encoding" les algorithmes qu'il prend en charge.

Accept-Encoding: gzip, compress, br

En réponse, le serveur renverra alors l’indication “Content-Encoding” dans l’en-tête HTTP pour spécifier quel algorithme de compression a été utilisé.

Content-Encoding: gzip

Il est important de ne pas activer la compression textuelle sur les autres type de ressources : images, vidéos, … et de la mettre en place sur le serveur WEB de votre site.

Contraste de couleurs

C’est quoi le contraste de couleurs ?

Le contraste de couleurs correspond à la capacité de deux choses à ressortir l’une par rapport à l’autre. Dans une interface digitale ce contraste concerne principalement la lisibilité du texte et des icônes par rapport au fond.

Pourquoi est-il important ?

Le contraste de couleurs est l’un des premiers éléments qui font qu’une page soit lisible pour les utilisateurs. Un faible contraste entre le texte et le fond peut rendre difficile la lisibilité par les utilisateurs, surtout pour ceux qui ont un problème de vue. 

Comment régler le contraste de couleurs ?

L'analyse suit les recommandations WCAG 2.1 dont les standards d'accessibilité sont les suivantes :

La présentation visuelle du texte et des images doit avoir un ratio de contraste d'au moins 4,5:1, sauf dans les cas suivants :

  • Le texte à grande échelle et les images de texte à grande échelle doivent avoir un ratio de contraste d'au moins 3:1 ;
  • Le texte ou les images de texte qui font partie d'un élément d'interface utilisateur inactif, qui sont de la pure décoration, qui ne sont visibles par personne ou qui font partie d'une image qui contient un autre contenu visuel important, n'ont pas d'exigence en matière de contraste
  • Le texte qui fait partie d'un logo ou d'une marque n'a pas besoin de contraste

Le ratio de contraste est une mesure de la différence de " brillance " ou de luminosité perçue entre deux couleurs. Cette différence de luminosité est exprimée sous la forme d'un rapport allant de 1:1 texte blanc sur fond blanc à 21:1 texte noir sur fond blanc.

  • Rouge (#FF0000) a un ratio de 4:1
  • Vert (#00FF00) a un faible ratio de 1.4:1
  • Bleu (#000FF) a un contraste de 8.6:1
D

Demandes critiques

Que sont les chaînes de demandes critiques ?

Les chaînes de demandes critiques sont les requêtes dépendantes et importantes de la page. Elles constituent toutes les ressources critiques chargées en priorité qui bloquent le rendu de la page.

Par exemple pour une simple page :

<html>
<head>
    <title>Demandes critiques</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
    <h1>Demandes critiques</h1>
</body>
   

Les chaînes de demandes critiques seront :

  • https://exemple.com/
    • https://exemple.com/css/style.css
      • https://exemple.com/font/roboto.woff2 (515ms, 14,85ko)
    • https://exemple.com/js/jquery.js (602ms, 32,56ko)

Dans cet exemple, 2 chaînes son définies, la longueur de la chaîne la plus longue est de 3 et peut entrainer une latence maximale de 1,73s (chargement et interprétation).

Pourquoi c'est important ?

Plus la taille des chaînes et le poids des ressources à transferer sont importants, plus l'impact sur le chargement de la page est important. Il est donc nécessaire de garder les chaînes de demandes critiques aussi minimes que possible afin que la page puisse charger rapidement.

Comment les optimiser ?

Il est recommandé de ne pas dépasser 8 chaînes, pour diminuer la taille des chaînes de demandes critiques, vous devez :

  • minimiser le nombre de ressources critiques : supprimer les ressources non utilisées
<link rel="stylesheet" type="text/css" href="css/inutile.css" />
  • reporter le chargement des ressources non critiques grâce à l'attribut "defer" ou "async"
<script type="text/javascript" src="js/jquery.js" defer></script>
  • précharger les ressources dépendantes d'autres ressources
<link rel="preload" href="font/roboto.woff2" as="font" crossorigin="anonymous" />
  • optimiser l'ordre dans lequel les ressources critiques restantes sont chargées : définir les ressources les plus critiques le plus tôt possible
  • reduire le poids des ressources

 

Dimension des images

A quoi correspondent les dimensions d’une image ?

Les dimensions d'une image correspondent à sa taille, exprimée en pixel, par exemple : 600px x 200px.
Pour rappel, les pixels sont un ensemble de points qui constituent une image. Le nombre de points présent dans l’image constitue la définition de l’image.
La résolution est, quant à elle, différente de la définition. La résolution d’une image est le rapport entre le nombre de pixel dans une image et sa taille réelle lorsqu’elle apparaît sur un support physique. 

Pourquoi la dimension des images est importante ?

Les dimensions d'une image peuvent être modifiées sur l'affichage d'une page web et ne pas respecter les dimensions originales.
De plus, le rendu d’une image ayant un rapport largeur/hauteur trop différant du rapport largeur/hauteur indiqué dans le fichier source, alors l’image risque d’apparaître déformée, créant ainsi une mauvaise expérience utilisateur.

Comment définir les dimensions d’une image ?

il est important de respecter les dimensions originales et de ne pas déformer l'image de plus de 5% lors de l'affichage sur la page WEB.

Les dimensions peuvent être définies dans le code HTML, par exemple, grâce aux attributs width=500 et height=400 sur la balise <img> affichant celle-ci :

<img src="mon-image" width="500" height="400" />

Il est également possible de gérer les dimensions d'une image dans un style CSS, cette technique à l'avantage d'être plus flexible et offre davantage de possibilités :

img {
    max-width:100%;
    height:auto;
}

Doctype

Qu'est-ce que le Doctype ?

Le doctype est une indication dans une page HTML permettant de définir le type de syntaxe utilisé dans la page. 

Pourquoi c'est important ?

Si le Doctype n'est pas correctement défini, le navigateur risque d'avoir des difficultés à afficher votre page et à l'afficher d'une manière inattendue. C'est ce que l'on appelle le mode Quirks d'un navigateur.

Comment définir le Doctype ?

Il suffit d'ajouter l'instruction "<!DOCTYPE html>" en haut du document HTML : 

<!DOCTYPE html>
<html lang="en">
…

Il est recommandé d'utiliser le doctype HTML 5, les autres versions étant considérées comme "obsolètes".

E

Effet de flash sur le texte

Qu'est-ce qu'un effet de flash sur le texte ?

Il s'agit d'un effet désagréable de scintillement provoqué par l'apparition d'un texte suite au chargement d'une police web ou d'un remplacement de police d'écriture sur un texte déjà mis en forme par le navigateur.

Pourquoi est-il important d'éviter cet effet ?

Cet effet nuit à l'expérience utilisateur lors de sa navigation sur la page, de même dans certains cas, la mise en page change, ce qui peut être pénalisé par Google.

Comment l'éviter ?

Afin d'éviter que cet effet se produise sur les polices d'écritures dont l'affichage est défini comme "optional" dans le style CSS (font-display: optional), il est nécessaire de précharger celles-ci grâce à une instruction <link rel="preload" ... />, à placer dans la section <head> du code HTML.

Exemple de préchargement d'une police web :

<head> 
    <style>
        @font-face {
            font-family: "Roboto";
            font-display: "optional";
            src: local("Roboto"), 
            url(https://...roboto.woff2) format("woff2");
        }    
    </style>
...
    <link rel="preload" href="https://...roboto.woff2" as="font" /> 
... 
</head>

 

Eléments de liste

Qu’est-ce qu’un élément de liste <li> ?

Le langage html offre la possibilité de créer des listes <ul>, où chaque énumération est définie grâce à la balise <li>. Chaque élément de liste <li> s'imbrique dans la liste associée <ul>.

Pourquoi le respect l'imbrication est important ?

En fonction de la nature de la liste que vous créez, vous pourrez adaptez le contenu :

  • Les listes non ordonnées seront marquées (par défaut) par des puces. Il n’y a donc pas d’ordres d’importance dans la hiérarchisation des informations de votre liste
    Les différents éléments de votre liste devront apparaître dans un élément de bloc <ul>, qui est l’élément définissant un bloc de liste non ordonnée

  • Les listes ordonnées (ou numérotées) sont utilisées pour donner une hiérarchisation aux différentes séquences de votre liste
    Ce type de liste doit être intégrée dans un élément de bloc <ol>, qui permettra de numéroter chaque début de ligne de votre liste

Si vous n’intégrez pas votre élément de liste dans un élément de bloc <ul> ou <ol>, votre liste ne pourra pas être interprétée correctement par votre navigateur et ne sera pas prise en charge par les technologies d'assistance.

Comment construire une liste ?

Votre liste doit comporter les informations suivantes :

  • un élément de bloc <ol> ou <ul> 
  • une séquence de liste commençant par <li>

Par exemple :

<h1>Exemple de liste ordonnée de fruits</h1>
<ol>
    <li>Banane</li>
    <li>Orange</li>
    <li>Ananas</li>
</ol>

Ce qui donnera :

Exemple de liste ordonnée de fruits

  1. Banane
  2. Orange
  3. Ananas

Encodage

C’est quoi l’encodage ?

L'encodage c'est une façon de permettre aux navigateurs d'interpréter correctement les caractères. Il s'agit vulgairement d'informer les navigateurs sur la façon dont les caractères sont encodés (exemple : encodage alpha, 1 = A, 2 = B / encodage beta, 10 = A, 2 = B)

Pourquoi c’est important ?

L’encodage est important pour éviter que le navigateur affiche des caractères erronés. Cela peut notamment se produire lorsqu’on souhaite utiliser des caractères propres à une langue (comme le mandarin par exemple) et qui n’ont pas été encodés.
Par exemple : Mon code source sera traduit 私のソースコード en japonais, si mon encodage est correctement spécifié. En revanche, si mon encodage est incorrect, la même phrase pourra faire apparaître des caractères anormaux (私a!!ソ§--スコ#€).

Comment le corriger ?

Tous les documents (.txt, .html, ou texte brut) qui contiennent du texte sont enregistrés avec des caractères définis. Cela correspond à l’encodage réel du document.

Il est recommandé d'utiliser l'encodage "utf-8" sur vos pages qui permet d'encoder la majorité des caractères possibles.

Pour vérifier quel est l’encodage que vos pages HTML utilisent, vous pouvez vous rendre dans les paramètres de configuration de votre éditeur de texte (i.e Atom, Sublime Text).

N’oubliez pas de déclarer les informations sur votre encodage au navigateur. Pour cela, il peut être défini : 

  • en tant que valeur dans l'en-tête dédié au type du document "Content-Type: text/html; charset=utf-8"
  • dans un balises HTML <meta charset="utf-8">
  • dans une balise HTML <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • sur plusieurs éléments mais la valeur doit être la même, le même encodage de défini

Enfin ,il doit être défini au moins sur l'un des éléments.

Erreurs Javascript

C’est quoi une erreur JavaScript ?

Une erreur JavaScript est un problème rencontré durant l'interprétation du code par le navigateur de l'internaute. Ce code est généralement destiné à produire du contenu ou gérer les interactions avec les utilisateurs au niveau de la page. La levée d'une erreur peut apparaitre suite à des erreurs de programmation ou de compatibilité avec le navigateur.

Pourquoi c’est important ?

Lorsqu'une erreur se produit, l'exécution du reste des instructions présentes dans ce code est alors interrompue, ce qui peut mener à des problèmes plus ou moins graves selon l'utilité du code. Le contenu peut être manquant, la navigation dans le site peut ne plus fonctionner, les interactions avec les différents éléments de la page peuvent ne pas répondre. 

En bref, des erreurs javascript peuvent grandement altérer l'expérience utilisateur et rendre invisible votre contenu aux yeux des robots d'exploration. 

Comment résoudre les erreurs Javascript ?

Veillez à ce que les scripts utilisés soient compatibles avec la majorité des navigateurs et non bogués.

S'il s'agit de votre code :

  • pensez à relever les erreurs affichées dans la console
  • testez et déboguez votre code grâce aux outils fournis par les navigateurs
  • si vous ne pouvez pas corriger le problème, pensez à l'encapsuler dans un try {...} catch(error) {...}

Evénement onunload

C’est quoi l’événement "unload" ?

L'événement "unload" se produit lorsque l’utilisateur quitte une page; ou lorsque l’utilisateur clique sur un lien, un envoi de formulaire, ferme la fenêtre de son navigateur, lorsqu’on revient sur la page précédente, etc. A l’inverse, l’événement "load" intervient quand la page a fini de charger. 

Pourquoi c’est important ?

Les attributs "onUnload" et "onLoad" sont intégrés dans les balises <body> en HTML ou <frameset> en JavaScript.
Cependant, l’événement unload ne fonctionne pas cas, notamment sur mobile, quand :

  • on ferme l’onglet d’une page web à partir du sélecteur d’onglet 
  • on ferme l’application du navigateur à partir du sélecteur d'applications

De plus, la présence d’un événement "unload" peut empêcher les navigateurs de placer des pages en cache ou en arrière-plan lors de la navigation.

Par exemple : 

Si vous êtes sur une application web qui lit une vidéo et que vous décidez en même temps de consulter une autre application, l’événement unload peut empêcher à l’application contenant la vidéo de s’arrêter. L’unload empêchera cette application d’être considérée comme en arrière-plan, ce qui ne permettra pas à la vidéo d’être interrompue en basculant sur une autre application ou page web.

Comment résoudre ce problème ?

Il est recommandé sur tous les navigateurs modernes, d’utiliser l’événement "pagehide" pour détecter les déchargements de page, c’est-à-dire lorsqu’on l’a quittée.

Exécution des scripts

Qu'est-ce que l'exécution des scripts ?

Il s'agit du temps consacré à l'analyse, le compilation et l'exécution du code JavaScript par le navigateur. Ces étapes son indispensables après le chargement des scripts afin que la page puisse profiter des fonctionnalités et comportements définis. L'exécution principale est appelée "main thread" (il est possible de décharger certains traitements sur des "threads" secondaires), il s'agit vulgairement du processus principal en charge du rendu et de l'intéractivité de la page.

Pourquoi est-elle importante ?

Lorsque la page inclut énormément de code JavaScript, celui-ci dégrade les performances de la page sur plusieurs points :

  • un délai de chargement ralenti par le poids des scripts à télécharger
  • une perte d'intéractivité quant aux actions des utilisateurs du fait d'une solicitation trop importante du "main thread" qui ne peut pas répondre
  • un coût d'interprétation plus important, surtout si la page exécute beaucoup de code avant d'en avoir besoin, ce qui retarde le délai d'intéractivité
  • une consommation mémoire importante ce qui peut donner des effets de lenteur et de saccade aux utilisateurs

Comment l'améliorer ?

Lorsqu'une page souffre de lenteur due à une éxécution de scripts trop importante, il est utile de :

  • retirer les scripts inutilisés de la page
  • retirer le code inutilisé des scripts
  • diviser le code JavaScript dans des fichiers séparés et ne charger que ceux utiles à la page
  • différer l'exécution de certaines tâches dans le code JavaScript
  • diminuer de manière générale l'utilisation de scripts dans la page

 

Exploration par Google

C’est quoi l’exploration par Google ?

L'exploration consiste pour les robots à parcourir les sites web, en passant de liens en liens afin de découvrir et indexer les contenus rencontrés. Lorsque les robots de Google, nommés googlebot, découvrent une nouvelle page à explorer, ils vérifient auparavant qu'ils ont l'autorisation d'y accéder grâce aux directives du  fichier robots.txt. Si les robots sont autorisés à y accéder, ils examineront la page sinon ils l'ignoreront.

Pourquoi est-il important que les robots puissent accéder ou non à votre page ?

Si les googlebots ne peuvent pas explorer une page, ils ne connaîtront pas son contenu et ne risqueront  pas de l'indexer, même si c'est possible que la page soit indexée par des liens vers celle-ci, par exemple. Dans certains cas, l'interdiction à l’exploration peut être aussi nécessaire. Par exemple, lorsqu'une partie de votre site ne doit pas être explorée pour des raisons de sécurité ou d’inutilité, il est important d'interdire l'exploration de ces pages.

Comment vérifier les autorisations aux robots de Google ?

Vous pouvez vérifier l’autorisation aux robots de Google directement dans les instructions du fichier robots.txt. Pour pouvoir autoriser ou interdire l’exploration par googlebot vous devez ajouter une instruction “allow” ou "disallow" dans le fichier robots.txt

Example 1 : autoriser l’exploration par googlebot

user-agent: googlebot 

allow: /ma-page

Example 2 : interdire l’exploration par googlebot d’une page spécifique

user-agent: googlebot

disallow: /ma-page

 

H

HTTPS

Pourquoi l'HTTPS est-il important?

Tous les sites doivent être protégés par le protocole HTTPS, même ceux qui ne traitent pas de données sensibles. Le protocole HTTPS permet de sécuriser les informations échangées lors de l'accès à une page web et d'éviter qu'un intrus vienne falsifier ou écouter passivement les informations entre votre site et vos utilisateurs.

De plus, c'est aujourd'hui un indicateur de confiance pour vos utilisateurs.

Comment activer HTTPS?

Il y a deux étapes essentielles: 

  1. Votre page doit être délivrée en HTTPS.
  2. Toutes les ressources (images, styles, scripts, etc) de votre page doivent également être chargées en HTTPS.

La méthode la plus simple pour activer HTTPS sur votre site est de passer par un CDN (content delivery network, tel que Cloudflare.com), qui sont pour la plus part sécurisés par défaut.

Egalement, vous pouvez vous même mettre en place un certificat HTTPS en suivant la documentation officiale de Google. 

I

Images hors écran

Qu'est-ce qu'une image hors écran ?

Une image hors écran est tout simplement une image non visible par l'utilisateur lors du chargement de la page. Celle-ci se situe en dessous de la ligne de flottaison ou n'est pas visible sans intéraction de la part de l'utilisateur.

Pourquoi est-il utile de différer leur chargement ?

Il est utile de différer leur chargement après le chargement de toutes les ressources essentielles de la page afin de réduire le délai avant intéractivité et ainsi améliorer l'expérience utilisateur.

Comment faire ?

Il n'existe pas d'attribut HTML spécifique pour informer le navigateur que ces images sont à charger ultérieurement. Pour différer leur chargement il est donc nécessaire de faire appel à du code JavaScript qui s'occupera de charger l'image au moment adéquate.

Un exemple d'utilisation avec lazysizes, qui est un script permettant d'effectuer du lazy loading (chargement dynamique) et qui est optimisé pour le SEO :

  • télécharger et inclure le script lazysizes
    ...
    <script src="lazysizes.min.js" async></script>
</body>
  • ajouter la classe "lazyload" et changer l'attribut "src" pour "data-src" (utile au script) sur les images dont le chargement doit être différé
<img src="images/hors-ecran.jpg" alt="Mon Image hors écran">
<img class="lazyload" data-src="images/hors-ecran.jpg" alt="Mon Image hors écran">
  • et voilà, l'image sera chargée après les ressources essentielles de la page

Impact du code tiers

Qu'est-ce que le code tiers ?

Le code tiers est l'ensemble des scripts  provenant d'autres sites et plus précisément de CDN (Réseau de diffusion de contenu) pouvant être directement intégrés à la page. Ces scripts sont dans la plupart des cas indispensables au bon fonctionnement de celle-ci. Ils servent, par exemple, à analyser le traffic, fournir des boutons de partage pour les réseaux sociaux, mettre en place de la publicité etc.

Pourquoi est-il important de minimiser son impact ?

Les scripts tiers apportent un ensemble de fonctionnalités utiles aux sites WEB mais leur utilisation peut également dégrader les performances de la page si ceux-ci sont nombreux et non optimisés. Les aspects pouvant être impactés sont :

  • le délai de chargement du fait de leur poids et des ressources sous-jacentes qu'ils téléchargent
  • le délai du rendu du fait d'un blocage éventuel provoqué par l'attente de ressources critiques ou d'une sollicitation du navigateur trop importante
  • le délai d'intéractivité du fait de l'analyse, le compilation et l'exécution du code JavaScript nécessaire

Comment le minimiser ?

Au delà d'un délai de blocage de 250ms provoqué par du code tiers, il est nécessaire d'intervenir et de réduire son impact sur les performances de la page :

  • différer le chargement des scripts grâce aux attributs "defer" ou "async" pour éviter le blocage du rendu
<script src="https://cdn.exemple.com/script.js" defer></script>
  • charger les scripts dynamiquement via du code JavaScript lorsqu'ils sont utiles lors d'intéraction uilisateur
function charger(event) {
    event.target.removeEventListener(event.type, arguments.callee);

    var script = document.createElement('script');
    script.src = 'https://cdn.exemple.com/script.js';
    document.head.appendChild(script);
}
document.getElementById("bouton").addEventListener("click", charger);
  • héberger le script sur votre serveur si le serveur du fournisseur est lent
<script src="https://cdn.exemple.com/script.js"></script>
<script src="/js/script.js"></script>
  • retirer les scripts non essentiels
<script src="https://cdn.exemple.com/inutile.js"></script>
  • préconnecter les origines afin d'initier une connexion précoce aux origines externes
<link rel="preconnect" href="https://cdn.exemple.com">

 

 

 

Indexabilité

C’est quoi l’indexabilité ?

L'indéxabilité fait référence à la possibilité qu'une page soit présente au niveau des SERPs. Une page non indexable signifie qu'elle ne sera pas positionnée dans les résultats des moteurs de recherche et n'apportera donc pas de trafic. Vous pouvez empêcher les moteurs de recherche d' indexer une page en utilisant l’instruction ‘noindex’.

Pourquoi c’est important ?

En utilisant la balise meta “noindex” ou "none" dans le code HTML ou avec une en-tête "X-Robots-tag: noindex" vous pouvez décider quelle page devra être visitée par les moteurs de recherche. 

Comment gérer l'indexabilité de vos pages ?

Si vous voulez empêcher les moteurs de recherche d'indexer une page, vous pouvez ajouter l'instruction "noindex" ou "none"  comme balise meta ou comme en-tête de réponse HTTP. Les deux ont le même effet et vous pouvez choisir en fonction du degré de contrôle que vous avez sur votre serveur et de votre processus de publication spécifique.

Exemple - Balise <meta>
Ajoutez la balise meta suivant dans la section <head> de votre page :

<meta name="robots"content="noindex">

Example - Balise <meta> Google

Ajoutez la balise meta suivant dans la section <head> de votre page pour n'empêcher que les robots d'exploration Google :

<meta name="googlebot" content="noindex">

Exemple -  En-tête de réponse HTTP
Vous pouvez opter pour définir une en-tête X-Robots-Tag avec une valeur noindex ou none dans votre réponse :

HTTP/1.1 200 OK
(…)
X-Robots-Tag: noindex
(…)

Si, au contraire, la page n'est pas indexée lorsque elle était censée l'être, vous devriez :

  • vérifier s'il n'y a pas un "noindex" ou "none" instruction dans les directives aux crawlers

Ps: Il se peut que la demande de non indexation soit volontaire ou qu'il s'agit d'une erreur d'où la présence de cette analyse. 

L

Labels (éléments de formulaire)

C’est quoi l’élément <label> ?

Dans un formulaire HTML chaque champ de saisie destiné à l'utilisateur doit être accompagné d'une étiquette informant l'objet de la saisie.

L’élément HTML <label> est un élément spécifique aux formulaires. Il va permettre de formuler un intitulé à un champ de formulaire, de créer des espaces de saisie de texte, de proposer des zones d’options aux utilisateurs, etc.

Ainsi, un formulaire HTML sera constitué :

  • d’un contenu
  • d’un balisage d’éléments appelé commandes (cases à cocher, bouton radio, les saisies de texte, les commandes d’objets, etc.)
  • d’un label sur ces commandes

Pourquoi c’est important ?

Les labels sont nécessaires :

  • pour l'utilisateur du fait de leur utilisation par les assistants de lecture
  • pour les lecteurs d’écran, qui ont besoin d’étiquettes définies pour associer chaque champ de formulaire à un texte

Comment structurer l’élément <label> ?

L’élément label peut être associé à un contrôle via l’attribut "for". Il s’agit d’un contrôle étiqueté par l’élément label. L'attribut "for" fait référence à l'attribut "id" de l'élément du formulaire. En d'autres termes, il faut fournir un identifiant (l'attribut "id") à un élément <input> pour pouvoir associer l'input à élément <label>. On renseigne ensuite l'attribut "for"avec la valeur de l'identifiant.

Enfin, il est possible d’inclure directement un élément <input> dans un élément <label>.
Par exemple :

<div>
    <label for="user_email">Email</label>
    <input type="email" name="email" id="user_email">
</div>

Ce qui va permettre d’obtenir une meilleure ergonomie lorsqu’on clique sur le libellé pour activer le champ. Cette pratique est utilisée pour adapter le contenu aux petits écrans.

Langue

C’est quoi la langue ?

C'est la langue avec laquelle le contenu d'une page web est écrit. C’est aussi l’élément ajouté sur la balise HTML qui indique la langue d’une page. Par exemple, si le contenu de votre page est en anglais, vous devez ajouter sur la balise HTML  lang ="en". 

Pourquoi est-il important de définir la langue ?

Il est important de définir la langue d'une page puisqu’elle facilite l'interprétation du contenu par les robots (même si Google ne l'utilise pas forcément), il est intéressant de la définir parce qu’elle aide les vérificateurs d’orthographe et de grammaire à appliquer la vérification ou l’ignorer (quand il s’agit d’une langue qui n’est pas dans la langue du vérificateur orthographe).  Définir la langue aide aussi les outils de traduction à reconnaître des pages ou des parties de texte dans une langue spécifique. L’indication de la langue permet aussi aux synthétiseurs de la parole et aux traducteurs de Braille d'obtenir des résultats exploitables.

Comment gérer l'attribut langue ? 

L’attribut lang peut être définie comme un attribut HTML, dans une en-tête HTTP Content-Language et aussi dans une balise HTML. La langue doit être valide et définie grâce à son code ISO-639 (i.e  fr, fr-fr, fr-ca, en-us).
Voici comment gérer l’attribut lang dans ces différents éléments: 

Example 1 : Langue définie comme attribut dans la balise HTML

 <html lang="fr">

Example2 :  Langue définie dans une balise HTML 

<meta http-equiv="content-language" content="fr"> 

Plusieurs langues peuvent être définies au sein d'un même élément, mais il est préférable d'en définir une seule pour faciliter la compréhension des moteurs de recherche. Dans notre analyse, nous prenons en compte la première langue rencontrée.

Example 3 :  Plusieurs langues définies

<meta http-equiv="content-language" content="fr, en"> 

Largeur du contenu

Qu'est-ce que la largeur du contenu ?

La largeur du contenu correspond à la dimension horizontale de la page. Lorsque la largeur du contenu est plus grande que la largeur de la fenêtre du navigateur, et qu'il ne s'adapte pas, le navigateur ajoute une barre de navigation horizontale afin de pouvoir faire défiler le contenu de gauche à droite, c'est ce qu'on appelle le scroll X. A contrario, lorsque le contenu s'adapte à la largeur de la fenêtre du navigateur, on dit que la page est "responsive".

Pourquoi doit-elle s'ajuster ?

La présence d'un scroll X nuit à l'expérience utilisateur : le défilement horizontal n'est pas intuitif pour les utilisateurs, ils n'ont pas le reflexe de faire défiler les pages de gauche à droite. Si les utilisateurs ont une mauvaise expérience, ils risquent de revenir sur la SERP et cliquer sur un autre site plus adapté ce qui dégrade votre classement.

Comment l'adapter ?

Dans la plupart des cas, c'est au niveau des styles CSS qu'il faut intervenir et mettre en place des "media queries". Ces instructions permettent de déinir des propriétés CSS selon les dimensions de la fenêtre du navigateur.

Exemple d'utilisation de "media queries" :

<html>
<head>
    <title>Me page responsive</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        /* Largeur par défaut des blocs */
        .bloc {
            display: inline-block;
            width: 100%;
        }
        
        /* Surchage de la largeur des blocs lorsque la fenêtre du navigateur fait au moins 600px */
        @media screen and (min-width: 600px) {
            .bloc {
                width: 30%;
            }
        }
    </style>
</head>
<body>
    <h1>Mon contenu s'adapte</h1>
    <div class="bloc">Bloc A</div>
    <div class="bloc">Bloc B</div>
    <div class="bloc">Bloc C</div>
</body>
</html>

Lorsque la fenêtre du navigateur fait 600px ou plus, les blocs sont alignés sinon ils sont empilés. Pour obtenir plus d'informations sur les "media queries" et le responsive, constultez l'article de google (en anglais).

Une autre méthode existe pour ne pas faire apparaître la barre de navigation horizontale lorsque le contenu est plus grand, elle consiste à cacher ce qui dépasse grâce à une instruction CSS "overflow: hidden;". Cette méthode est à éviter puisqu'elle cache le contenu éventuel à l'utilisateur et celui-ci ne peut pas l'afficher du tout.

Le fichier Robots.txt

Qu'est-ce que le fichier Robots.txt ? 

Le fichier Robots.txt dit aux moteurs de recherche quelles pages ils peuvent explorer ou non. Ce fichier est placé à la racine du site à l'adresse https://exemple.com/robots.txt.

Ce fichier peut, s'il est mal utilisé, causer l'indexation de certaines de vos pages dans les résultats des moteurs de recherche que vous ne souhaitez pas.

Comment vérifier la validité du fichier Robots.txt ?

  • Le fichier Robots.txt ne doit pas retourner une erreur HTTP 500 (5xx).
  • Ne pas dépasser un poids de 500kb. Certains moteurs de recherche risque de ne pas lire la totalité du fichier s'il dépasse cette longueur. 
  • Vérifier les erreurs de syntaxe
  • Fournir une adresse absolue du Sitemap (https://exemple.com/sitemap.xml au lieu de /sitemap.xml)

 

 

Le fichier robots.txt n’est pas valide

Le fichier robots.txt, c'est quoi ?

Le fichier robots.txt est un fichier texte situé à la base de votre site qui a pour but de fournir des instructions aux robots d'exploration des moteurs de recherche. 

Il permet entre autres, grâce à des directives, de :

  • définir les règles d'autorisation d'accès aux différentes pages de votre site, c'est-à-dire les pages qu'ils peuvent explorer ou non
  • définir un ou plusieurs liens vers les fichiers sitemaps : fichiers qui listent l'ensemble des pages de votre site

Un exemple de fichier robots.txt accessible via l'url : https://www.tikamoon.com/robots.txt

User-Agent: *
Allow: /
Disallow: /V2/
Disallow: /recherche
Disallow: /articlepopup.php*
Disallow: /recommander.php*
Disallow: *filtreprix=*
Disallow: *action=*
Disallow: *artid=*
sitemap : https://www.tikamoon.com/sitemap.xml

Pourquoi est-il important de renseigner ce fichier ?

Il est important de renseigner ce fichier pour clairement définir les règles d'accès et y renseigner à minima un fichier sitemap. Lorsqu'une partie de votre site ne doit pas être explorée pour des raisons de sécurité ou d'inutilité, il est intéressant d'interdire l'exploration de ces pages. L'interdiction d'exploration ne signifie pas que les pages ne pourront pas être indexées (contrairement aux instructions "no index") mais il y a très peu de chances qu'elles y soient. L'intérêt principal est alors que les robots ne perdent pas de temps (crawl budget) à analyser le contenu des pages dont vous avez la certitude ou la volonté qu'elles n'apparaissent pas dans les SERPs.

Par exemple, vous avez une partie de votre site communautaire qui contient des fiches de profil utilisateur pauvres en termes de contenu et de valeur ajoutée, il est donc préférable d'interdire l'accès à ces pages afin que les robots explorent principalement vos pages avec une plus-value. 

En l'absence de ce fichier et de manière générale d'une erreur HTTP 4xx lors de la récupération, les robots considèrent qu'ils sont autorisés à explorer l'intégralité de votre site ce qui peut poser problème dans la mesure où ils vont éventuellement explorer des pages que vous ne vouliez qu'elles le soient. Si une erreur se produit durant la récupération de ce fichier avec une erreur HTTP 5xx ou l'absence de réponse (avec un timeout par exemple), alors ils considèrent qu'ils n'ont pas le droit d'explorer l'intégralité de votre site et vous avez très peu de chance que vos pages apparaissent sur les SERPs.

De même, si des erreurs de syntaxes sont présentes au niveau des directives, ils se peut que les robots interprètent mal vos intentions et donc explorent des pages qui ne devraient pas l'être et inversement.

Comment le corriger ?

Afin de s'assurer que le fichier robots.txt est valide, il est nécessaire de :

  • vérifier que la page https://monsite.com/robots.txt renvoie bien un fichier texte avec un code HTTP 200 en moins de quelques secondes
  • s'il n'existe pas ou renvoie un code HTTP 404, il est utile de le créer
  • s'il renvoie un code HTTP différent de 200 ou un fichier non textuel, il est nécessaire d'intervenir au niveau du serveur ou de l'application afin d'y rétablir l'accès

Vérifier la syntaxe du fichier en suivant ces quelques consignes :

  • seules les lignes vides, les commentaires et les directives correspondant au format "name:value" sont autorisés dans le fichier robots.txt
  • assurez-vous que les valeurs allow et disallow sont vides ou commencent par / ou *
  • n'utilisez pas $ au milieu d'une valeur (par exemple, allow: / file$html)
  • assurez-vous qu'il y a une valeur pour le user-agent
  • assurez-vous qu'il n'y a pas de directives allow ou disallow avant le user-agent

Liens descriptifs

C’est quoi un lien descriptif ?

Un lien descriptif est un lien dont l'ancre fournit une information claire sur la destination de celui-ci.  Par exemple, dans la phrase “Rédiger un bon article de blog avec Cocolyze”, l’ancre du lien est “Rédiger un bon article de blog avec Cocolyze”.

Pourquoi est-il important ?

Les liens descriptifs sont importants car ils déterminent le sujet de la page de destination. Cette "indication" du contenu de la page de destination est pris en compte par Google et est aussi une façon d'attirer l'intérêt des utilisateurs. 

Comment gérer les liens descriptifs ?

Pour pouvoir optimiser vos liens descriptifs pensez à :

  • rester dans le sujet et à ne pas utiliser un lien descriptif qui n'a aucun rapport avec le contenu de la page de destination
  • ajouter les mots clés pour assurer la bonne compréhension par les moteurs de recherche et aussi pour inciter le clic des utilisateurs
  • éviter les liens neutres de type « en savoir plus » ou « cliquer ici » puisqu’ils ne donnent pas vraiment d'informations sur la page de destination
  • ne pas utiliser l'URL de la page à la place du lien descriptif, sauf si vous avez une bonne raison pour le faire, par exemple pour référencer la nouvelle adresse du site

 

Liens explorables

C'est quoi un lien explorable ?

Un lien explorable est un lien qui peut être suivi par Google. Les liens non explorables sont donc des liens avec une mauvaise URL, ces liens peuvent être exploités par le code JavaScript de la page mais pas par les robots d'exploration. Pour que Google puisse suivre vos liens, ils doivent utiliser une balise <a> avec l'attribut href suivi d'URLs relative ou pouvant être résolues (une vraie adresse Web à laquelle Googlebot peut envoyer des requêtes).

Exemple 1 : lien explorable

<a href="https://example.com">

Example 2 : URLs pouvant être résolues

/products.php?id=123
https://example.com/stuff

Pourquoi c'est important ?

C'est important, car seul ce format permet de mettre votre contenu à disposition des robots de Google. Le fait que les liens ne soient pas explorables peut poser problème puisque les robots n'auront pas connaissance de la page éventuelle vers laquelle il devrait pointer (le lien) et ne l'indexeront pas (la page de destination)

Comment résoudre un problème avec un lien non explorable ?

Pour pouvoir résoudre un problème avec un lien non explorable, vous devez :

  • utiliser l'attribut href
  • Assurer que l'URL qui lui est associée correspond à une adresse Web  valide à laquelle Googlebot peut envoyer des requêtes

 

Liens externes protégés

Qu'est-ce que les liens externes ?

Les liens sont des éléments HTML matérialisés par la balise <a>. Ils sont placés dans une page et permettent aux utilisateurs, en cliquant dessus, d'accéder à une autre page. On parle de liens externes lorsque ceux-ci mènent l'utilisateur sur un autre site. Il est possible de définir le comportement d'un lien sur le navigateur grâce à l'attribut "target". Lorsqu'il n'est pas renseigné, la page s'ouvre sur l'onglet courant et remplace la page actuelle. Lorsqu'il est défini avec la valeur "_blank", il ouvre un nouvel onglet sur le navigateur et laisse la page actuelle accessible.

Exemple d'un lien externe s'ouvrant sur un nouvel onglet :

<a href="https://cocolyze.com/fr" target="_blank">Cocolyze</a>

Pourquoi doivent-ils être protégés ?

Les liens externes s'ouvrant sur un nouvel onglet exposent du code sensible de la page actuelle à la page de destination. Si la destination est malveillante, elle pourra effectuer une redirection malicieuse de la page actuelle vers une autre destination. De même, il se peut que la page de destination s'exécute sur le même processus que la page actuelle et si beaucoup de code JavaScript est exécuté, la page actuelle pourra être ralentie.

Comment les protéger ?

Afin de sécuriser les liens externes, il est nécessaire d'ajouter l'attribut "rel", sur tous les liens <a>, en y spécifiant la valeur "noopener" ou "noreferrer" lorsqu'ils s'ouvrent sur un nouvel onglet.

Exemple de lien externe protégé :

<a href="https://cocolyze.com/fr" target="_blank" rel="noopener">Cocolyze</a>

Link Juice

Le link juice, c’est quoi ?

Link juice ou jus de référencement c’est le terme utilisé pour évoquer les effets bénéfiques sur le référencement naturel qu'un site peut transmettre à un autre site ou plutôt une page à une autre page par le biais d'un lien sortant. Lorsqu'une page mentionne une autre page dans son contenu, elle finit par transférer un peu de son autorité (son jus). Imaginez que dans un article sur l'inbound marketing, par exemple, nous avons mentionné que le marketing numérique est important pour cette stratégie. En insérant un lien dans la section «Marketing numérique» vers la page que nous considérons la plus complète sur ce sujet, nous disons à Google que cette page est la référence, et nous donnons donc notre «vote de confiance» ou comme on a déjà dit, on lui passe un peu de notre autorité/jus.

Pourquoi c’est important ?

L'un des points les plus importants du Link Juice est la répartition de la distribution de la notoriété d'un site. Ce qu'il faut comprendre c'est que chaque lien utilisé transfère une partie de cette notoriété. Il est extrêmement important que votre page contienne plus de liens vers votre site plutôt qu'un autre. Pourquoi? Parce qu’un site qui possède que des liens sortant n’as pas d’intérêt aux yeux de Google. Cependant, il ne faut pas non plus avoir que des liens internes, puisque vous ne pouvez pas être la référence dans tous les domaines cités dans votre site/page.Vous pouvez spécifier à Google le type de lien que vous effectuez grâce à l'attribut rel sur vos balises <a> lorsqu'ils sont moins pertinents :

  • rel="sponsored" : pour les annonces payantes
  • rel="ugc" : pour le contenu généré par vos utilisateurs
  • rel="nofollow" : pour indiquer à Google qu'il ne faut pas suivre ce lien

Vous pouvez également spécifier de ne pas suivre tous les liens de la page grâce à une instruction générale destinée aux robots : <meta name="robots" content="nofollow">, ce qui aura pour effet d'appliquer cette instruction sur tous les liens de la page.Attention, le fait de spécifier le type de lien n'entraine pas de transmission de "jus", c'est à dire qu'à travers ces liens spécifiques, aucune notoriété n'est transférée, cependant, le jus non transmis est perdu.

Comment gérer le Link juice ?

Assurez-vous que plus de 50% des liens de la page pointent vers votre site afin de limiter la quantité de jus perdue :

  •  retirer des liens externes et/ou ajouter davantage de liens internes suivis
  •  retirer les attributs spécifiant le type (nofollow etc) sur les liens internes

Lisibilité du contenu

C’est quoi la lisibilité du contenu ?

La lisibilité du contenu concerne la facilité de la lecture et de la compréhension de celui-ci par les utilisateurs. Des aspects de structuration, tels que des paragraphes, des sections, titres et sous-titres, nombre de mots, longueur des phrases, du langage utilisé, mais aussi des aspects plus esthétiques tels que la police du texte, sa taille et sa couleur, par exemple, influencent directement la lisibilité d’un contenu. 

Pourquoi est-elle importante ?

La lisibilité du contenu est importante puisqu’elle a une forte influence sur l'intérêt et l’engagement du lecteur vis à vis d’un contenu. Un contenu difficile à comprendre qu’il soit à cause de sa structuration, du langage utilisé ou même à cause de son design aura du mal à attirer des visites et encore moins de les faire revenir. 

Comment améliorer la lisibilité de votre contenu ?

En ce qu’il concerne la lisibilité d’un point de vue de la structuration et du langage pensez à :

  • écrire de courtes phrases (environ 16 mots par phrase) pour favoriser la compréhension et mémorisation du contenu
  • opter pour un vocabulaire plus simple et adapté à votre cible

 


 

M

Meta description optimisée

C’est quoi une meta description ?

La meta description est la description du contenu de votre site web ou de votre page web. Il s'agit d'informer l'internaute sur ce qu'il va trouver en cliquant sur votre site.
Elle se situe en dessous du titre lien qui permet d'accéder à votre site dans les pages de moteurs de recherche.

Pourquoi est-ce important d'optimiser ma meta description ?

La balise meta "description" joue un rôle essentiel dans le référencement d’un site web, car elle apparaît  dans les SERPs des moteurs de recherche.
Même si elle n’est plus crawlée par les robots des moteurs de recherche, elle est la principale vitrine de votre site web (avec le titre). Avoir une belle vitrine attire forcément plus de trafic et augmente votre CTR, ce qui améliore votre référencement. 

Son but est donc d’attiser l’intérêt des internautes pour qu’ils visitent votre site. 

Comment optimiser une meta description ?

Lorsque vous rédigez votre titre dans votre balise meta "description", il est important de respecter plusieurs critères afin de l'optimiser au mieux :

  • Votre description doit décrire le contenu de votre site de façon attractive pour l’internaute, c’est-dire qu’elle doit les inciter à cliquer sur votre site web

  • Selon les cas, la longueur de votre description doit être entre 90 et 320 caractères. Dans la plupart des cas, Google fait apparaître 600 pixels dans la SERP (environ 160 signes)

  • Votre description doit être claire et concise

  • Ne pas rédiger une liste de mots clés 

  • Utilisez des verbes d’action : “Améliorez”, “Augmentez”, "Développer", “Découvrez”, etc

  • Votre description doit vous permettre de vous différencier des autres

  • Evitez d’y inclure des éléments temporels : “Demain”, “Aujourd’hui”, etc

Meta viewport optimale

C’est quoi la meta viewport ?

La meta viewport c’est un élément ajouté au code HTML qui donne une instruction au navigateur pour contrôler les dimensions d’affichage d’une page web. Cet élément permet que la mise en page du contenu soit responsive, c'est-à-dire qu'elle s’adapte aux écrans des différents dispositifs des utilisateurs, principalement les dispositifs mobiles, tels que les portables et les tablettes par exemple.

Pourquoi est- il important d’avoir une meta viewport ? 

Il est important d’avoir une meta viewport puisqu’aujourd’hui, la majorité des recherches de utilisateurs sont faites à partir d’un dispositif mobile. Quand une page web ne s’adapte pas à ces dispositifs, elle rend l’expérience utilisateur difficile ce qui pénalise son référencement.

Comment mettre en place la meta viewport optimale ?

La meta viewport doit être déclaré dans le code HTML au niveau du <head> : 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Afin que le contenu de la page s'adapte sur un écran mobile, il est nécessaire de définir la meta viewport avec les 2 instructions suivantes, sinon le navigateur n'effectuera pas la mise en page correctement :

  • l'instruction "width" qui contrôle la taille de la fenêtre peut être définie en pixel width=600 ou la valeur "device-width" qui correspond à la largeur de la fenêtre en pixel
  • l'instruction "initial-scale" permet de définir le niveau de zoom initial lors du chargement de la page

Microdonnées

Que sont les données structurées ?

Il s’agit de morceaux de code qu’on ajoute sur le code HTML d’un site afin d’améliorer la visibilité et la compréhension du contenu d'une page par les moteurs de recherche. 
Ces données enrichissent les informations qui sont transmises aux moteurs de recherche. Il pourront ainsi comprendre qu'il des informations sur votre page telles qu'une adresse, un numéro de téléphone, des avis, etc... et les afficher dans les résultats de recherche.

Pourquoi c’est important ?

L'objectif des microdonnées est de rendre votre site plus compréhensible pour les moteurs de recherche. Ce qui va leur permettre de proposer des contenus plus adaptés et répondant davantage aux requêtes des internautes.
En conséquence, les microdonnées ont une influence sur votre positionnement, car elles aides les crawlers à indexer votre contenu et à l’associer à des requêtes d’utilisateurs.

Les microdonnées permettent également d'enrichir la sémantique de la page en spécifiant des données relatives au contenu, au contexte, etc. Par exemple, pour un article de blog, on peut retrouver des données supplémentaires comme l’auteur, la date, etc.
En précisant ces données, Google pourra vous donner accès au “rich snipped” qui va rendre votre contenu encore plus attrayant pour l’internaute dans la SERP et faire augmenter votre taux de clic.

Comment mettre en place les micros données ?

Pour rédiger ces balises, il existe 3 syntaxes possibles : JSON-LD, RDFa et Microdata.

Exemple de syntaxe en JSON-LD :

<html>
  <head>
    <title>Gâteau de fête au café</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Gâteau de fête au café",
      "author": {
        "@type": "Person",
        "name": "Mary Stone"
      },
      "datePublished": "2018-03-10",
      "description": "Ce gâteau au café est génial et parfait pour les fêtes.",
      "prepTime": "PT20M"
    }
    </script>
  </head>
  <body>
      <h2>Recette de gâteau au café</h2>
      <p>Ce gâteau au café est génial et parfait pour les fêtes.</p>
  </body>
</html>

 

Il est recommandé d’utiliser des balises répertoriées sur schema.org, dans lequel on retrouve le protocole qui structure les pages web comme nous les connaissons aujourd’hui dans le monde entier. Vous y trouverez également toutes les indications pour mettre en place vos micros données.

Minification CSS

Qu’est-ce que la minification CSS ?

La minification consiste à retirer les caractères inutiles d'un fichier  en vue de réduire sa taille, il compacte donc les instructions. Les caractères inutiles à l'interprétation d'un style CSS sont principalement les commentaires, les espaces et la tabulations

Il est important de ne pas confondre la minification avec la compression, car la compression va se servir d’algorithmes pour réduire la taille du fichier. Le navigateur du destinataire du fichier devra donc effectuer une opération de décompression pour interpréter le fichier, ce que permet d’éviter la minimisation.

Pourquoi minifier un fichier CSS est important ?

Retirer les caractères inutiles permet d’améliorer le délai de chargement du fait que le fichier CSS pèse moins lourd. 

Comment effectuer une minification CSS ?

Pour effectuer ce traitement, il est intéressant d'utiliser un utilitaire (et ne pas le faire manuellement) comme cssminifier.com qui permet de minimiser un style CSS en ligne.

Exemple d'un style avant minification :

body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}

Après minification :

body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}

Il est également possible d'inclure les styles externes dans leur version minimisée. De nombreux fournisseurs (CDN) le propose pour la version de production.

Des optimisations manuelles peuvent également être effectuées dans les déclarations comme, par exemple, réduire la déclaration des couleurs en hexadéciaml #000000, qui peut être raccourcie par #000. Cela est également possible si deux éléments ont le même style, on peut alors les combiner au sein d'un même bloc :

  h1 {
    font-weight: bolder;
    font-size: 20px;
    background-color: #cccccc;
  }

  .title {
    font-weight: bolder;
    font-size: 20px;
    background-color: #cccccc;
  }

Optimisation :

  h1, title {
    font-weight: bolder;
    font-size: 20px;
    background-color: #ccc;
  }

Minification JavaScript

C’est quoi une minification JavaScript ?

La minification consiste à retirer les caractères inutiles d'un fichier  en vue de réduire sa taille, il compacte donc les instructions. Ces caractères inutiles sont, par exemple, les commentaires, les espaces et la tabulation

En JavaScript le nom des variables n'ont pas d'importance quant à l'interprétation du script par le navigateur, ils peuvent donc être réduit (var variable = ... devient var a = ... ). De même, le code inutile peut être retiré (variable déclarée dans une fonction et non utilisée).

Pourquoi c’est important ? 

Retirer les caractères inutiles et de manière générale, compacter le code permet d’améliorer le délai de chargement du fait que le fichier JavaScript pèse moins lourd. 

Comment effectuer une minification JavaScript ?

Pour effectuer ce traitement, il est intéressant d'utiliser un utilitaire (et ne pas le faire manuellement) comme javascript-minifier.com, qui permet de minifier un script javaScript en ligne.

Exemple d'un script avant minification :

function maPremierFonction(parametre) {
    var maVariable = "minification 1";
}

function maSecondeFonction(parametre) { 
    console.log(parametre);
}

Après minification :

function maPremierFonction(n){}function maSecondeFonction(n){console.log(n)}

Il est également possible d'inclure les scripts externes dans leur version minimisée. De nombreux fournisseurs (CDN) le propose pour la version de production.

Modules dupliqués

Qu'est-ce qu'un module JavaScript ?

Un module est une ressource JavaScript intégrée à la page contenant du code segmenté et réutilisable. Il permet d'apporter des fonctionnalités supplémentaires très simplement au navigateur. Par exemple, la bibliothèque JQuery facilite le parcours et la manipulation du DOM (Document Object Model : interface de programmation utile pour la modification de la page par le code JavaScript) grâce un ensemble de fonctionnalités simplifiées.

Pourquoi est-il important qu'ils ne soient pas dupliqués ?

Charger un même module plusieurs fois n'est pas utile du fait que le code est déjà présent dans la page et peut être exploité par le navigateur. Un module déclaré plusieurs fois alourdit donc inutilement le poids de la page, ainsi que l'interprétation nécessaire par le navigateur et retarde son chargement.

Comment corriger un module dupliqué ?

La détection des modules dupliqués se base sur leur fichier "source Maps" (fichier supplémentaire qui permet de déboguer le code). Généralement ces fichiers sont renseignés par les CDN (Réseau de diffusion de contenu) au sein du script même grâce à l'instruction "//# sourceMappingURL=...".

Lorsqu'un même module est chargé plusieurs fois, il est nécessaire de ne garder qu'une seule instruction d'intégration au niveau du code HTML et/ou JavaScript.

Par exemple, le framework Bootstrap est ici chargé deux fois malgré  des noms différents :

<script src="/js/bootstrap.bundle.js"></script>
<script src="/js/bootstrap.js"></script>

La correction à apporter est simplement la suppression de l'une des deux déclarations :

<script src="/js/bootstrap.js"></script>

Modules vulnérables

Qu'est-ce qu'un module vulnérable ?

Un module vulnérable est une bibliothèque JavaScript tierce dont des failles de sécurité ont été découvertes et rendues publiques. Lorsqu'une faille est découverte, un score de criticité de 0 à 10 est déterminé selon plusieurs critères (vecteur d'attaque, complexité, privilèges nécessaires etc.) et donne place à une classification parmi trois niveaux :

  • high, entre 7 et 10 : risques importants
  • medium, entre 4 et 6,9 : risques modérés
  • low, entre 0 et 3,9 : faibles risques

Pourquoi sont-ils dangereux ?

Les modules vulnérables peuvent être exploités par des pirates, qui selon les failles, peut avoir un impact plus ou moins grave sur l'intégrité et la confiance d'un site WEB. Afin de ne pas subir de piratage et ne pas compromettre les données des utilisateurs, il est nécessaire de combler ces failles.

Quelques exemples d'attaques :

  • XSS (Cross-Site Scripting) : permet d'injecter du code exécuté par le navigateur dans une page, ce code renvoie par exemple le cookie des utilisateurs au pirate afin qu'il puisse se connecter sur la session d'un utilisateur
  • CSRF (Cross-Site Request Forgery) : permet de faire des actions à l'utilisateur sans qu'il en ait conscience comme la suppression de son compte
  • Injection SQL : permet d'accéder aux données de la base de données sans les autorisations nécessaires
  • DoS (Denial of Service ) : rend hors service le navigateur à cause d'une consommation CPU/mémoire importante,  par exemple

Comment les corriger ?

Lorsqu'un module JavaScript possède des failles de sécurité reconnues, il est nécessaire de :

  • le mettre à jour avec une version plus récente
  • utiliser un module alternatif
  • le retirer du site WEB
N

Nombre de mots clés

C'est quoi un mot clé ?

Pour rappel, les mots clés sont des termes composés d'un ou plusieurs mots qui correspondent au sujet présent dans une page. Ces mots permettent à Google d'associer ces articles ou pages aux requêtes des internautes afin de leur présenter des résultats pertinents.

Par exemple, si dans votre contenu il y a les mots “chaussure” et "chaussure verte", l'analyse indiquera qu’il y a 3 mots clés : "chaussure", "chaussure", "verte".

Pourquoi avoir un contenu conséquent est-il important ?

Si peu de mots clés apparaissent dans votre contenu, Google et les autres moteurs de recherche considèreront que votre page n’a pas de valeur ajoutée, ce qui va nuire à son référencement.

Le nombre de mots clés présent sur une page impacte donc le référencement. Il s'agit de trouver le juste équilibre entre un contenu comprenant une grande richesse de mots clés et l'expérience utilisateur. Votre page doit être attractive et pertinente pour répondre aux besoins des utilisateurs.

Cependant, soyez vigilant : en cas de bourrage de mots clés, Google pourrait considérer cela comme une tentative de "stuffing", ce qui pénalisera le classement de votre page dans les SERPS.

Comment trouver le bon équilibre dans l'utilisation des mots clés ?

Pour pouvoir être positionné et avoir une page optimisée au niveaux de mots clés nous recommandons : 

  • Avoir  minimum  400 à 500 mots clés par page

  • Mettre en valeur les termes recherchés de préférence via le balisage HTML (i.e dans les titres, en gras ou encore dans les alternatives textuelles des images)
  • Ne pas sur-optimiser un mot clé, c’est à dire le répéter de manière non naturelle, et le baliser avec exagération (également appelé technique de keyword stuffing ou bourrage de mots clés en français)
  • Utiliser des synonymes. De plus en plus, les moteurs de recherche tendent à évoluer vers la compréhension de la langue et établissent des relations entre différents mots dans différents contextes. Cela permet aussi de mieux se positionner sur des recherches de longue traîne (les recherches avec plus de mots clés, plus précises)
  • Dans certains cas, ajouter des fautes d’orthographe. Bien qu’étonnant, certains mots clés sont souvent recherchés avec des fautes par les internautes. Il est parfois stratégique d’ajouter volontairement ces fautes dans votre contenu afin d’être mieux positionné sur ces recherches, lorsque Google ne propose pas la correction automatique
  • N'oubliez jamais d'écrire votre contenu pour l'internaute avant-tout. Envisager votre création de contenu uniquement en pensant au référencement nuira à l'expérience utilisateur et donc à votre position dans les moteurs de recherche.
O

Optimisation de mots clés

C’est quoi l’optimisation de mots clés ?

Pour rappel, les mots clés sont des termes composés d'un ou plusieurs mots qui correspondent au sujet présent dans une page. Ces mots permettent à Google d'associer ces articles ou pages aux requêtes des internautes afin de leur présenter des résultats pertinents.

L'optimisation de mots clés est l'amélioration du choix et de l'utilisation des mots clés pertinents au contenu, produit ou service proposé dans une web page.

Pourquoi optimiser les mots clés ?

Il est important d’optimiser les mots clés parce que c’est à travers eux que les moteurs de recherche vont retrouver votre contenu lorsque les utilisateurs recherchent des termes spécifiques. Si vos mots clés sont optimisés, votre page sera donc plus facilement associée à la requête des utilisateurs. Cela aidera donc à améliorer votre taux de clics et l'indice de qualité de votre page.

Comment optimiser vos mots clés ?

Pour pouvoir optimiser vos mots clés, il  faut que votre contenu :

  • cible  au moins 1 mot clé sur lequel la page est destinée à être positionnée
  • avoir un mot clé mis en avant  dans des éléments sémantiquement forts tels que le titre de page ; la meta description ; le titre <h1> et <hn> mis en exergue par le balise <strong> ; l'url et l'image
  • ait un mot clé mis en avant lorsqu'il est répété dans le contenu (attention au stuffing) et apparaît tôt dans le contenu 

 

Optimisation des animations

Qu'est-ce qu'une animation optimisée ?

Une animation est une succession d'images apparaissant dans un même cadre. On parle d'animation optimisée lorsque le format utilisé est optimal et permet d'effectuer le même rendu qu'un autre format pour un poids moindre. Le format le plus répandu pour les animations est le GIF (Graphics Interchange Format), cependant ce format est inéfficace pour les animations volumineuses.

Pourquoi est-il important qu'elle soit optimisée ?

Le format GIF pour des animations volumineuses pèse plus lourd qu'une alternative vidéo et augmente la charge réseau nécessaire à son téléchargement. Utiliser des animations optimisées améliore le délai de chargement de la page et permet aux utilisateurs de visualiser le contenu plus rapidement.

Comment l'optimiser ?

Afin de diminuer le poids des animations, il est nécessaire de changer le format GIF pour un format vidéo MPEG ou WebM.

Il est possible de récréer les caractéristiques d'une animation GIF grâce à la balise HTML <video> :

  • se lance automatiquement : grâce à l'attribut "autoplay"
  • boucle en continu : grâce à l'attribut "loop"
  • est silencieuse : grâce à l'attribut "muted"
<video autoplay loop muted playsinline>  
  <source src="animation.webm" type="video/webm">  
  <source src="animation.mp4" type="video/mp4">  
</video>  

L'attribut "playsinline" autorise la vidéo à être jouée en ligne et ne lance pas automatiquement le plein écran sur les mobiles lorsque la lecture commence.

P

Permission de géolocalisation

Qu'est-ce qu'une permission de géolocalisation ?

Un permission de géolocalisation est une demande faite à l'utilisateur via le navigateur pour obtenir ses coordonnées géographiques.  Tant que l'utilisateur n'a pas autorisé cette demande, la page WEB ne peut pas obtenir ces informations. Si et lorsqu'elle les obtient, elle est en mesure d'apporter un contenu plus adéquate à l'utilisateur. Cette demande est initiée grâce à du code javaScript : geolocation.getCurrentPosition() ou geolocation.watchPosition().

Pourquoi est-il important de la demander de manière responsable ?

Face à une demande de permission de géolocalisation sans contexte, c'est-à-dire au chargement de la page, les utilisateurs sont confus et méfiants, ce qui altère la confiance relative au site WEB.

Comment la mettre en place efficacement ?

Pour offrir une expérience pérenne, il est nécessaire de retirer cette demande, si elle existe, au chargement de la page et de la demander lors d'une intéraction utilisateur, en indiquant que l'action effectuera une demande de géolocalisation. Enfin, il est utile de prévoir une solution de secours si l'utilisateur la refuse.

 

Permission de notifications

Qu'est-ce qu'une permission de notifications ?

Une permission de notifications est une demande faite par un site WEB à l'utilisateur pour obtenir le droit d'émettre des notifications. Lorsque cette demande est acceptée, l'utilisateur pourra recevoir des notifications qui s'afficheront hors de la page au niveau de son système. Cette demande, qui s'affiche sur le navigateur de l'utilisateur, est initiée grâce à du code javaScript : notification.requestPermission()

Pourquoi est-il important de la demander correctement ?

Face à une demande de permission de notifications sans contexte, c'est-à-dire au chargement de la page, les utilisateurs sont confus, méfiants et risquent de refuser celle-ci. Une demande précoce entrave donc l'expérience utilisateur et altère la confiance relative au site WEB.

Comment la mettre en place efficacement ?

Pour offrir une expérience optimale, il est nécessaire d'effectuer cette demande lors d'un moment opportun, comme une intéraction de l'utilisateur et non au chargement de la page. Par ailleurs, il est intéressant de proposer plusieurs types de notifications à l'utilisateur et d'effectuer la demande qu'après son choix.

 

Poids des images

Qu'est-ce que le poids des images ?

Le poids d'une image, tout comme n'importe quel fichier, correspond à la taille qu'elle occupe en octets sur un disque dur. Il correspond également à la quantité de données à échanger avec le serveur WEB, afin de récupérer celle-ci par le navigateur en vue de l'afficher sur une page.

Les images peuvent être enregistrées sous différents formats et ont la particularité de pouvoir être optimisées grâce à des algorithmes de compression, avec ou sans perte de qualité.

Les formats les plus répandus sont :

  • JPEG / BMP : pour les photographies et l'impression
  • PNG : pour les images qualitatives nécéssitant de la transparence
  • GIF : pour de petites images animés qui nécessitent de la transparence et/ou un faible ensemble de couleurs

Pourquoi c'est important ?

Le poids des images peut vite devenir problématique, il occupe généralement une place conséquente dans le poids global des ressources à charger sur une page. Les images peuvent donc sérieusement ralentir le chargement complet d'une page et son rendu global par le navigateur. Compresser une image peut réduire drastiquement sont poids, il est donc indispensable de l'optimiser puisque l'utilisateur ne verra aucune différence sur la qualité de celle-ci.

Comment les optimiser ?

Optimiser les images correspond à adapter leur format et leur qualité pour le WEB, il est utile de :

  • choisir le format le plus adapté
  • les convertir dans le nouveau format WebP de Google grâce à un utilitaire comme online-convert qui permet de convertir en ligne des images dans différents formats
  • les compresser grâce à un utilitaire comme imagecompressor qui permet de compresser les images JPEG / PNG

Retrouvez davatages d'informations sur le guide complet de l'optimisation des images de Google (en anglais).

Poids des ressources

Qu'est-ce que le poids des ressources ?

Le poids des ressources correspond aux octets à télécharger par le navigateur pour récupérer tous les éléments nécessaires à la page (styles CSS, scripts JavaScript, images etc).

On distingue le poids réel de la ressource du poids transféré. Le poids réel correspond à la taille brute du fichier (l'espace qu'il occupe en mémoire ou sur un disque dur) quant au poids transféré, il s'agit de l'espace qu'il occupe après compression. Généralement les serveurs WEB compressent les ressources avant de les envoyer afin de diminuer la bande passante nécéssaire à leur téléchargement, puis les navigateurs décompressent celles-ci après réception afin de les restituer.

Pourquoi est-il important ?

Plus le nombre de ressources à charger est important, plus le poids global de celles-ci l'est également et prend du temps au navigateur pour tout récupérer. De même, le navigateur peut limiter les connexions simultanées vers un même site et met en attente les autres connexions, ce qui rallonge davantage le délai nécessaire au chargement de la page. Intégrer beaucoup de ressources à une page impacte donc directement sur la rapidité de chargement de celle-ci, surtout si l'utilisateur ne dispose pas d'une bonne connexion internet, ou s'il se trouve sur un téléphone avec une connexion limitée.

Comment le rendre acceptable ?

Au delà de toutes les méthodes pour diminuer le poids des ressources (compression des images, minification des styles CSS etc.), il est recommandé de :

  • ne pas dépasser un poids global à transférer de 4 Mo
  • restreindre au maximum le nombre de ressources à charger
  • privilégier une page simple et rapide, où l'information que cherche l'utilisateur est clairement accessible, à une page lourde et riche d'éléments visuels l'éloignant de sa quête d'information
  • charger les éléments dynamiques lors du déclenchement par l'utilisateur, par exemple, si le fait de cliquer sur un bouton fait apparaitre une fenêtre modale avec une image, charger l'image lors du clique et non à l'avance

 

 

Politique de mise en cache

Qu'est-ce que la mise en cache ?

La mise en cache est une action du navigateur, à la demande du serveur WEB, qui consiste à enregistrer une ressource statique (image, style CSS, script etc) sur l'ordinateur de l'internaute afin qu'il n'ait plus à la charger lorsque cette même ressource est nécessaire sur une autre page du site, ou durant une autre visite sur la même page. Par exemple, sur toutes les pages d'un site, on y retrouve un logo, sa mise en cache permet d'affanchir l'utilisateur du chargement nécessaire à sa récupération à chaque page visitée durant sa navigation sur le site.

Pourquoi est-elle importante ?

Le fait que les ressources statiques soient mises en cache améliore le délai de chargement sur les visites repétées de l'utilisateur, du fait que le navigateur n'a plus à charger celles-ci. La mise en cache contribue donc à la rapidité du site en accélérant la navigation. Seul le premier chargement de la page sera complet et nécessitera le transfert de toutes les ressources.

Comment la mettre en place ?

L'instruction de mise en cache d'une ressource se situe au niveau de l'en-tête HTTP "Cache-Control" retournée par le serveur WEB. Cette en-tête HTTP permet d'informer le navigateur qu'il est nécessaire d'enregistrer cette ressource, et l'informe du délai en secondes pour lequel il doit la garder grâce à l'instruction "max-age".

Cache-Control: max-age=31536000

Les mises en cache se font généralement au niveau du serveur WEB qui s'occupe de cette gestion. Afin de procurer une expérience maximale à l'utilisateur, il est recommandé d'utiliser un délai minimal de 97 jours.

Préchargement des ressources

Qu'est-ce que le préchargement des ressources ?

Le préchargement d'une ressource est l'anticipation du chargement d'une ressource requise ultérieurement par une autre ressource, nécessaire au rendu de la page.  Par exemple, dans un style CSS, le chargement d'une police web est nécessaire. Lors du chargement de la page, le navigateur chargera cette police après avoir chargé et interprété le style CSS. Le préchargement consiste alors à informer le navigateur que cette police est à charger avant même l'interprétation du style CSS.

Pourquoi c'est important ?

Il est intéressant d'informer le navigateur des futurs chargements requis par d'autres ressources à effectuer, afin qu'il anticipe ceux-ci et améliore le temps de chargement de la page et effectue le rendu de celle-ci plus rapidement.

Comment le mettre en place ?

Pour indiquer au navigateur les ressources à précharger, il est nécessaire d'ajouter les instructions au niveau de la section <head> du code HTML de la page.

Exemple pour le chargement d'une police web requis par un style CSS :

<head>
...
    <link rel="preload" href="https://fonts.googleapis.com/css?family=Quicksand|Lato" 
     as="font" crossorigin="anonymous" />
...
</head>

L'attribut "as" permet de définir le type MIME de la ressource à précharger, ce qui est utile pour le navigateur quant à sa priorisation des ressources à charger. En l'absence de cet attribut, le navigateur peut ne pas prendre en compte l'instruction. Les principaux types sont : script, style, font, image, video, audio, document, object, fetch, track et embed.

L'attribut "crossorigin", quant à lui, permet de gérer le CORS (sécurité liée au chargement d'une ressource depuis un autre site). Cet attribut est facultatif lorsque la ressource se trouve sur le même site. Si la ressource est externe et que l'atrribut n'est pas spécifié, le préchargement ne sera pas pris en compte par le navigateur.

 

Préconnexion aux origines

Que sont les préconnexions aux origines ?

Lorsqu'une ressource d'une page est chargée ultérieurement par un script JavaScript ou par un style CSS, le navigateur ne peut pas anticiper la connexion au site (origine) nécessaire et perd du temps à l'établir lorsqu'il doit la charger. Une préconnexion est une instruction informant le navigateur que cette connexion sera nécessaire plus tard, ce qui lui permet de la préparer.

Pourquoi sont-elles importantes ?

Il est utile de spécifier ces différentes connexions ultérieures  afin que le navigateur les anticipe et améliore le chargement des ressources concernées au moment venu. Les préconnexions améliorent donc le délai de chargement de la page.

Comment les mettre les place ?

Établissez des connexions précoces avec les origines tierces importantes. Pour indiquer au navigateur la préconnexion à effectuer, il est nécessaire d'ajouter le code au niveau de la section <head> du code HTML.

Exemple pour le chargement ultérieur de la ressource "https://exemple.com/script.js" :

<link rel="preconnect" href="https://exemple.com">

Protection des liens sortants avec noopener

Pourquoi est-ce important de protéger les liens sortants?

Lorsque vous créer un lien vers une page d'un autre site web en utilisant l'attribut  target="_blank", c'est à dire d'ouvrir dans un autre onglet, vous exposez votre site à des problèmes de performance et de sécurité. 

En effet, l'autre page va dans ce cas utiliser les mêmes ressources que votre page afin de se charger, et par conséquent pourrait ralentir votre page.

D'un côté sécurité, l'autre page peut accéder à certaines informations de votre page via la propriété javascript window.opener, afin de vous rediriger vers une URL trompeuse.

Comment protéger ses liens sortants?

Il suffit d'ajouter l'attribut rel="noopener" ou rel="noreferrer" à tous vos lients sortants utilisant l'attribut target="_blank".

 

Protocole HTTP/2

C’est quoi le protocole HTTP/2 ?

Rappel : Le protocole HTTP (Hyper Text Transfer Protocol), est un mécanisme utilisé par les navigateurs Internet pour demander des informations au serveur web et afficher des pages sur l'écran de l'appareil utilisé.

Le protocole HTTP/2 c’est la version la plus moderne et performante de ce protocole.

Pourquoi est-il important d’utiliser le protocole HTTP/2 ? 

Il est important d’utiliser le protocole HTTP/2 plutôt que l’ancien parce qu’il est plus performant et permet aux utilisateurs de bénéficier d'une meilleure expérience de navigation. Cela est possible parce que le protocole HTTP/2 diminue le poids des requêtes en compressant les en-têtes et aussi les connexions, appelé la multiplexage des requêtes (envoie plusieurs requêtes sur une même connexion).

Comment mettre en place le protocole HTTP/2 ?

Le protocole est à mettre en place sur le serveur web du site.


 

R

Rafraîchissement inattendu

Qu'est-ce qu'un rafraîchissement inattendu ?

Il s'agit d'une actualisation de la page ou d'une redirection vers une autre page se produisant durant la navigation de l'utilisateur. Ce rafraîchissement est généralement provoqué par une instruction HTML "refresh" après un certain délai.

Pourquoi est-il néfaste ?

Le fait qu'une page se recharge automatiquement, ou pire, que l'utilisateur se retrouve sur une autre page peut lui faire perdre le fil de sa navigation et le frustrer profondément. Dans la majorité des cas, l'utilisateur préférera un site à la navigation intuitive où il est maître des actions effectuées sur la page.

Comment le corriger ?

Si ce type de redirection est constaté, il est nécessaire de retirer l'instruction en cause :

  • Au niveau de la page HTML :
<meta http-equiv="refresh" ...>
  • Au niveau des en-têtes HTTP :
Refresh: ...

De même, il peut être utile d'inspecter le code JavaScript de la page afin de vérifier qu'il n'existe pas de redirection provoquée aléatoirement. Une redirection JavaScript doit être, de préférence, délenchée par une action de l'utilisateur.

Répétition des mots clés

C’est quoi la répétition des mots clés ?

La répétition des mots clés est l’analyse de la répétition du contenu d'une page. Cette analyse prend en compte le nombre total de mots et le nombre de mots distincts pour pouvoir ensuite calculer leur taux de répétition dans le texte. Par exemple, dans la phrase “voici une rédaction seo destinée au seo" l’analyse indiquerait qu’il y a :

  • 6 mots distincts : "voici", "une", "rédaction", "seo", "destinée", "au"
  • 7 mots : "voici", "une", "rédaction", "seo", "destinée", "au", "seo"
  • le taux de répétition est donc de 14,29%

Le calcule du taux de la répétition est fait de la façon suivante = (1- nombre mots distincts / nombre mots) x 100.

Pourquoi  est-il  important de vérifier la répétition de mots clés ? 

Lorsque la répétition de mots clés reste en dessous d'un certain seuil (inférieur à 50%) elle contribue au référencement de la page. Puisqu'au dessus de ce taux, les moteurs de recherche pourront considérer qu'il s'agit d'une tentative de sur-optimisation du contenu.

De plus, il est important que le contenu lui même ne soit pas répété non plus. Un contenu avec un taux de répétition trop important peut finir par être pénalisé par les moteurs de recherche. Il sera considéré comme un contenu “pauvre”, de mauvaise qualité et avec peu de valeur ajoutée pour les utilsateurs. 

Comment gérer la répétition des mots clés ?

Pour pouvoir optimiser la répétition des mots clés de votre contenu sans pour autant perdre en qualité, vous devez :

  • garder le taux de répétition inférieur à 50%
  • penser aux utilisateurs. La répétition des mots clés peut être faite, mais elle ne doit pas nuire à l’expérience des utilisateurs 
  • utiliser un champ sémantique riche et varié autour de votre mot clé principal, notamment des synonymes

Ressources bloquantes

C’est quoi une ressource bloquante ?

Les ressources bloquantes sont des styles CSS ou scripts JavaScript nécessitant d'être entièrement chargés pour effectuer le premier rendu de la page.

Pourquoi c’est important ?

Selon leur position dans le code HTML de votre site, ces ressources bloquantes peuvent ralentir considérablement le temps de chargement de votre page.
Le code HTML d’une page web est lu de haut en bas par les navigateurs. Si votre script JavaScript se situe en début de page par exemple, la lecture par le navigateur de votre code HTML va se mettre en “pause” pour traiter votre script Javascript. Ainsi, le reste de votre contenu HTML ne s’affichera pas durant le traitement de cet élément, ce qui est pénalisant pour le temps de chargement de votre site, pour l’expérience utilisateur et donc pour votre référencement.

Les ressources bloquant le rendu d’une page web sont généralement issues de JavaScript et de CSS.

Comment résoudre ce problème ?

Placer les scripts JavaScript en bas de page ou différer leur chargement grâce à l'attribut "defer" :

<head>
    <script src="/script.js" defer></script>
</head>
... ou ...
    <script src="/script.js"></script>
</body>
</html>

Spécifier le media concerné pour les feuilles de style :

<head>
    <link rel="stylesheet" href="print.css" media="print">
</head>

Ressources CSS inutilisées

Qu'est-ce qu'une ressource CSS non utilisée ?

Il s'agit d'un style CSS chargé de manière critique (indispensable au premier rendu) par la page dont les règles de mise en forme ne sont pas ou peu exploitées par celle-ci (utilisation inférieure à 25%). Par exemple la page charge une bibliothèque CSS embarquant une multitude de règles et la page n'utilise que celles nécessaires à la mise en forme des titres.

Pourquoi est-il utile de les éviter ?

Le fait de charger une ressource inutilisée alourdit inutilement le poids global de la page et retarde son chargement. Par ailleurs, la navigateur doit également parcourir le style CSS afin de déterminer quelles règles appliquer, ce qui retarde le premier rendu. Il est donc judicieux de retirer ces styles superflus ou de différer leur chargement (pour ne pas bloquer le premier rendu) afin d'améliorer la rapidité de la page et l'expérience utilisateur.

Comment gérer une ressource CSS non utilisée ?

Avant d'intervenir sur les fichiers CSS, il est nécessaire de comprendre que l'analyse de page se focalise sur l'optimisation de celle-ci sans tenir compte de la globalité du site. Ainsi un style CSS bloquant inutilisé sur une certaine page, peut l'être sur une autre. Le regroupement des différentes règles CSS utiles au site dans un même fichier et déclaré dans un gabarit HTML de page, est une bonne chose, même si ces règles ne sont quasiment pas utilisées par une page en particulier. Il est donc important de vérifier cet aspect avant d'intervenir et d'ignorer ce critère si ce style est utile globalement et dont le chargement ne peut pas être différé.

De manière générale, pour solutionner ce problème, il est nécessaire de :

  • retirer la balise <link> du code HTML de la page si le style n'est pas du tout utilisé
<head>
...
    <link rel="stylesheet" href="styles/inutile.css" />
...
</head>
  • différer le chargement grâce à l'attribut "defer" si le style n'est pas critique pour le premier rendu, c'est-à-dire qu'il n'est pas utile au contenu au-dessus de la ligne de flottaison
<head>
...
    <link rel="stylesheet" href="styles/inutile.css" defer/>
...
</head>
  • extraire les règles CSS critiques au premier rendu et différer le chargement global du style
<head>
    <style>
        .titre {
            font-size: 20px;
            color: blue;
        }
    </style>
...
    <link rel="stylesheet" href="styles/inutile.css" defer/>
...
</head>
  • retravailler le fichier CSS en retirant toutes les règles inexploitées par le site afin de diminuer son poids

Ressources JavaScript inutilisées

Qu'est-ce qu'une ressource JavaScript non utilisée ?

Il s'agit d'un script JavaScript inclus par la page dont le code n'est pas ou quasiment pas utilisé par celle-ci (utilisation inférieure à 25%). Par exemple, la page charge un module JavaScript proposant une multitude d'utilitaires et elle n'utilise que la fonction nécessaire au formatage des dates.

Pourquoi est-il utile de les éviter ?

Le fait de charger une ressource inutilisée alourdit inutilement le poids global de la page et retarde son chargement. Par ailleurs, la navigateur doit également interpreter le code, ce qui retarde davatange le délai d'intéraction pour l'utilisateur. Même si le script est chargé de manière asynchrone et n'est pas nécessaire au premier rendu, le code entre en concurrence pour la bande passante avec d'autres ressources pendant le téléchargement, ce qui a des implications significatives sur les performances. Il est donc judicieux de retravailler/retirer ces scripts afin d'améliorer la rapidité de la page et l'expérience utilisateur.

Comment gérer une ressource JavaScript inutilisée ?

Avant d'intervenir sur les fichiers JavaScript, il est nécessaire de comprendre que l'analyse de page se focalise sur l'optimisation de celle-ci sans tenir compte de la globalité du site. Ainsi un script inutilisé sur une certaine page, peut l'être sur une autre. Le regroupement de différents codes utiles au site dans un même fichier n'est pas une mauvaise chose. Il est donc important de vérifier cet aspect avant d'intervenir et d'ignorer ce critère si le script relevé est utile globalement.

De manière générale, pour solutionner ce problème, il est nécessaire de :

  • retirer la balise <script> du code HTML de la page si celui-ci n'est pas utilisé
...
    <script src="scripts/inutile.js"></script>
...
  • retirer le code inutilisé du script afin d'alléger son poids et le délai d'interpretation nécessaire au navigateur
  • segmenter, si possible, les différents codes dans plusieurs fichiers et ne charger que celui d'utile pour la page

 

 

S

Scroll X

Qu'est-ce que le scroll X ?

Le scroll X est le fait de pouvoir faire défiler une page de gauche à droite, c'est-à-dire horizontalement. On le constate lors la présence d'une barre de défilement horizontale au niveau du navigateur. Il est provoqué lorsque le contenu ne s'adapte pas à la taille de l'écran. Ce qui signifie que le site est plus large que la fenêtre de l'écran et donc qu’il n’est pas responsive.

Pourquoi c'est un problème ?

La présence d'un scroll X nuit à l'expérience utilisateur : le défilement horizontal n'est pas intuitif pour les utilisateurs, ils n'ont pas le réflexe de faire défiler les pages de gauche à droite. Si les utilisateurs ont une mauvaise expérience, ils risquent de revenir sur la SERP et cliquer sur un autre site plus adapté, ce qui dégrade votre classement et augmente votre taux de rebond.

Comment le corriger ?

Dans la plupart des cas, c'est au niveau des styles CSS de votre page (ou template) qu'il faut intervenir.

Stabilité de la mise en page

Qu'est-ce que la stabilité de mise en page ?

On parle de stabilité de la mise en page lorsque les différents éléments de la page ne changent pas ou peu de position suite au chargement de nouvelles ressources. Par exemple, l'utilisateur commence à lire du texte présent sur la page et au même moment, un bloc est ajouté dynamiquement au dessus de celui-ci via du JavaScript, le texte se décale alors vers le bas et l'utilisateur perd le fil de sa lecture.

L'indicateur CLS (Cumulative Layout Shift) de Google permet de mesurer la fréquence à laquelle ces changements se produisent. Plus l'indicateur est élévé, plus la mise en page est instable. Lorsque cet indicateur vaut 0, aucun mouvement inattendu du contenu de la page a été détecté. Retrouvez davatange d'informations sur cet indicateur CLS et la manière dont il est calculé sur la documentation Google (en anglais).

Pourquoi est-elle importante ?

La stabilité de mise en page est importante du fait qu'elle est prise en compte par Google dans ses critères de classement et surtout, parce qu'elle impacte négativement l'experience utilisateur lors de la navigation sur la page. Face à une page instable, l'utilisateur peut être frustré par la perte de repères visuels et pire encore, il peut penser que le site ne fonctionne pas du fait d'un décalage lors d'intéraction sur des boutons qui se déplacent par exemple.

Comment éviter des changements de mise en page inattendus ?

Afin de fournir une expérience optimale à vos utilisateurs, il est nécessaire de garder l'indicateur CLS sous la barre de 0,1. 

Quelques conseils pour garder l'indicateur sous la barre critique :

  • définissez les attributs de taille de vos images et vidéos dans le code HTML ou résevez l'espace nécéssaire dans un conteneur avec un rapport hauteur / largeur en CSS
  • définissez les dimensions des conteneurs accueillant du contenu tiers comme des publicités
  • n'insérez pas dynamiquement du contenu au dessus d'un contenu existant
  • préférez les animations de transformation ("transform" en CSS) aux animations de propriétés qui déclenchent des changements de mise en page (manipulation JavaScript)
  • préchargez les polices web

Structuration des titres

C’est quoi la structuration des titres <hn> ?

C’est l’organisation par ordre de pertinence des différents titres d'un contenu grâce aux balises HTML. Il existe 6 balises <hn> : de <h1> à <h6>, <h1> indique  le titre le plus important et <h6> le moins important.

Pourquoi la structuration est-elle importante ?

La structuration du contenu par des titres <hn> est importante, d’abord parce qu’elle aide l’indexation et le référencement de votre page. La hiérarchisation des titres et sous-titres facilite la compréhension de votre contenu par les moteurs de recherche en mettant en avant les éléments important de celui-ci. Cette structuration améliore aussi l’expérience des utilisateurs qui s’y trouvent et comprennent plus facilement votre contenu.

Comment structurer votre contenu ?

Pour pouvoir structurer votre contenu par des balises <hn>, il est necéssaire de respecter la hiérarchie de ces titres : leur ordre ainsi que leur taille.

La structure recommandée est donc, (par exemple) :

<h1>La structuration du contenu par des titres</h1>
    <h2>Pourquoi la structuration est-elle importante ?</h2>
    <h2>Comment structurer votre contenu ?</h2>
        <h3>Un exemple de structuration</h3>
        <h3>Des conseils pour une meilleure pertinence</h3>
    <h2>...</h2>

Pour réussir à bien structurer vos balises <hn>, il faut :

  • ne pas sauter des niveaux de titres. Par exemple, de <h1> à <h4> ou de <h2> à <h4>. On défini <h1> puis <h2> ou <h3> puis <h2>, que l’on monte en niveau ou que l’on descende
  • éviter de mettre trop de <h1> et <h2>
  • privilégier l’utilisation d’un seul titre <h1> par page. Il est possible d’avoir plusieurs titres <h1> par page, lorsque la page contient plusieurs contenus distincts, mais cette technique rend l’optimisation plus délicate

 

 

T

Taille des éléments tactiles

Qu'est-ce qu'un élement tactile ?

Un élément tactile est un élement HTML de la page sur lequel les utilisateurs peuvent appuyer (ou cliquer), il s'agit principalement de liens et de boutons.

Pourquoi leur taille est importante ?

Lorsqu'un élément tactile est trop petit, les utilisateurs sur téléphone peuvent rencontraient des diffultés à intéragir avec celui-ci ,ce qui nuit à l'expérience utilisateur et donc au positionnement de la page sur les SERPs.

Comment les rendre accessibles ?

Afin que les éléments tactiles soient facilement accessibles, il est nécessaire qu'ils occupent une taille minimale de 48px x 48px et que les espacements entres ces différents éléments soit de 8px au minimum.

Lorsque ce type de problème est présent sur une page, il est nécessaire d'intervenir au niveau des styles CSS afin d'agrandir la taille des éléments concernés, en augmentant la propriété "padding" par exemple. De même l'espacement entres différents éléments peut être ajusté grâce à la propriété "margin".

Taille du DOM

C'est quoi le DOM ?

Le DOM (Document Object Model) est le résultat de l'interprétation du code HTML de la page par le navigateur. Il s'agit d'une représentation des données sous forme d'un arbre composé de noeuds et d'éléments où chaque élément appartenant à un noeud est un enfant. Il fournit, par ailleurs, une interface de programmation (API) utile pour la modification de la page par le code JavaScript.

Document
    - <html>
        - <head>
            - <title>
                - La taille du DOM
        - <body>
            - <h1>
                - C'est quoi le DOM ?
            ...

Pourquoi la taille du DOM est-elle importante ?

Plus la taille du DOM est importante, plus le navigateur mettra de temps à le créer et à l'interpréter, ce qui ralentira le rendu de la page, et sollicitera davantage les ressources de l'ordinateur de l'utilisateur.

Quelles caractéristiques la taille du DOM doit respecter ?

La taille du DOM doit avoir :

  • moins de 1 500 éléments au total
  • une profondeur maximale de 32 éléments
  • moins de 60 éléments enfants dans un élément parent

Taille du texte

Qu'est-ce que la taille du texte ?

La taille du texte est l'espace que les caractères occupent dans un contenu d'une page WEB. La taille d'un texte se défini dans les styles CSS grâce à la propriété "font-size". Par défaut, en l'absence d'instructions, les navigateurs utilisent généralement une taille de 16px.

body {
    font-size: 14px;
}

La valeur que peut prendre l'attribut "font-size" est exprimée en pixels (px), elle peut également être exprimée grâce à d'autres unités (%, em, rem) qui sont traduites en pixels par le navigateur.

Pourquoi est-elle importante ?

Si la taille du texte n'est pas assez grande, surtout sur mobile, les utilisateurs auront des difficultés à lire le contenu de votre page et devront zoomer pour le rendre accessible. Le fait de devoir manipuler le navigateur afin de rendre accessible le contenu dégrade l'expérience utilisateur, il est donc essentiel de fournir la meilleure accessibilité aux utilisateurs dès le premier affichage de la page WEB.

Comment l'optimiser ?

Pour fournir une expérience optimale, il est nécessaire qu'au moins 60% du texte soit de taille supérieur à 12px. Si ce n'est pas le cas il est nécessaire de :

  • augmenter les valeurs de la propriété "font-size" des éléments concernés au niveau des styles CSS
p { 
    font-size: 8px; 
    font-size: 14px;
}
  • spécifier une "meta viewport" pour la version mobile au niveau du code HTML, afin que le navigateur puisse ajuster la taille du texte
<head>
    ...
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ...
</head>

Temps de réponse serveur

Qu'est-ce que le temps de réponse serveur ?

Le temps de réponse serveur correspond au temps que prend le serveur WEB pour générer une page, entre le moment où il reçoit la demande et celui où il commence à envoyer le contenu de la page. Ce temps ne dépend pas de la qualité de la connexion ou de l’emplacement géographique du serveur (la latence), mais dépend uniquement de la performance de calcul du serveur WEB.

Pourquoi est-il important qu'il soit faible ?

Le temps de réponse serveur peut largement affecter la position d’un site dans les résultats de recherche, soit parce que Google juge que ce site est trop lent pour être proposé, soit parce que les utilisateurs n’ont pas la patience d’attendre le chargement de la page.

Comment l'améliorer ?

Il est recommandé que le serveur retourne la page en moins de 300ms.

Il peut y avoir plusieurs solutions pour améliorer le temps de réponse serveur :

  • choisir un serveur plus performant
  • rechercher des scripts côté applicatif/serveur ralentissants le chargement des pages (ou certains modules Wordpress par exemple, en les désactivant les uns après les autres).
  • activer la mise en cache côté serveur des pages HTML lorsque c'est possible.
  • utiliser un Load Balancing afin de réduire la charge du serveur en la répartissant sur plusieurs serveurs.

Il existe de nombreuses techniques permettant d’améliorer la rapidité serveur mais elles dépendent toutes de contraintes techniques et doivent être étudiées avec un technicien spécialisé.

Accédez à la documentation Google sur le temps de réponse serveur pour plus d'informations.

Titre de page optimisé

C’est quoi un titre de page optimisé ?

Rappel : Le titre d’une page web apparaît dans la barre de titre du navigateur, mais aussi dans les pages des moteurs de recherche. Le titre de page en langage HTML est nommé balise <Title>. 

Un titre de page optimisé est donc un titre qui participe activement à votre référencement dans les SERPs, grâce à sa pertinence et son attrait pour l’utilisateur et pour les moteurs de recherche.

Pourquoi c’est important ?

Le titre d’une page est aussi important que le titre d’un roman. Il doit :

  • séduire les internautes afin de les attirer sur votre site. Ce qui influe sur le CTR et donc indirectement sur le positionnement.

  • séduire les moteurs de recherche afin d’être bien positionnés dans les SERPs

Comment optimiser son titre de page ?

Lorsque vous rédigez votre titre dans votre balise <title>, il est important de respecter plusieurs critères afin de l'optimiser au mieux :

  • la longueur : pas plus de 65 caractères, soit 512 pixels. Il doit occuper, au minimum, une place de 25 signes. Il est préférable de raisonner en termes de pixels, car toutes les lettres n’occupent pas le même espace dans une SERP. La lettre “M” en majuscule n’occupe pas la même place qu’un “j” en minuscule.

  • votre titre doit être concis et précis 

  • Inclure le mot clé principale de votre page, c’est-à-dire celui sur lequel vous souhaitez être référencé.
    Évitez le bourrage de mots clés dans votre titre. Celui-ci doit rester pertinent et attractif pour l’utilsateur.

  • Le titre de votre page doit être unique, bien que cela puisse être compliqué selon votre secteur d’activité

  • Évitez de nommer votre page “Accueil”, “Contact”,... Google s’approprie le droit de modifier le titre de votre page si celui-ci n’est pas suffisamment pertinent à ses yeux

  • N’hésitez pas à utiliser des verbes d’action : “Améliorez”, “Augmentez”, "Développer", etc.

  • Le titre de votre page doit être cohérent et en adéquation avec son contenu

  • N’hésitez pas à inclure le nom de votre marque si celle-ci possède une bonne notoriété

  • N’oubliez pas que vous écrivez avant-tout pour plaire aux internautes. Il faut trouver l’équilibre adéquat entre référencement et attrait pour les utilisateurs.

Titre h1 optimisé

C’est quoi un titre <h1> optimisé ?

Pour rappel, le titre <h1> est le principal et le plus important titre d’un contenu. Il s'agit du premier titre visible sur une page web.
Un titre h1 optimisé est un titre qui contient le mot clé ciblé relatif au principal contenu de la page. Il est aussi le titre écrit avec la plus grande taille de police de caractère. 

Pourquoi est-il important ? 

Le titre <h1> est important car c'est grâce à lui que les moteurs de recherche et les utilisateurs vont identifer rapidement le contenu d'une page. Il est aussi important de savoir que le titre <h1> est parmi les facteurs les plus influents pour le positionnement sur les résultats de moteurs de recherche. 

Comment optimiser un titre <h1> ?

Pour pouvoir optimiser votre titre <h1> vous devez : 

  • écrire un titre attirant qui présente les principaux mots clés du contenu de la page 
  • utiliser la plus grande taille de police de caractère
  • avoir une seul titre <h1> par page. Il est possible d’avoir plusieurs titres <h1> par page, lorsque la page contient plusieurs contenus distincts, mais cette technique rend l’optimisation plus délicate

Par exemple : 

<h1>L'optimisation d'une titre h1 pour être mieux référencé</h1>

U

URL canonique

Qu'est-ce qu'une URL canonique ?

Une URL canonique c'est une balise inserée dans le code HTML d'une page web qui vous permet de spécifier aux moteurs de recherche l'URL préférée, c'est-à-dire celle qui doit être explorée.

Pourquoi les URL canoniques sont- elles importantes ?

Lorsque plusieurs pages ont un contenu similaire, les moteurs de recherche les considèrent comme des versions dupliquées de la même page. Par exemple, les versions de bureau et mobile d'une page de produit sont souvent considérées comme des doublons. Les moteurs de recherche sélectionnent l'une des pages comme version canonique, ou principale, et explorent cette page de plus. Les liens canoniques valides vous permettent d'indiquer aux moteurs de recherche quelle version d'une page doit être explorée et affichée aux utilisateurs dans les résultats de recherche.

Comment définir une URL canonique ?

Ajoutez un élément <link rel="canonical"> au <head> de la page :

<!doctype html>
<html lang="en">
  <head>
    …
    <link rel="canonical" href="https://example.com"/>
    …
  </head>
  <body>
    …
  </body>
</html>
  • assurez-vous que l'URL canonique est une page valide
  • quand possible, utilisez les URL canoniques HTTPS plutôt que HTTP 
  • n'envoyez pas l'URL canonique vers un autre domaine. Yahoo et Bing ne le permettent pas
  • n'envoyez pas les pages de niveau inférieur vers la page racine du site, sauf si leur contenu est identique
  • utilisez des URLs absolues ("https://example.com/page" au lieu de "/page")

 

V

Valeur SEO (SEO Value)

L'indicateur de Valeur SEO (SEO Value) permet de mesurer l'importance d'une position ou de son mouvement. Il correspond à une valeur estimée d'une position SEO. 

Comment utiliser cet indicateur?

Il est plus pratique de surveiller la valeur SEO plutôt que la position moyenne. En effet, la Valeur SEO permet de mesurer l'évolution du positionnement en prenant en compte l'importance des mots clés. Par exemple, elle augmentera significativement si vous gagnez une position sur un mot clé très important. Au contraire, elle changera peu si vous gagnez beaucoup de positions sur des mots clés à faible potentiel.

Vous pouvez utiliser cet indicateur pour mesurer votre Retour sur Investissement SEO (ROI) en calculant le budget et le temps passé, et en le comparant aux retombées SEO.

Attention, les données sur les mots clés (volume et coût par clic) sont mises à jour tous les mois, ce qui impacte la SEO Value et peut expliquer des fluctuations de celle-ci en début de mois.

Comment est calculée la Valeur SEO?

La valeur SEO est calculée selon notre algorithme de calcul. Il prend en compte différents éléments tels que la position, le type de mot clé, l'importance de la recherche, la concurrence AdWords, etc.
En résumé : la Valeur SEO correspond au montant que vous devriez dépenser en campagne AdWords pour attirer le même nombre de visiteurs qu’avec votre position actuelle dans les résultats de recherche.

Versions linguistiques

C’est quoi les versions linguistiques ?

Ce sont les différentes versions d'un contenu qui est rédigé dans plusieurs langues et accessible depuis des URLs différentes. Ces versions sont indiquées et spécifiées grâce à un lien hreflang présent dans le code HTML de la page.

Pourquoi est-il important d’indiquer les versions linguistiques ?

Il est important de bien indiquer et préciser les versions localisées d'un contenu afin d'aider les moteurs de recherche à comprendre celui-ci et à rediriger les utilisateurs vers la version la plus pertinente et adaptée pour eux.  

Comment les indiquer aux robots d'exploration ?

Le lien hreflang peut être défini dans le code HTML de la page au niveau du <head> grâce à la balise <link rel="alternate" hreflang="code_langue" href="url_absolue" />.

<head>
...
    <link rel="alternate" hreflang="en" href="https://monsite.com/en/cat" />
    <link rel="alternate" hreflang="pt" href="https://monsite.com/pt/gato" />
...
</head>

Les versions localisées peuvent également être définies dans une en-tête HTTP :
Link: <url_absolue_1>; rel="alternate"; hreflang="code_langue_1", <url_absolue_2>; rel="alternate"; hreflang="code_langue_2". Il est possible d'en définir plusieurs, elles sont alors séparées par une virgule ",".

Link: <https://monsite.com/en/cat>; rel="alternate"; hreflang="en",
      <https://monsite.com/pt/gato>; rel="alternate"; hreflang="pt"

Les urls de ces versions localisées doivent être définies de manière absolue et l'url doit être accessible aux robots d'exploration. La langue doit également être valide et définie grâce au format ISO 639-1 : fr, fr-FR, en etc.

Visibilité du texte

C’est quoi la visibilité du texte ?

La visibilité du texte correspond au fait que le texte d’une page web soit visible pendant le chargement de la police d’écriture. La police d'écriture est la représentation visuelle des caractères et est présente par défaut sur les systèmes d'exploitation. Il est possible de charger une police d'écriture spécifique (police WEB) afin de mettre en forme le texte d'une manière originale. 

Pourquoi est- il important que le texte soit visible pendant le chargement ?

Lorsqu'une police web est en cours de chargement, le texte sans police alternative du système n'est pas visible jusqu'au chargement du navigateur et pendant ce temps, l'utilisateur ne voit rien. Ce qui peut engendrer une mauvaise expérience utilisateuret provoquer des changements de mises en page inattendus.

Comment solutionner  le problème d'absence de texte ? 

Afin de solutionner ce problème d'absence de texte durant le chargement, il est nécessaire d'utiliser une police d'écriture présente sur les systèmes d'exploitation, afin que le texte soit visible durant le chargement. 

La définition d'une police WEB se fait au niveau du style CSS et se déclare de la manière suivante (sans instruction d'utilisation d'une police système alternative) :

@font-face {
  font-family: 'Pacifico';
  src: local('Pacifico Regular'), local('Pacifico-Regular'), 
       url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
}

La solution la plus simple pour utiliser une police système temporaire pendant le chargement de celle-ci est d'ajouter la propriété "font-display: swap;" :

@font-face {
    font-family: 'Pacifico'; 
    src: local('Pacifico Regular'), local('Pacifico-Regular'),
        url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2'); 
    
    font-display: swap;
}

L'instruction "swap" indique au navigateur que le texte utilisant la police doit être affiché immédiatement en utilisant une police système.

Volume de recherche

Le volume de recherche correspond au nombre estimé de recherches effectuées sur Google tous les mois. 

Cet indicateur permet de mesurer le potentiel de visibilité ou de clics d'un mot clé vis à vis d'un autre. 

Les mots clés ayant un fort volume de recherche peuvent apporter davantage de clics, mais sont souvent plus concurrentiels.