Pour tout abonnement, recevez notre livre blanc “Réussir son blog”.
Divi est-il dommageable pour la performance d’un site WordPress dans Google ? Beaucoup de gens se posent la question. Et pour cause ! C’est un non-sens qu’un thème WordPress premium coûteux, qui compte des milliers d’utilisateurs, soit néfaste d’un point de vue SEO…
Malheureusement, rien n’est parfait dans la vie, et Divi ne fait pas exception à la règle. Comme bien d’autres thèmes premium soit dit en passant. 😉
Dans cet article, je vous passe en revue les différentes façons d’optimiser et de personnaliser le thème Divi pour qu’il soit plus Google friendly que lorsqu’il est utilisé avec sa configuration de base.
J’utilise Divi (Elegant Themes) depuis plus de deux ans. Personnellement, je trouve qu’étant donné que je dessers davantage des petites entreprises et travailleurs autonomes, Divi est un outil qui me permet d’économiser temps et argent, pour la création de sites simples, élégants et professionnels. Mais je constate surtout qu’il est, selon plusieurs témoignages de clients, le site builder le plus facile à comprendre pour des néophytes en la matière.
L’utilisation d’une ou plusieurs balises <h1> dans une même page ne fait pas l’unanimité chez les spécialistes SEO. Celle balise est généralement capitale puisqu’elle informe le lecteur et le moteur de recherche du sujet de la page web en question. S’il y en a plus d’une ou bien que vos titres ne sont pas descriptifs, les moteurs de recherche sont perdus (à part si vous utilisez bien la sémantique du HTML5, mais même là, il n’y a pas de garanties).
Peu importe de quelle école de pensée vous êtes sur ce sujet, le thème Divi ne vous laisse pas tellement le choix.
La section commentaires de chaque article de blog possède une balise <h1>, que vous l’utilisiez ou pas! Heureusement, c’est très facile à changer. Rappelez-vous que toutes balises doivent être structurelles, pas décoratives. Ainsi, <h3> est un sous-titre qui vient après <h2>, etc.
Voici comment changer la balise <h1> dans le thème Divi :
Depuis la sortie de Divi 4.0, vous pouvez utiliser le Divi Builder sur chaque élément de votre site. Auparavant, on ne pouvait modifier que certains templates de page en utilisant des mises en page ou du code personnalisé.
Cela signifie qu’on peut créer un template unique en utilisant le Divi Builder, et que celui-ci soit par la suite appliqué à chaque article de blog.
Dans votre tableau de bord WordPress, allez à Divi > Theme Builder et créez un nouveau template que vous appliquerez à tous les articles.
Pas besoin d’ajouter un en-tête ou un pied de page personnalisé si vous souhaitez que ce soit harmonisé avec le reste de votre site.
Choisissez l’option « Add Custom Body » puis construisez votre page comme vous le feriez habituellement avec Divi. Ajoutez le module « Post Content module » pour que cette section soit alimentée avec votre article.
Ajoutez le module de « Comments module » après le « Post Content » :
Dans la fenêtre de design, vous pouvez modifier le niveau de titre. Cet élément s’appelle « Comment Count Text ». Il est paramétré sur <h1> par défaut, il vous suffit de le changer en <h3>, <h4> ou <h5> dépendamment de votre hiérarchie de titres. N’oubliez pas de styliser les titres ou d’ajouter votre code CSS pour le personnaliser :
Si vous n’utilisez pas le constructeur pour éditer votre site web, vous pouvez facilement changer la balise des titres des commentaires en éditant directement le fichier comments.php.
Il est fortement recommandé de n’éditer que vos thèmes enfant, et de ne pas toucher au thème parent. Si vous éditez un fichier dans le thème parent, tout changement sera perdu à la mise à jour du thème. En utilisant un thème enfant, vous évitez que cela ne se produise et vous avez la liberté de personnaliser exactement comme vous le souhaitez.
Copiez le fichier comments.php dans le dossier de votre thème enfant en utilisant un logiciel FTP ou le gestionnaire (souvent cPanel) de votre hébergement.
Videz votre cache et vérifiez si le changement a été pris en compte en regardant le code source de la page à partir du navigateur web de votre choix.
Voilà quelque chose de rapide à modifier au besoin. Si vous avez ajouté des images en utilisant le constructeur de page plutôt que la galerie de médias, vous avez peut-être négligé le texte alternatif ; une erreur facile à réparer !
Pour vérifier vos modules d’images, allez à la fenêtre des paramètres avancés du module pour alimenter ainsi votre texte alternatif :
Cet aspect n’est pas spécifique à Divi. Selon Google, on devrait tout le temps créer une page 404 personnalisée pour un site web, peu importe le thème ou le CMS qu’on utilise.
Pourquoi ? Parce que 404 est utilisé pour une erreur. Cela signifie que l’URL à laquelle une personne essaye d’accéder n’existe pas et qu’elle n’a pas de redirection attribuée. De toute évidence, on veut éviter les erreurs 404 en maintenant nos sites à jour et en vérifiant régulièrement les liens. Cependant, au fur et à mesure qu’un site grossit, des erreurs 404 se pointent le nez à l’occasion.
L’une des pires choses à faire est de rediriger toutes les erreurs 404 à la page d’accueil du site, sans autre explication. Cela induit l’utilisateur en erreur : on s’attend à atterrir sur une page, mais on est redirigé autre part sans aucune explication. Si vous devez les rediriger, assurez-vous que c’est au moins sur une page similaire ou au contenu équivalent.
C’est également mêlant pour les robots de Google et pour les moteurs de recherche en général qui essayent d’explorer toutes les pages de votre site. Google a confirmé également qu’il examine aussi les pages d’erreur 404.
En personnalisant la page d’erreur 404, vous informez l’utilisateur que le contenu qu’ils recherchent n’est pas là. Cela vous permet aussi de les renvoyer ailleurs sur votre site. Heureusement, Divi offre quelques opportunités de construire une page 404 personnalisée.
En utilisant la même méthode que pour créer un template d’article de blog, vous pouvez utiliser le nouveau builder de Divi pour personnaliser la page d’erreur 404 de votre site web ou blog.
Dans votre tableau de bord WordPress, allez à Divi > Theme builder et créez un nouveau template que vous utiliserez seulement pour les pages 404 :
De nouveau, si vous n’utilisez pas le builder de Divi, vous pouvez modifier le fichier 404.php du thème parent Divi en le copiant dans le dossier du thème enfant.
Grâce à votre éditeur de code, vous pouvez personnaliser votre page 404 et la charger sur le client FTP ou dans le gestionnaire de votre hébergeur.
Le module de blog de Divi vous permet de personnaliser la façon dont vos articles seront affichés sur votre site. L’utilisation de ce module vous permet une quantité incroyable de personnalisations visuelles, tout comme la possibilité de fignoler ceux-ci en CSS.
Cependant, il existe un défaut majeur de SEO lorsque l’on utilise Divi : c’est l’élément de pagination.
Si vous utilisez ce module avec pagination (voir l’image), il ne s’agira pas de la pagination standard de WordPress.
Par défaut, WordPress crée des paginations de vos pages d’archives en utilisant cette structure URL :
Ce n’est pas ce que fait la pagination Divi. Cette dernière est en Ajax, pour générer du contenu de manière dynamique dans le navigateur : c’est plus rapide pour l’utilisateur mais plus compliqué pour le SEO.
Ajoutez un module de code quelque part en haut de la page que vous souhaitez utiliser :
Ajoutez le code suivant à ce module :<script>jQuery(function($) {$('div.pagination a').on('click', function(e) {e.stopImmediatePropagation();});}); </script>
Pour une solution plus complète qui concerne toutes vos archives de blog, de catégories, de dates, de tags et d’auteurs, vous pourrez mettre en place le code ci-dessus. Celui-ci doit être présent à chaque fois que vous utilisez le module de blog et que vous souhaitez une pagination non-ajax.
Dans votre tableau de bord WordPress, allez à Divi > Options du thème > intégration et collez ce code dans la section <head> :
Ce code empêche Divi de paginer avec Ajax, mais vous devez redéfinir la classe CSS du module du blog en lui-même :
Le nom de la classe est :disable_ajax
On peut y accéder dans la section « Avancés » des paramètres du module de blog :
Assurez-vous que toutes les instances du module de blog avec pagination ont cette même classe, et le tour est joué !
Le fil d’Ariane est super utile pour l’utilisateur et pour le SEO. On l’appelle ainsi parce qu’il forme un fil de suivi de la navigation pour les utilisateurs, ce qui aide énormément si votre site a une arborescence costaude.
Dans l’image ci-dessus, les pages Accueil, Blog et Digital, sont en effet des liens pour que l’utilisateur puisse revenir en arrière sur les différentes pages d’archives. Il existe plusieurs manières de créer un fil d’Ariane sur Divi.
Yoast est le plugin WordPress le plus populaire pour le SEO. Celui-ci inclut déjà une fonctionnalité de fil d’Ariane, mais encore une fois, vous devrez paramétrer celle-ci et l’ajouter manuellement à votre site.
Dans votre structure de thème, ce sera avec le fichier single.php (pour les articles de blog) ou bien page.php (pour les pages standards) de votre thème enfant. Voilà le code du fil d’Ariane pour Yoast :<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb( '<p id="breadcrumbs">','</p>' ); } ?>
Autrement, vous pouvez aussi vous servir du shortcode de Yoast dans le template de Divi :Accueil »
Si vous n’utilisez pas Yoast, il y a plusieurs autres manières de créer un fil d’Ariane pour Divi. Elegant Themes, les développeurs du thème Divi et d’une suite de plugins WordPress, a écrit un article de blog qui couvre ce sujet en détail. La première partie de l’article couvre ce que nous venons de voir pour Yoast, mais si vous descendez plus bas dans la page, vous trouverez la portion dédiée aux autres méthodes.
Quand on parle de SEO, veiller à ce que les pages de votre site soient adaptées aux smartphones. L’analyse des pages web de Google elle-même passe par le mobile, ce qui signifie que les robots du géant web visionnent votre site comme s’ils étaient sur un smartphone, pas seulement comme un ordinateur de bureau.
La majorité des thèmes préconçus (démos) de Divi et les outils de la bibliothèque Divi sont responsive, mais je trouve que parfois, l’affichage est un peu bizarre sur mobiles. C’est donc un paramètre important à vérifier.
Même si le thème est responsive, il faut vérifier l’affichage sur mobile. L’alignement sur la droite d’un module peut être très joli sur un écran d’ordinateur, mais être totalement inadapté à un écran de smartphone.
Vous pouvez également styliser des éléments individuels en utilisant des media queries pour différents appareils. Chose assez facile à réaliser avec le Divi Builder. Vous pouvez styliser les éléments différemment pour les ordinateurs, la tablette et les mobiles :
Cependant, vous ne devez le faire qu’avec les styles visuels de votre site et non avec les contenus eux-mêmes. Si vous choisissez de dupliquer des blocs avec les mêmes contenus, mais que vous ne faites que cacher certains d’entre eux selon les types d’écran, vous risquez d’avoir des problèmes de contenu dupliqué. En effet, les moteurs de recherche verront le contenu caché dans le HTML, ce qui entraînera une duplication accidentelle du contenu.
Le plus gros argument contre l’utilisation d’un outil comme Divi est généralement la vitesse de chargement des pages. C’est tout à fait vrai, mais c’est vrai aussi pour Elementor, WP Bakery (anciennement Visual Composer) et autres constructeurs de pages de WordPress.
À ce propos, je vous invite à lire mon article complet sur comment accélérer un site WordPress Divi.
Ni WordPress ni Divi ne vont générer un sitemap XML automatiquement. Vous devrez donc vous assurer que l’option est activée dans le plugin Yoast (ou tout autre plugin SEO). Soumettez ensuite celui-ci dans le Google Search Central.
Peu importe le thème WordPress que vous utilisez, Divi, Twenty Twenty-One ou n’importe quel autre, la qualité de votre contenu sera toujours l’un des facteurs (sinon Le Facteur) les plus importants pour le référencement de votre site.
WordPress, dans ses fonctions de base, n’offre pas de méta-description, de plan du site, de liens canonical, de schéma, ou d’autres fonctions de référencement auxquelles on pourrait s’attendre. Presque toutes ces fonctions doivent être ajoutées en utilisant des champs personnalisés ou un plugin tiers, tel que Yoast ou RankMath.
N’oubliez pas, par-dessus tous les points techniques mentionnés plus haut, vous avez besoin d’un contenu de qualité pour être bien classé et de solides connaissances techniques en matière de référencement. Combinées à un cadre WordPress robuste (tel que Divi), vous aurez de bonnes fondations pour la performance de votre site WordPress!
Abonnez-vous et recevez le meilleur du marketing digital
En bonus : recevez gratuitement notre guide pour réussir son blog
S’inscrire
Merci pour ce partage d’information très utile et intéressante. Une de mes connaissances utilise Divi pour la création de sites internet et il en est content jusque-là. Après, j’ai pu voir le résultat, c’est vraiment bien. Je tiens quand même compte des informations que j’ai pu avoir sur votre site, car j’envisage aussi d’utiliser Divi pour un projet à venir.
Votre adresse e-mail ne sera pas publiée.
Le meilleur de Webmarketing & co’m dans votre boite mail.
Grâce à notre parcours certifiant “Développer son activité avec le webmarketing” , vous serez complètement autonome dans votre stratégie emarketing !
Sylvain LEMBERT
Consultant-formateur
Notre parcours certifiant “Création et développement d’une activité de formation” vous donnera les clés pour développer votre activité de formateur.
Sylvain LEMBERT
Consultant-formateur
Depuis 2006, Webmarketing & co’m accompagne les entrepreneurs et professionnels du marketing à monter en compétence.
Abonnez-vous à la newsletter et recevez notre guide pour réussir son blog
ON A UN
CADEAU
POUR VOUS !
Vous souhaitez être au top de votre veille Webmarketing ? Abonnez-vous à notre newsletter et recevez gratuitement votre guide “Réussir son blog”.
Votre adresse mail
En cliquant sur “S’inscrire”, vous acceptez notre politique de confidentialité décrivant la finalité des traitements de vos données personnelles