Audit SEO de Drupal et mise en œuvre des améliorations

Après le déploiement des nouveaux sites web de notre agence de développement Drupal – droptica.pl et droptica.com – à la mi-2016, nous avons décidé d'améliorer certains aspects liés à l'optimisation du contenu, à la vitesse de chargement des pages et au référencement. À la fin de l'année, nous avons réalisé un audit technique SEO Drupal, qui nous a permis de détecter un certain nombre de lacunes. Dans ce cadre, nous avons décidé de mettre en œuvre les solutions recommandées par Google. Pour effectuer l'audit, nous avons utilisé, entre autres outils, Google Webmaster Tools, LinkChecker, Alt Checker sur http://www.contentforest.com et GTmetrix.

Ci-dessous, vous trouverez une liste des changements que nous avons décidé de mettre en œuvre. Les plus importants et ceux ayant une portée plus étendue seront décrits plus tard dans cet article.

1. Vérification et modifications dans robots.txt
2. Ajout et adaptation d'un sitemap.
3. Optimisation de l'ordre et de la vitesse de chargement des fichiers js et CSS.
4. Mise en œuvre de href de langue entre les versions en PL et EN.
5. Vérification de la nouvelle version du site pour les liens brisés et inactifs.
6. Vérification des traductions et de la justesse des liens dans les versions en PL et EN.
7. Mise en œuvre d'un certificat SSL pour la version .com.
8. Ajout ou modification des meta tags, y compris canonique, shortlink et élimination des titres en double.
9. Systématisation des liens en ajoutant une barre oblique à la fin de toutes les URL.
10. Optimisation des photos ajoutées : nommage, ajout des balises alt manquantes, optimisation des tailles et types, chargement de photos différentes selon la résolution de l'appareil.
11. Amélioration de la vitesse de chargement des pages via l'utilisation de systèmes de fonctionnalités.

Sitemap.xml

L'une des premières choses qui ont été mises en œuvre dans le domaine du SEO a été l'adaptation et la mise en œuvre d'un sitemap. Nous avons utilisé le module XMLsitemap pour Drupal 8, malheureusement il est disponible uniquement en version alpha, et nous avons dû écrire notre propre correctif pour cela. Ce module nous a permis de créer un fichier sitemap.xml pour les entités et de définir leur priorité. Un sitemap bien conçu contient des informations sur toutes les adresses disponibles sur le site, telles que la date de la dernière mise à jour ou la validité du lien, et peut également inclure des données sur la version linguistique. En le mettant en œuvre, nous facilitons le travail des robots d'indexation. Vous pouvez en savoir plus sur les sitemaps sur https://en.wikipedia.org/wiki/Site_map

Optimisation de l'ordre et de la vitesse de chargement des fichiers js et CSS

Un problème courant avec les benchmarks de chargement des pages est la vitesse de chargement des fichiers CSS et JavaScript, qui sont souvent téléchargés depuis des sources externes. Il est bon de combiner des fichiers CSS et JS plus petits en quelques fichiers plus grands. Vous devez également toujours vous rappeler d'activer Aggregate CSS files et Aggregate JavaScript files dans /admin/config/development/performance dans l'environnement de production. Les utilisateurs plus avancés peuvent utiliser le module Advanced CSS/JS Aggregation, qui permet des options plus avancées. Si possible, les fichiers JavaScript doivent être ajoutés de manière asynchrone. Votre navigateur n'aura pas à attendre d'autres éléments jusqu'à ce qu'il télécharge les fichiers js. Si c'est possible, vous devriez charger JavaScript à la fin de la page plutôt que dans l'en-tête. Vous devriez également éviter d'ajouter des scripts globalement si vous ne les utilisez que sur quelques sous-pages. Cela devrait sensiblement accélérer la vitesse de chargement du site web et permettre à vos Google PageSpeed Tools d'obtenir un score beaucoup plus élevé.

Mise en œuvre de href de langue

Si vous avez un site web multilingue, comme nous, Google recommande la mise en œuvre du href de langue. De quoi s'agit-il? Cela signifie ajouter des liens vers les versions alternatives en langue, ce qui permet une indexation plus facile des sous-pages. Par exemple, vous devez ajouter ce qui suit dans la section HEAD :

Pour www.droptica.pl/o-firmie/
<link rel="alternate" hreflang="pl" href="http://www.droptica.pl/o-firmie/" />
<link rel="alternate" hreflang="en" href="https://www.droptica.com/company/" />

Pour www.droptica.com/company/
<link rel="alternate" hreflang="en" href="https://www.droptica.com/company/" />
<link rel="alternate" hreflang="pl" href="http://www.droptica.pl/o-firmie/" />

Suppression des liens inactifs

Après le déploiement d'un nouveau site web, la structure des liens change souvent également. Avant le déploiement, il est judicieux de sauvegarder l'ancien sitemap et de le comparer avec le nouveau. Si une des URL manque sur le nouveau site, il vaut la peine d'ajouter un nouveau lien vers un contenu similaire afin de ne pas perdre le lien dans Google. Dans Drupal, vous pouvez utiliser le module Redirect à cette fin, et il dispose d'un certain nombre de fonctionnalités utiles. Dans l'onglet admin/config/search/redirect/404/, vous pouvez voir la liste de toutes les pages 404 qui ont été visitées par les utilisateurs. Pour chaque 404, vous pouvez facilement ajouter une redirection - par exemple, 301 d'un lien inexistant vers un autre. Trouver et éditer les anciens liens cassés est une autre chose importante. De tels liens pourraient avoir été ajoutés sur un blog, dans des actualités, et dans de nombreux autres endroits. Pour les trouver, vous pouvez utiliser des outils en ligne tels que http://www.brokenlinkcheck.com/ ou des outils de bureau tels que LinkChecker. Ces liens devraient être redirigés si l'adresse du site a changé ou supprimés si le lien n'existe plus.

Optimisation des photos sur le site web

L'un des changements majeurs qui ont été mis en œuvre a été l'optimisation et l'amélioration de l'affichage et de la vitesse de chargement des photos et des éléments graphiques. En commençant par la systématisation des noms de fichiers, le schéma de nommage image1.jpg logo2.jpg a été remplacé par une brève description, et toutes les balises ALT manquantes ont été ajoutées là où c'était nécessaire. Un des outils qui peuvent être utilisés pour cela se trouve sur http://www.contentforest.com/seo-tools/image-alt-checker.

Nous avons essayé de compresser les images autant que possible. Si c'était possible, nous avons utilisé des jpg compressés au lieu de png - la quantité d'espace occupée par notre site web a chuté de manière spectaculaire. Ce qui est intéressant, dans certains cas, l'utilisation de png a donné de bien meilleurs résultats que d'aller avec des jpg. Tout dépend du type d'image. GTmetrix est un outil très utile pour mesurer ce genre de choses. Si votre site utilise des icônes ou d'autres petits éléments, l'utilisation de SPRITE est une bonne pratique. Cela permet à votre navigateur de cesser d'envoyer des requêtes pour 100 fichiers séparément et de télécharger un grand fichier contenant toutes les icônes à la place, et le CSS se charge de les afficher correctement. Vous pouvez en savoir plus sur sprite sur https://www.w3schools.com/.

La dernière chose qui vaut la peine d'être mentionnée à propos de l'optimisation des images est l'utilisation de l'attribut srcset. En HTML5, cela permet de physiquement charger un fichier différent si l'utilisateur consulte votre site web à l'aide de son téléphone et un autre s'il utilise un ordinateur avec un écran HD. Au lieu de télécharger une image 4K d'une taille de 2000 Ko, l'utilisateur téléchargera une version mini adaptée aux téléphones mobiles, d'une taille de, disons, 120 Ko.

Un exemple tiré de https://www.w3schools.com/

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Fleurs" style="width:auto;">
</picture>

Résumé

L'ancien adage dit que rien n'est éternel en SEO, c'est pourquoi un tel audit devrait être réalisé tous les quelques mois afin d'identifier les lacunes et d'introduire de nouvelles normes pertinentes. Les activités de SEO sur et en dehors du site apportent généralement des résultats après quelques semaines, voire quelques mois. Cela est parfaitement visible lorsque nous examinons le trafic sur notre site web.

Les pages vues pour Droptica.com. Le début du nouveau site web, le processus de changements en SEO et le nombre de vues dans le temps sont visibles. Effet final : 45% de vues en plus en seulement 2 mois.

Quelques semaines après la mise en œuvre, nous pouvons constater de légères baisses du nombre de visiteurs sur notre site web, peut-être en raison de certains changements dans le référencement et la structure des liens. Cependant, on peut noter que la mise en œuvre de changements axés sur le SEO a donné des résultats mesurables. Après environ 2 mois, nous avons constaté une augmentation visible du nombre de visiteurs uniques. Prenant mai comme référence, le nombre de visites en novembre/décembre a augmenté d'environ 45% par rapport à la période avant le déploiement du nouveau site web.

Et vous ? Quels outils utilisez-vous pour le SEO ? Partagez-les sur notre fanpage. Si vous voulez en savoir plus sur Drupal 8 et d'autres outils utiles pour concevoir des applications web, aimez-nous sur Facebook, où nous partageons des tutoriels, des guides et des faits intéressants sur l'industrie, participez à DrupalDay et DrupalCamp! N'oubliez pas de consulter notre blog - de nouveaux articles à venir bientôt!