Trouvez la définition de tous les termes du lexique SEO.
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>
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.
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.
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.
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.
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 :
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,...)
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
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.
Il s'agit tout simplement du pied de page où toutes les informations principales du site WEB sont généralement présentes.
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.
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 :
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.
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é.
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.
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.
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.
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.
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 :
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" />
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).
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.
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.
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
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 :
À 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.
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.
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 :
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.
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.
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.
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>
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é.
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.
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.
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é).
Cocolyze explore les pages des 20 premiers résultats de recherche dans les SERPs et analyse le contenu.
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.
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.
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.
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
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.
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.
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).
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.
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.
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).
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).
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.
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.
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.
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.
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 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.
CPC (coût-par-clic) est le coût moyen d'un clic pour un résultat de recherche sur un mot clé défini.
Un 'clic' sur une campagne PPC (paiement par clic) représente une visite ou une interaction avec le produit/service de votre entreprise. Lorsque vous annoncez, votre CPC sera toujours inférieur ou égal au budget maximum défini. Votre coût réel par clic dépend à la fois de votre position publicitaire et de celui de vos concurrents, de votre enchère maximale et de votre niveau de qualité.
Pour plus d’informations sur les enchères au CPC, veuillez consulter la documentation officielle de Google.
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 :
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).
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.
Il est recommandé de ne pas dépasser 8 chaînes, pour diminuer la taille des chaînes de demandes critiques, vous devez :
<link rel="stylesheet" type="text/css" href="css/inutile.css" />
<script type="text/javascript" src="js/jquery.js" defer></script>
<link rel="preload" href="font/roboto.woff2" as="font" crossorigin="anonymous" />
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.
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.
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;
}
Le doctype est une indication dans une page HTML permettant de définir le type de syntaxe utilisé dans la page.
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.
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".
Le score de Domain Influence permet d'analyser la popularité d'un site. Plus ce site possède de backlinks influents, plus sa note d'influence sera importante.
Le score de Domain Influence est un indicateur de 0 à 100 où 100 correspond à un site très influent.
Le score de Domain Influence est utile pour trier et comparer différents backlinks. En effet, un site ayant un Domain Influence élevé peut être plus intéressant à contacter afin de créer un backlink plutôt qu'un site ayant un Domain Influence bas.
Surveillez également vos backlinks perdus: nous vous recommandons de contacter les webmasters des sites sur lesquels vous venez de perdre un backlink ayant un score de Domain Influence élevé.
Un site qui crée un backlink vers votre site et qui possède un score de Domain Influence bas ne porte pas préjudice à votre référencement. Pour analyser la toxicité d'un lien, rendez-vous sur l'article concernant le score de Spam Rating.
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.
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.
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>
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>.
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.
Votre liste doit comporter les informations suivantes :
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
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)
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!!ソ§--スコ#€).
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 :
Enfin ,il doit être défini au moins sur l'un des éléments.
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.
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.
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 :
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.
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 :
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.
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.
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.
Lorsque la page inclut énormément de code JavaScript, celui-ci dégrade les performances de la page sur plusieurs points :
Lorsqu'une page souffre de lenteur due à une éxécution de scripts trop importante, il est utile de :
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.
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.
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
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.
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.
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 :
...
<script src="lazysizes.min.js" async></script>
</body>
<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">
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.
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 :
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 :
<script src="https://cdn.exemple.com/script.js" defer></script>
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);
<script src="https://cdn.exemple.com/script.js"></script><script src="/js/script.js"></script>
<script src="https://cdn.exemple.com/inutile.js"></script>
<link rel="preconnect" href="https://cdn.exemple.com">
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’.
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.
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 :
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'indicateur de Concurrence est basé sur le nombre d'annonceurs souhaitant placer une annonce sponsorisée (Google Ads) sur un mot clé. Cet indicateur dépend de la localisation de la recherche.
Cet indicateur permet d'obtenir facilement une idée de la concurrence SEO sur ce mot clé, étant donné qu'une forte concurrence correspond à un grand nombre de sites souhaitant être positionnés en haut de cette recherche.
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é :
Les labels sont nécessaires :
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.
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".
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.
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">
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".
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.
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 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.
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 :
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
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.
Afin de s'assurer que le fichier robots.txt est valide, il est nécessaire de :
Vérifier la syntaxe du fichier en suivant ces quelques consignes :
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”.
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.
Pour pouvoir optimiser vos liens descriptifs pensez à :
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
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)
Pour pouvoir résoudre un problème avec un lien non explorable, vous devez :
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>
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.
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 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.
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 :
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.
Assurez-vous que plus de 50% des liens de la page pointent vers votre site afin de limiter la quantité de jus perdue :
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.
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.
En ce qu’il concerne la lisibilité d’un point de vue de la structuration et du langage pensez à :
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.
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.
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
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.
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.
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 :
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.
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.
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.
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.
Retirer les caractères inutiles permet d’améliorer le délai de chargement du fait que le fichier CSS pèse moins lourd.
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;
}
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).
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.
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.
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.
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.
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>
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 :
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 :
Lorsqu'un module JavaScript possède des failles de sécurité reconnues, il est nécessaire de :
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".
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.
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
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.
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.
Pour pouvoir optimiser vos mots clés, il faut que votre contenu :
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.
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.
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> :
<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.
Cocolyze analyse automatiquement toutes les pages les mieux positionnées de votre site ou de vos concurrents, tous les jours, sur tous les mots clés suivis.
Nombre d'analyses
Nous analysons une seule fois par jour une URL donnée afin de minimiser les requêtes envoyées à votre serveur. Une URL peut cependant être analysée plusieurs fois si vous suivez cette page :
- sur mobile et pour desktop
- sur des suivi de langues différentes.
Ainsi, une même URL peut par exemple avoir un score différent sur mobile en Anglais que sur Desktop en Italien.
Actualiser l'analyse
Les pages analysées sont mises à jour automatiquement tous les jours. Vous pouvez forcer le rafraichissement de l'analyse, par exemple si vous modifiez un élément que vous souhaitez immédiatement vérifier, en cliquant sur le bouton Actualiser de l'analyse de page.
La page la mieux positionnée n'est pas celle que je souhaite positionner.
Vous pouvez définir la page associée à un mot clé si vous souhaitez modifier (ou "forcer") la page analysée pour un mot clé.
Suppression des analyses
Les pages analysées sont automatiquement supprimées si :
- Elle ne sont pas associées à un mot clé
- Elle n'ont pas été trouvées comme page la mieux positionnée d'un même site sur un mot clé les 7 derniers jours.
Une page supprimée réaparaîtra automatiquement si nous la trouvons comme page la mieux positionnée d'une même site sur un suivi de mots clés.
Les pages positionnées sont les pages que nous avons trouvées sur vos suivis de mots clés (dans les 100 premiers résultats) lors du dernier passage de notre robot d'analyse.
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().
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.
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.
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()
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.
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.
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 :
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.
Optimiser les images correspond à adapter leur format et leur qualité pour le WEB, il est utile de :
Retrouvez davatages d'informations sur le guide complet de l'optimisation des images de Google (en anglais).
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.
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.
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 :
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.
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.
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.
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.
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.
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.
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.
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.
É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">
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.
Il suffit d'ajouter l'attribut rel="noopener" ou rel="noreferrer" à tous vos lients sortants utilisant l'attribut target="_blank".
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.
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).
Le protocole est à mettre en place sur le serveur web du site.
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.
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.
Si ce type de redirection est constaté, il est nécessaire de retirer l'instruction en cause :
<meta http-equiv="refresh" ...>
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.
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 :
Le calcule du taux de la répétition est fait de la façon suivante = (1- nombre mots distincts / nombre mots) x 100.
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.
Pour pouvoir optimiser la répétition des mots clés de votre contenu sans pour autant perdre en qualité, vous devez :
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.
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.
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>
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.
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.
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 :
<head>
...
<link rel="stylesheet" href="styles/inutile.css" />
...
</head>
<head>
...
<link rel="stylesheet" href="styles/inutile.css" defer/>
...
</head>
<head>
<style>
.titre {
font-size: 20px;
color: blue;
}
</style>
...
<link rel="stylesheet" href="styles/inutile.css" defer/>
...
</head>
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.
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.
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 :
...
<script src="scripts/inutile.js"></script>
...
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.
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.
Dans la plupart des cas, c'est au niveau des styles CSS de votre page (ou template) qu'il faut intervenir.
Le Spam Rating est un indicateur créé par Cocolyze permettant d'analyser le risque de toxicité d'un lien. Le Spam Rating est une note, entre 1 et 10, où 10 correspond à un fort risque de toxicité.
On considère comme lien potentiellement toxique un lien pouvant influencer de manière négative la qualité du netlinking d'un site web, et donc son positionnement Google. Un lien toxique peut par exemple être un lien d'un site de mauvaise qualité, tel qu'un casino en ligne dans un pays étranger de fiabilité douteuse qui effectue un lien vers votre site alors que vous n'avez aucun rapport avec le monde du Casino. Google pourrait pénaliser votre positionnement si un trop grand nombre de sites de mauvaise qualité sont liés à votre site.
L'indicateur du Spam Rating n'indique pas les liens toxiques, mais les liens ayant un fort risque de toxicité. Ainsi, nous vous conseillons de vérifier manuellement les liens ayant un Spam Rating supérieur ou égal à 8: si vous jugez que certains de ces liens ne sont pas liés à votre activité et sont de fiabilité douteuse, vous pouvez désavouer ces liens auprès de Google afin de lui indiquer que vous ne souhaitez pas que Google prenne en compte ces derniers.
Voici un article de Google expliquant comment désavouer vos liens.
Le Spam Rating est calculé par de puissants algorithmes issus de notre recherche et développement. De manière simplifiée, cet indicateur repose sur la popularité, la confiance du site référent, sa qualité et l'analyse des liens présents sur la page. Ainsi, un site web de forte popularité (c'est à dire avec beaucoup de liens) mais de mauvaise qualité (c'est à dire afin un indice de confiance faible) sera considéré comme potentiellement toxique.
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).
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.
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 :
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.
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.
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 :
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.
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.
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".
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 ?
...
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.
La taille du DOM doit avoir :
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.
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.
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 :
p {
font-size: 8px;
font-size: 14px;
}
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
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.
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.
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 :
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.
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.
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
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.
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.
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.
Pour pouvoir optimiser votre titre <h1> vous devez :
Par exemple :
<h1>L'optimisation d'une titre h1 pour être mieux référencé</h1>
Le temps de chargement du premier octet (Time To First Byte) correspond au délai entre l'envoi de la requête pour obtenir la page et le premier octet reçu. Il ne s'agit pas du premier affichage de la page mais uniquement des premières lignes de codes que le navigateur reçoit. Ce délai dépend du délai de la résolution DNS, de la qualité de la connexion (latence), de l'emplacement géographique, des performances du serveur, de la qualité de l'application générant la page et des systèmes de cache mis en place.
Chez Cocolyze, nous déduisons la latence moyenne de nos serveurs vers le vôtre afin de vous fournir un indicateur de rapidité serveur plus pertinent pour l'analyse des performances de votre site.
Google à tendance à afficher en priorité les contenus proposant une bonne expérience utilisateur. Ainsi, une page ayant un TTFB trop long peut être pénalisée.
De manière plus simple, si votre page met trop de temps à charger, l'utilisateur risque de partir pour revenir en arrière vers les résultats de recherche et de cliquer sur le lien d'un site concurrent. Cette action va augmenter le taux de rebond de votre lien et pénaliser votre positionnement.
Nous recommandons un TTFB inférieur à 400ms (0,4s).
Améliorer la rapidité serveur est une action très technique. Bien souvent, le site est fortement ralenti par un plugin de votre CMS (Wordpress, Magento, Prestashop, etc).
Une solution simple à la portée de tous est de désactiver successivement chaque plugin de votre CMS, puis de tester la rapidité serveur en rafraichissant l'analyse. Vous pourrez ainsi identifier quel plugin provoque un fort ralentissement du serveur. Une fois le plugin identifié, vous pouvez rechercher des solutions : mettre à jour, trouver un autre plugin, le désactiver sur certaines pages, ou tout simplement ne plus utiliser le plugin.
Si ce n'est pas un plugin ?
De manière générale, un TTFB élevé peut provenir de :
La solution consiste alors, avec votre partenaire technique, à rechercher en remontant étape par étape dans le code source du site afin d'identifier les éléments provoquant un ralentissement du serveur. En effet, la solution n'est pas toujours de choisir un serveur web plus puissant !
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.
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.
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>
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.