Tout savoir sur le SEO

Bonnes pratiques du web et optimisation pour les moteurs de recherche (SEO).

Sommaire



Introduction



Le présent article est dédié au référencement naturel et plus particulièrement aux optimisations pour les moteurs de recherche. Rappelons que le référencement naturel porte sur :

  • Les techniques d'optimisation pour les moteurs de recherche, lesquelles consistent en un ensemble de règles techniques à respecter afin de produire un contenu référençable de qualité.
  • Les techniques d'optimisation, les moyens et les conditions permettant d'acquérir et développer sa popularité sur internet.

  • De fait, les deux critères généraux permettant d'acquérir de la visibilité sur internet sont :

    • La qualité des contenus et de la navigation d'un site internet d'une part.
    • La popularité du site internet et de son nom de domaine d'autre part.

    Pour ceux qui souhaiteraient en savoir plus sur le référencement de manière générale, je vous invite à consulter l'article généraliste et tout public suivant :

    Tout savoir sur le référencement : pour découvrir le référencement et les clefs du référencement de site internet.
    En ce qui concerne les techniques pour développer la popularité d'un site internet, je rédigerai un article sur le sujet prochainement.

    On rappelle que les bonnes pratiques (best practices) du référencement naturel consistent en un ensemble de règles techniques dont le respect est qualifié de SEO (Search Engine Optimization), soit en français optimisation pour les moteurs de recherche.

    On présente ici les différentes règles de SEO qu'un site doit respecter afin d'être parfaitement référençable. Cette présentation n'est toutefois pas exhaustive. On se cantonne ici aux règles les plus importantes.

Prérequis



Si vous n'êtes pas encore très familier avec le référencement, je vous propose de lire l'article « Tout savoir sur le référencement » dont un lien figure ci-avant. Cette article devrait vous permettre de vous approprier les principaux concepts du référencement.

Au travers du présent article, on suppose que le lecteur dispose de connaissances techniques élémentaires en matière de web :

  • Une connaissance de base des langages HTML et CSS.
  • Une bonne compréhension des concepts fondamentaux du référencement.
  • Eventuellement, une connaissance de base du langage JavaScript.
  • Eventuellement, être familier avec l'usage des CMS (WordPress par exemple).

Par ailleurs, si vous souhaitez en savoir plus quant aux langages HTML et/ou CSS, dans l'attente de vous proposer un article complet d'introduction à la rédaction en langages HTML et CSS, je vous invite à consulter le cours suivant, en format PDF :

Cours de HTML et CSS: cours complet sur les bases du HTML et du CSS à destination des terminales STMG SIG.
Vous pouvez retrouver ce contenu dans : Etudiants > Cours d'informatique Terminale STMG > Synthèse de cours html et css.

Les outils



Avant toute chose, il semble judicieux d'utiliser quelques outils :

  • Google Search Console : relier votre site web à Google Search Console, anciennement Google Webmaster Tools). Cet outil est essentiellement destiné aux développeurs web. Il permet en outre de repérer diverses erreurs sur le ou les sites auxquels il est relié. Il permet encore de soumettre un sitemap, suivre l'avancement de l'indexation de pages d'un site, etc.
  • Google Analytics : relier votre site web à Google Analytics si cela n'est pas déjà fait. Pour ce faire, vous devrez préalblement interconnecter votre site à Google Search Console. Ceci fait, il suffit de copier/coller un petit bout de code (un script JavaScript) dans vos pages web. Cet outil analyse le trafic sur votre site internet. Il permet autrement dit de suivre l'évolution du nombre de visites sur votre site ainsi que d'obtenir des informations générales sur vos visiteurs.
  • Analyseur de site : ce n'est pas essentiel mais, au besoin, pour analyser le contenu de votre site internet, de nombreux outils en ligne, assez vite payants, sont disponibles. On peut citer par exemple les sites internet www.woorank.com ou encore www.ranking-metrics.fr. Les analyseurs de site vous permettent d'analyser le contenu de chacune de vos pages web en fournissant l'adresse URL de chacune d'entre elles. Ils passent au crible le contenu de la page web (crawling) afin de vous fournir un rapport décrivant les règles SEO respectées et non respectées.

Par ailleurs, quelques "outils" ou "astuces" habituelles :

Pensez-y ! Pour vérifier que vos pages web ont bien été indexées, il vous suffit de saisir site: suivi de votre nom de domaine dans le moteur de recherche Google.

Exemple : site:www.orleans-informatique.com

Pensez-y ! Pour vous faire une idée approximative du positionnement local de vos pages web sur internet, saisissez des mots-clefs sur Google après avoir bien supprimé vos historiques et vos principales données de navigation. Pour vous faire une idée indépendamment de la localisation, pensez à utiliser la navigation privée.

Pensez-y ! Si cela n'est pas fait automatiquement, il faut régulièrement soumettre votre ou vos sitemap à Google afin de vous assurer que vos contenus soient régulièrement réindexés. Pour ce faire, vous pouvez soumettre manuellement le sitemap soit en utilisant Google Search Console soit en saisissant l'URL suivante dans la barre d'adresse de votre navigateur :

https://google.com/ping?sitemap={sitemap}
{sitemap} : à remplacer par l'URL complète permettant d'accéder à votre sitemap.

Le positionnement



Ce point a déjà été évoqué au travers de l'article « Tout savoir sur le référencement » dont un lien figure ci-avant. Toutefois, rappelons quand même :

Tout le contenu d'une page web, en particulier ses contenus textuels, y compris celui des métadonnées, doit être unique et faire appel à un lexique judicieusement choisi en vue de positionner la page web sur un ensemble de mots-clefs.

Toute page web doit poursuivre un objectif de positionnement sur un ensemble de mots-clefs.

Les métadonnées de page



Tout d'abord, occupons-nous des trois éléments ayant le plus d'incidence en matière de SEO : les métadonnées. On ne voit pas ces informations lorsqu'une page web s'affiche. Pourtant, rien de plus important !

Ces données figurent entre les balises <head> et </head> des pages web.

Une icône personnalisée : un site devrait toujours avoir une icône personnalisée, la fameuse "favicon" qui apparaît sur l'onglet du navigateur.

Exemple :

<link rel="icon" href="/images/favicon.png" type="image/png" /> <link rel="shortcut icon" href="/images/favicon.png" type="image/png" />
Des URL propres : les URL des pages doivent être riches en mots-clefs. Elles doivent être pertinentes au regard du contenu proposé. Leur taille ne doit de préférence pas dépasser 120 caractères environ. Elles doivent être réécrites, c'est-à-dire ne contenir ni informations de session ni paramètres.

Exemple :

https://www.orleans-informatique.com/professionnels/articles/web
Contre-exemple :

https://www.orleans-informatique.com/professionnels?cat=web&article=4
Un titre à chaque page : toutes vos pages doivent posséder un titre unique (métadonnée "title"). Le titre doit être riche en mots-clefs. Malheureusement pour les individus verbeux, le titre doit comporter jusqu'à 65 caractères environ.

Exemple :

<title>Orléans informatique : tout savoir sur le SEO</title>
Une description à chaque page : toute vos pages web doivent posséder une description unique (métadonnée "description"). La description doit tout à la fois être pertinente, percutante, riche en mots-clefs et commerciale. En effet, c'est cette description qui figure dans les résultats des moteurs de recherche. Assez "spacieuse", la description doit compter jusqu'à 320 caractères maximum depuis une mise à jour de Google en 2018 (155 caractères avant 2018).

Exemple :

<meta name="description" content="Tout savoir sur les techniques de référencement naturel liées au SEO. Des techniques d'optimisation pour les moteurs de recherche à celles pour les réseaux sociaux, découvrez les astuces, techniques et bonnes pratiques du web qui permettent d'améliorer sa visibilité et sa popularité avec un site internet optimisé." />

De surcroît, ce sont ces métadonnées qui vont conditionner l'allure de l'encart correspondant à votre page web dans les résultats de recherche de Google et des autres moteurs de recherche :

Orléans informatique : tout savoir sur le SEO https://www.orleans-informatique.com/professionnels/articles/web/referencement-naturel-seo-site-internet Tout savoir sur les techniques de référencement naturel liées au SEO. Des techniques d'optimisation pour les moteurs de recherche à celles pour les réseaux sociaux, découvrez les astuces, techniques et bonnes pratiques du web qui permettent d'améliorer sa visibilité et sa popularité avec un site internet optimisé.
Vous pouvez modifiez les champs ci-dessus (métadonnées) pour tester le résultat obtenu : Titre : <title></title> {{a.length}} cararactère(s) URL : {{b.length}} cararactère(s) Description : <meta name="description" content=""/> {{c.length}} cararactère(s)

Par ailleurs, petite remarque :

Si vous ne le saviez pas, la métadonnée "keywords" n'a depuis bien longtemps aucune importance pour ainsi dire. Aussi, il convient de ne pas s'attarder sur cette métadonnée. Au sein de cette dernière, mettre les mêmes mots-clefs sur toutes les pages s'avérera tout à fait suffisant.

Dans le cas où vous utiliseriez un CMS, formulons une remarque complémentaire :

Par défaut, les CMS fournissent rarement des outils suffisants pour bien gérer les métadonnées des pages web et celles pour les réseaux sociaux. Or, ces métadonnées sont essentielles ! Pensez ainsi à installer un plugin. Si vous êtes sur WordPress, vous pouvez par exemple utiliser Yoast SEO Premium.

Par ailleurs, lorsque vous rédigez vos pages web sur un CMS, prenez au moins le temps de bien compléter les métadonnées !

Les métadonnées pour les réseaux sociaux



Si vous comptez partager des pages web quelles qu'elles soient sur les réseaux sociaux (pages, articles, fiches produit, événements, etc.), il convient de compléter les métadonnées propres aux réseaux sociaux. Celles-ci vous permettent en outre de partager de jolis encarts sur les réseaux sociaux en vous contentant de copier/coller le lien dans votre "post" ou encore votre "tweet".

Une fois encore, ces métadonnées sont placées ou à placer entre les balises <head> et </head> des pages web.

  • Les métadonnées OpenGraph

    Les métadonnées OpenGraph sont utiliser par tous les principaux réseaux sociaux : Facebook, Twitter, Linkedin ou encore Google+. Elles permettent de définir l'encart (le "post", le "tweet" ou autre) associé à la page web sur laquelle elles sont placées.
  • Les métadonnées Twitter

    Twitter dispose de quelques métadonnées particulières qui permettent de déterminer le type de "tweet" utilisé (l'allure du "tweet") ou encore le "hashtag" du site web auquel la page web est associée.

Sans plus tarder, un exemple répondant à la majorité des besoins :

<!-- Pour Twitter --> <meta name="twitter:card" content="" /> <meta name="twitter:site" content="" /> <!-- Pour Twitter, Facebook, Linkedin, etc. --> <meta property="og:locale" content="" /> <meta property="og:type" content="" /> <meta property="og:url" content="" /> <meta property="og:title" content="" /> <meta property="og:description" content="" /> <meta property="og:image" content="" />
twitter:card Permet de choisir le type de "tweet" (l'allure) qui sera utilisé lors du partage de la page web. Vous avez le choix entre les valeurs suivantes : summary, summary_large_image, app et player.
twitter:site Permet de préciser le nom d'utilisateur Twitter associé au site internet.
og:locale Permet de préciser le code correspondant à la langue utilisée au travers de la page web.
og:type Permet de préciser le type du contenu principal proposé par la page web. Plusieurs types sont disponibles : website, article, book, profile, video, music.
og:url Permet de préciser l'adresse URL standard (canonique) du contenu à partager.
og:title Permet de définir le titre du contenu à partager. Le titre est typiquement le même que celui de la page web (métadonnée "title").
og:description Permet de décrire le contenu à partager. La description fournie est typiquement la même que celle de la page web (métadonnée "title").
og:image Permet de définir l'adresse URL d'une image illustrant le contenu de la page partagée, normalement une bannière.

Une fois ces métadonnées définies sur votre page web, éventuellement d'un plugin (exemple : Yoast SEO Premium sous WordPress), il vous suffit de partager la page web sur les réseaux sociaux :

  • Soit en copiant/collant son adresse URL dans un "post", "tweet" ou autre.
  • Soit en cliquant sur le ou les boutons de partage de votre page web si vous en utilisez.

Les métadonnées complémentaires pour Google



En plus des métadonnées de page web et des métadonnées pour les réseaux sociaux, Google utilisent des métadonnées complémentaires afin de déterminer si vos pages web sont elligibles à certains positionnement particuliers tels que :

  • Affichage sur Google Maps
  • Affichage d'un encart d'entreprise ou autre organisation lorsqu'on saisit son nom dans les recherches
  • Affichage dans les actualités, produits, livres ou autres contenus proposés par Google en sus des recherches traditionnelles.


De nos jours, le format privilégié pour définir ces métadonnées supplémentaires attendues par Google est très certainement le JSON+LD. Il s'agit d'un format JSON (une alternative à l'ancestral XML) très normalisé, un petit "script" JSON venant aux "contenus invisibles" de votre page web (dans l'en-tête de la page web ou à la fin de celle-ci) et fournissant diverses informations structurée sur le site internet et/ou lage page web.

Google fournit une documentation complète (en anglais) explicitant le format JSON+LD, son utilité, etc. Au reste, tous les formats disponibles sont détaillés sur le site schema.org.

Voici néanmoins un exemple classique de JSON+LD dans le cas d'une organisation qui souhaite afficher un encart Google précisant ses coordonnées :

<script type="application/ld+json"> { "@context": "http:\/\/schema.org", "@type": "Organization", "name": "Orl\u00e9ans informatique", "logo": "http:\/\/www.orleans-informatique.com\/img\/logo.png", "url": "http:\/\/www.orleans-informatique.com", "description": "Orl\u00e9ans informatique, conseil, formation et information autour du web, du d\u00e9veloppement informatique, de l'ing\u00e9nierie informatique et logicielle.\"}", "telephone": "0238704025", "email": "contact@orleans-informatique.com", "address": { "@type": "PostalAddress", "streetAddress": "34 Rue de Bagneaux" "postalCode": "45140", "addressLocality": "ORLEANS", "addressCountry": "France" } } </script>

Les contenus



Avec des métadonnées parfaitement bien rédigées, l'on a fait qu'effleurer le SEO. Il va falloir des contenus de pages web propres...

Si vous utilisez un CMS, ce qui n'est pas mal en soi, rédiger des contenus propres (au sens du référencement et du développeur informatique) risque de s'avérer une tâche difficile voire impossible.

Si vous utilisez de plus un page builder (exemple : Visual Composer si votre CMS est WordPress), c'est-à-dire un outil qui facilite la rédaction de contenus (ni HTML ni CSS à saisir), rédiger un contenu propre sera très certainement impossible !

Dans tous les cas, si vous utilisez un CMS, l'objectif sera surtout de rédiger un contenu "le moins sal possible". Ce n'est pas gagné !

Si le développeur ou prestataire informatique a bien conçu le site internet et ses modèles de pages en amont, peut-être obtiendrez-vous des contenus à peu près corrects.

Par ailleurs, il faudra éviter d'utiliser n'importe quels plugins et, éventuellement, bien choisir le page builder et surtout bien l'utiliser afin qu'il ne génère pas n'importe quoi n'importe comment ce qui, une fois encore, n'est vraiment pas gagné.

En 2020 encore, l'idéal pour le référencement, cela reste un site 100% sur mesure. Mais soyons réaliste, dans bien d'un cas, cela coûterait bien trop cher !


Place aux règles de rédaction de contenus :

  • Une version HTML indiquée

    De nos jours, on rédige en HTML5. Toutes vos pages web devraient donc commencer par l'en-tête suivante, indiquant qu'il s'agit d'une page HTML5 :

    <!DOCTYPE html>
  • Un contenu HTML 5 bien formé

    Si votre site internet est en HTML5 (c'est la norme !), votre contenu HTML devrait respecter les normes du HTML 5, à savoir qu'il devrait respecter au maximum le format et la sémantique qui lui est associée.

    D'une part, cela signifie que votre HTML devrait être "bien formé", c'est-à-dire qu'il devrait respecter déjà ces quelques règles :

    • Le n° de version HTML doit être précisé.
    • Toutes les balises ouvrantes doivent être fermées.
    • Tous les attributs des balises utilisés doivent exister, c'est-à-dire faire partie du format HTML.
    • Les éventuels attributs personnalisés doivent soit faire l'objet d'une inclusion de schéma XML ou de DTD définissant ces attributs, soit être préfixés par "data-".

    Si ces quelques modestes règles sont respectées, votre site peut normalement être "certifié W3C", ce qu'on peut tester sur le site https://validator.w3.org/.

    D'autre part et surtout, le HTML 5 impose de nombreuses règles sémantiques. Cela signifique les balises employées doivent être utilisées à bon escient, à savoir en tenant compte de la signification associée à chacune d'entre elle. On doit en conséquence utiliser les balises de la manière prévue.
  • Un titre à chaque lien

    Tous les liens internes de votre site internet doivent préférablement avoir un titre (attribut "title"). Les liens pointant vers une même ressource doivent de préférence avoir le même titre, du moins des titres similaires. Google utilise l'attribut "title" des liens comme source de mots-clefs, afin de classer la cible du lien.

    En fait, les liens qui devraient toujours avoir un titre sont exactement ceux dont le texte n'a pas de rapport avec la page visée. Exemple : un lien "cliquer ici".

    Egalement, Google cherche à déterminer si le maillage de votre site internet est cohérent, c'est-à-dire si la navigation de page en page, formant ce qu'on appelle un graphe, est logique. Par exemple, vous êtes en train de lire un article sur le référencement. De ce fait, cela n'aurait aucun sens (sémantique) que je vous propose un lien vers un site de fruits et légumes...
  • Un contenu alternatif sur vos médias

    Les images de votre site internet doivent posséder un contenu textuel alternatif (attribut "alt") et préférablement un titre. De même, vos vidéos et vos sons doivent posséder un contenu textuel ou html alternatif.

    Sur les médias, l'attribut "title" n'a pas grand interêt en termes de référencement. Il peut en revanche en présent un pour l'utilisateur, si "l'infobulle" qui s'affiche permet de l'aider dans sa navigation.

    Quant à l'attribut "alt", il constitue une représentation textuelle de l'image. L'attribut "alt" est utilisé pour référencer l'image dans Google Images. A cet égard, on notera que sont également utilisés : l'URL de la ressource (image, vidéo ou autre) et les mots situés avant et après cette ressource. Finalement, le contenu alternatif est celui qui s'affichera dans le cas où le navigateur ne parvient pas à afficher la ressource.
  • Des contenus structurés

    Vos pages web doivent être structurées et faire usage de titres et sous-titres à plusieurs niveau (balises "h1", "h2" et suivantes). Comprenez que les moteurs de recherche utilisent de multiples mécanismes de pondération lors de l'indexation des contenus. Il est ainsi toujours intéressant pour vos mots-clefs de faire les gros titres.

    Il ne devrait y avoir qu'un titre de niveau 1 (h1) par page web ! Un titre de niveau n devrait se situer en-dessous un titre de niveau n-1.
  • Mettre en relief les mots-clefs dans vos paragraphes

    Lorsque vous rédigez vos textes, il convient non seulement de trouver les bonnes formules mais encore d'utiliser les balises de mise en relief (balises "strong" et "em") pour valoriser le vocable important, c'est-à-dire les mots-clefs.

    S'il s'agit uniquement d'attirer l'attention du lecteur sur un mot, une expression ou une phrase ne contenant pas de mots-clefs, vous devriez utiliser soit du CSS ou soit les balises de mise en forme, c'est-à-dire les balises "u" (souligné), "i" (italique) et "b" (gras).

    Certes, par défaut, la balise "strong" met en gras et "em" en italique, toutefois leur signification est toute différente !
  • Séparer mises en forme et contenus

    Rappel d'une règle élémentaire... La mise en forme (CSS) doit être définie au sein de feuilles de style séparées. L'emploi de balises "style" ou d'attributs "style" est à proscrire. On peut classer cette règle dans la top liste des règles à respecter. De plus, de telles mises en forme détériorent de manière catastrophique le ratio texte/code. Une grossière pénalité pour votre référencement et une erreur de débutant en quelque sorte !
  • Séparer javascript et contenus

    Autre rappel élémentaire... Pas de JavaScript dans vos liens. Pas de JavaScript au sein de vos pages web. Il faut utiliser scripts rédigés dans des fichiers séparés. D'une part, le JavaScript "inline" est une solution très "laide", d'autre part cela déteriore à vite grand V votre ratio texte/code. Une grossière pénalité pour votre référencement et une erreur de débutant.
  • Multiplier les liens internes

    En principe, toutes les ressources de votre site internet doivent être accessibles via un lien sur votre site, et vraiment un lien (balise "a"). Typiquement, toutes les pages du site internet doivent pouvoir être visitées en parcourant votre site, ce sans quoi, des pages web risquent de ne jamais être indexées ou d’être difficilement indexées.

    A minima, l'URL de toutes vos pages web et autres ressources à indexer doivent figurer dans votre ou vos sitemap(s).

    De fait, l'intérêt de multiplier les liens internes réside dans le fait que cela permette de maintenir les internautes sur votre site. Le temps que passe vos lecteurs sur votre merveilleux outil de communication est un critère de popularité. Et votre mesure de popularité influe sur votre visibilité.

    On notera que lorsque les internautes viennent sur votre site internet et zappent immédiatement, on parle de rebond. Le taux de rebond, à savoir le pourcentage d’internautes « zappant », est un critère de popularité. Plus il est bas, mieux c'est !

    Remarque : depuis quelque temps, Google semble compter comme liens les redirections JavaScript. Peut-être y a-t-il un lien avec la technologie AngularJS développée par Google... ?
  • Un bon ratio text/code

    Vos contenus textuels doivent être importants au regard du contenu HTML de la page web. De fait, visez un objectif de 20% (de texte). Il y a de nombreuses petites astuces qui nécessiteront l'intervention d'un développeur web compétent.

    Exemple d'économie : Eviter les noms de classes de style à rallonge et/ou éviter de surcharger l'attribut "class" des balises. Très malheureusement, c'est la spécialité des CMS... Il est évident que, pour le développeur informatique, des noms clairs sont très avantageux. En vue d'un bon référencement, on choisira dont des noms de classes de style clairs mais concis.
  • Privilégier le référencement local

    Cela signifie que vos pages web doivent s'adresser aux localités que vous ciblez : des villes, des départements, des régions. Essayez autant que faire se peut d'intégrer ces localités à vos positionnements et donc dans vos mots-clefs.
  • Multiplier les contenus

    Non, vous ne serez pas premier de par la création d'un site internet de 5 pages ! A la limite, c'est un début. Il en faut bien un... Un travail de rédaction s'impose alors. Il faut ensuite multiplier les contenus de façon non seulement à vous positionner sur de nouvelles recherches mais encore de manière à proposer des contenus répondant précisément à des positionnement souhaités.
  • Bonne orthographe

    Oui, les moteurs de recherche vont jusque-là. Soignez bien votre orthographe !
  • Citer vos sources

    Si vous citez un auteur quelconque et/ou utilisez des extraits de documents tiers, le plagia n'est pas très apprécié. Précisez l'auteur ! Citez un texte avec la balise "blockquote", présentez un extrait avec la balise "figcaption", précisez l'auteur au sein d'une balise "cite" accompagnée d'une balise "a" ou plus simplement au moyen d'un lien "a" ayant l'attribut rel="author".

Le fonctionnement du site



  • Eviter les doublons de contenus

    On parle de duplicate contents, à proscrire ! Les copier/coller et autres mauvaises gestion de navigation conduisant à la présences de plusieurs URL pour un même contenu sont à éviter absolument !

    Remarque : si deux URL pointent inévitablement vers le même contenu, ces deux contenus devrait avoir la même URL canonique.
  • Eviter le chargement dynamique de contenus référencés

    Les chargements "asynchrones" de contenus sont à proscrire. La plupart voire la totalité des contenus référencés d’une page web ne seront pas indexés. Autrement dit, si votre page est chargée entièrement dynamiquement (en AJAX), Google l'assimilera potentiellement à une page vide.

    Remarque : lorsqu'un site est totalement dynamique (exemple : site AngularJS), le seul paliatif consiste à créer des captures statiques des pages web dynamiques (des screenshots) et à les renvoyer aux crawlers en lieu et place des pages dynamiques. Ce n'est pas génial mais a priori le mieux qu'on puisse faire...
  • Rédiger ou générer un sitemap

    Le sitemap d'un site internet est destiné à contenir l'ensemble des URL (chemin vers vos pages web et autres ressources) relatives aux contenus web qui sont à référencer. Afin de faciliter l'indexation des nouveaux contenus du site, il doit être soumis à Google régulièrement.

    Exemple de sitemap :

    <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://www.exemple.fr/actualites</loc> <lastmod>2020-11-28</lastmod> <changefreq>daily</changefreq> <priority>0.5</priority> </url> ... </urlset>
    Lorsque votre site comporte de nombreuses pages web, il devient pertinent de ne plus utiliser un unique sitemap mais un ensemble de sitemaps thématiques.

    Exemple d'index de sitemaps :

    <?xml version="1.0" encoding="UTF-8"?> <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <sitemap> <loc>https://www.exemple.fr/sitemap.articles.xml</loc> <lastmod>2020-11-28</lastmod> </sitemap> <sitemap> <loc>https://www.exemple.fr/sitemap.produits.xml</loc> <lastmod>2020-11-28</lastmod> </sitemap> ... </sitemapindex>
  • Rédiger ou générer un fichier robots

    Le fichier "robots.txt", à placer à la racine d'un site internet (exemple : http://www.exemple.fr/robots.txt), permet en outre de :

    • Spécifier l'URL du sitemap ou de l'index de sitemaps de votre site web afin que les crawlers, c'est-à-dire les "robots d'indexation" en l'occurent (exemple : Googlebot) puisse le trouver.
    • Spécifier les URL qu'un ou tout crawler ne doit pas indexer. Cette méthode peut être entre autres une solution afin d'éviter des problème de "duplicate contents".

    Exemple de fichier "robots.txt" :

    Sitemap: https://www.exemple.fr/sitemap.xml
    User-agent: *
    Disallow: /page/nepasindexer
  • Ne pas casser la navigation

    Une page web ne devrait jamais être isolée. Le maillage de votre site internet, c'est-à-dire le réseau de liens (on parle de "graphe") qui permet de circuler de page en page, ne devrait jamais être interrompu. L'on devrait toujours avoir accès au menu, toujours pouvoir revenir en arrière, etc.

    Remarque : notez que cet point a bien plus d'importance qu'un sitemap ! Premièrement, même en l'absence de sitemap, les robots d'indexations (crawlers) indexeront vos pages web en simulant une navigation de page en page. Le sitemap a dès lors un caractère un peu secondaire. Deuxièmement, et pour faire à peu près simple, une page web est d'autant plus pertinente qu'elle s'inscrit dans un maillage sémantiquement cohérent.
  • Concevoir des pages d'erreur personnalisées

    Lorsqu'un lien est mort (URL pointant vers une page qui n'existe pas), on parle d'erreur 404. Tout site devrait avoir une page d'erreur 404 personnalisée. Celle-ci ne devrait pas être isolée et donc ne pas casser la navigation. A savoir, l'internaute devrait pouvoir utiliser le menu du site afin d'accéder à un autre contenu ou, au minimum, devrait pouvoir rejoindre le site internet.

    Pareillement, un site devrait avoir une page d'erreur personnalisée pour les erreurs HTTP les plus courantes, l'erreur 500 par exemple (erreur serveur). L'objectif est une fois encore de na pas casser la navigation et d'améliorer l'expérience utilisateur.
  • Eviter les liens morts

    Au cours de la vie d'un site web, il arrive qu'on :

    • Supprime une page web ayant une certaine URL.
    • Qu'on modifie l'URL d'une page existante.
    • Qu'on verrouille temporairement l'accès à une pages web ou à une quelconque ressource web (fichier).
    • Qu'on refonde un site internet et qu'on utilise de nouvelles URL en lieu et place des anciennes.
    • Etc.

    Du contenu web ne peut alors plus être trouvé... Et l'on risque de tomber sur la célèbre "Erreur 404, page non trouvée". Cela ne devrait jamais arriver ! Selon le cas, il convient de mettre en place des redirections définitives (code 301 ou, désormais, 308) ou temporaires (code 302 ou, désormais, 307).

    L'absence de redirection peut aller jusqu'à faire perdre toute la popularité associée à un site internet. En effet, dans le cas d'une refonte de site avec changement de nom de domaine, l'absence de redirection définitive se traduit tout bonnement par la perte intégrale de la popularité associée à l'ancien site. Il s'agit presque là d'une erreur professionnelle !

Les performances



Les performances d'un site internet font également partie des critères de référencement.

Les performances d'un site internet exercent également une influence sur sa visibilité dans les résultats de recherche. Les pages web, du moins le contenu HTML référençable, devrait être chargé rapidement : en moins de 2 secondes, moins de 1 seconde si possible.

Remarque : par "chargement", on entend ici "téléchargement". Cela ne signifie donc pas que la page doit être intégralement affichée très rapidement. En effet, il est tout à fait admissible que tous les scripts JavaScript n'aient pas fini de s'exécuter.


Afin de se faire une idée approximative du temps de chargement, on pourra utiliser l'inspecteur de Google Chrome : Clic droit > Inspecter > Network > CTRL+F5.

Dès lors, il importe d'optimisez les temps de chargement. Pour ce faire, pas de secret, essentiellement des solutions techniques...

Tout d'abord, on peut chercher à minimiser la quantité de données à télécharger en vue du chargement complet d'une page web.

A cet égard, quelques bonnes pratiques :

  • Ajuster la qualité de vos médias

    Inutiles que vos petites icônes fassent 256x256 pixels... Inutiles que les vidéos soient toujours en HD, inutiles que de nombreux arrières-plan soient de grande qualité. Bref, pour chaque média, choisissez une qualité proportionnée à l'utilisation qui en est faite.

    Au besoin, conseillez vos usagers. Si vous travaillez sur un CMS, retravaillez vos médias avant de les mettre en ligne. Pour les non informaticiens, Photofiltre n'est quand même pas un outils incroyablement compliqué et devrait permet à quiconque de redimensionner convenablement une image ou d'en ajuster les DPI.

    Si vous utilisez un CMS, il existe de plus des plugins. Pensez-y !
  • Compresser vos médias

    Vérifiez bien que vous utilisez des fichiers compressés. On évite clairement les formats tels que BMP pour les images ou encore WMA pour les musiques...
  • Minifier vos feuilles de style CSS et les scripts JavaScript

    Les fichiers CSS sont truffés de caractères d'échappement (espace, retours chariots, etc.) voire, pour les développeurs éclairés, de commentaires. Il convient de minifier ces fichiers, c'est-à-dire de les compresser de par la suppression de tous les caractères inutiles.

    Comme les fichiers CSS, les scripts JavaScript sont truffés de caractères inutiles à l'affichage d'une page web. Retournez des fichiers compressés (minifiés) afin de diminuer la taille des fichiers et ainsi les temps de chargement.

    Pour ceux qui utiliserait un CMS, il existe des plugins (exemple : BWP Minify). Le résultat n'est en général pas fantastique mais c'est toujours ça...
  • Mettre en cache les médias

    Une fois qu'un média (image, son, etc.) a été téléchargé une première fois pas le navigateur, il est régulièrement dommage de le télécharger une seconde fois. Tel est le cas par exemple des icônes récurrente d'un site internet.

    Or, les navigateurs et les serveurs proxy sont capables de conserver des médias en cache si on leur propose de le faire. Dès lors, le navigateur par exemple chargera immédiatement le contenu dont il dispose en cache plutôt que d'émettre à nouveau une requête HTTP. Magique et efficace !

    Pour ce faire, il convient de bien utiliser l'en-tête HTTP "Cache-Control". En PHP natif, et en simplifié, cela pourrait donner quelque chose comme cela :

    // Chemin vers l'image à télécharger $fichier = 'chemin/vers/image.png'; // Propose aux navigateurs et/ou aux serveurs proxy de conserveur la réponse HTTP en cache header('Cache-Control: public'); // Si la ressource n'a pas été modifiée, on se contente juste de l'indiquer au navigateur ou au serveur proxy if($fichierNonModifie){ header('HTTP/1.1 304 Not Modified'); exit; // Dans le cas contraire, on est bien obligé de retourner toute l'image au navigateur ou au serveur proxy }else{ header('Content-type: image/png'); readfile($fichier); }


Ensuite, on peut chercher à minimiser le nombre de requêtes nécessaires au chargement complet d'une page. En effet, moins le chargement d'une page web requiert de requêtes HTTP connexes (fichiers CSS, Javascript, Images, etc.), plus on peut espérer qu'elle se charge rapidement.

Un maximum d'environ 50 requêtes devrait être très largement suffisant. Pourtant, nombreuses sont les pages du web peu optimisées qui requierent plus de 100 requêtes HTTP. Wouaaa !

Voici quelques pistes de réflexion :

  • Regrouper les feuilles de style CSS et les scripts JavaScript

    En plus de minifier les fichiers CSS et JavaScript, il est bon de les regrouper en un seul fichier, surtout s'il s'agit de fichiers qu'on retrouve sur toutes les pages. En effet, au lieu d'une requête HTTP par script, on n'aura alors besoin que d'une unique requête HTTP pour l'ensemble des scripts regroupés au sein d'un même fichier.
  • Bien utiliser les chargements asynchrones

    A l'aide des gestionnaires de dépendances JavaScript actuels (exemple : RequireJS), il devient très commun qu'un script JavaScript charge des ressources supplémentaires de manière asynchrone, c'est-à-dire de façon non bloquante. De fait, cela fait que le navigateur effectue une requête pour récupérer le script JavaScript initial, puis autant de requête que le script en demande, et ainsi de suite.

    Ce procédé, bien utilisé, est très intéressant et très efficace. Mal utilisé, il est pénalisant. En premier lieu, il faut éviter les exagérations. En second lieu, il convient de bien veiller à ce que cette méthode n'ait pas pas pour effet de bloquer la navigation.

    En somme, dans la mesure où les connexions internet haut débit actuelles sont performantes, l'envoi de requêtes HTTP non bloquantes pour récupérer des contenus connexes ou non référençables est une solution qui fait merveille.
  • Favoriser les chargements de scripts JavaScript asynchrones

    Si certains scripts JavaScript ne sont pas en soi nécessaires au chargement de la page web, il est bon d'éviter de bloquer le chargement de cette dernière. Si de plus ces scripts sont indépendants, ils peuvent être chargés de manière asynchrone, c'est-à-dire en différé sans bloquer le chargement de la page.

    Quant à ces scripts, pensez à utiliser l'attribut "async" de la balise "script" :

    <script src="/js/script-asynchrone.js" async></script>
  • Créer des planches d'icônes

    C'est tout bête mais très pertinent. Le réflexe : une icône = un fichier image. Et c'est un mauvais réflexe parce que, pour récupérer N images, il faut alors N requêtes HTTP.

    Au contraire, si l'on réalise une planche d'icône, c'est-à-dire un fichier image contenant tout un jeu d'icône, pour récupérer l'image correspondant à toutes les icônes, il suffit d'une unique requête HTTP.

    Bien entendu, il faudra faire un peu plus d'effort en CSS...

Au-delà de cela, rappelons que les pages web sont initialement générées côté serveur web, c'est-à-dire au moyen d'un programme, le site web à proprement parler, lequel peut par exemple être développé en langage PHP. Pour que le site web soit performant, reste encore à ce que les programmes côté serveur et la solution de développement utilisée soient efficaces.

Malheuresement pour les utilisateurs de CMS (WordPress, Prestashop, Joomla, etc.), ces solutions de développement sont très loin d'être efficaces et bien conçues. C'est joli, c'est pratique... Toutefois, c'est très souvent particulièrement mal développé et peu commode pour les développeurs. Pareillement, quant aux plugins des CMS, la qualité technique et les performances de ces derniers sont bien souvent "obscène".

Malgré tout, les CMS et leurs plugins sont bien trop pratiques et surtout déjà faits !

Encore une fois, avec les CMS, il faudra inévitablement se contenter. Après tout, on ne peut pas toujours avoir des choses d'une part pratiques et jolies pour les utilisateurs et d'autre part efficaces et pratiques pour les développeurs.

Les CMS, le meilleur compromis finalement inéluctable pour les sites de petite et moyenne envergure.

Pour ce qui est des solutions de développement hors CMS (exemples : Symfony, AngularJS/NodeJS, etc.), en particulière les plateformes web de bonne envergure, on pourra bien entendu procéder à des optimisation de performance très techniques mais non moins habituelles :

  • Optimisation de requêtes SQL.
  • Gestion de cache avancée.
  • Minimisation de la complexité algorithmique de certains programmes.
  • Etc.