Quel impact de la césure sur le SEO ?
Dans un souci d'améliorer tout ce qui peut l'être lorsque je code un site et particulièrement au niveau du CSS pour le confort des visiteurs, je me suis posé la question de savoir quel impact pouvait avoir la césure des mots sur le SEO ?
A priori aucun impact sur le SEO
D'après ce que j'ai vu dans le code source, je pense que l'impact était inexistant puisque aucune modification n'apparait dans la source du site. La modification est juste visuelle lorsque l'on consulte une page. Mais avant de déployer cette classe sur plusieurs de mes sites, j'ai préféré m'en assurer en réalisant un petit test.
J'ai donc repris un ancien article du blog sur lequel j'ai ajouté un paragraphe comportant au moins une césure comme le montre l'image ci-dessous. A noter que j'ai pris soin de faire cette césure sur un mot inventé pour l'occasion afin de voir rapidement la prise en compte de Google.
J'ai vérifié que le mot-clé choisi, en l’occurrence glouladiamen n'existait pas en me rendant sur Google. Impec, aucun autre tordu que moi n'a eu l'idée. :-)
Quelques minutes après, Google a pris en compte le mot-clé comme je le pensais sans tenir compte de la césure créée artificiellement via la feuille de styles.
Mise en application de la césure en CSS
Je vais donc pouvoir utiliser cette classe quand j'aurais envie sans qu'il y ait le moindre impact sur le SEO de mes sites. Maintenant, j'imagine que vous apprécierez que je vous explique comment la mettre en place ? Allez, c'est parti !
Dans un premier, assurez-vous que le langage est déclaré dans l'entête de votre site. Pour un site en XHTML, contrôlez la présence du code suivant :
<html xmlns="http://www.w3.org/1999/xhtml" lang="FR-fr">
En version HTML5, vous devriez avoir le code suivant juste en dessous la balise DOCTYPE :
<html lang="fr-FR">
Ensuite, il suffit de créer une classe en utilisant la propriété CSS hyphens pour gérer la césure comme suit :
.cesure { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: normal} Il vous suffit ensuite de l'appliquer sur toutes les zones de textes nécessitant la prise en charge des coupures de mots qui seront effectuées automatiquement par le navigateur. J'ai testé le fonctionnement sur Mac sur les 4 navigateurs dont je dispose : Firefox, Safari, Chrome, Opera.
Les deux premiers cités comprennent parfaitement la classe contrairement aux deux suivants qui ne l'appliquent pas. Tout s'explique par le nombre de langues prises en compte par les navigateurs. Firefox et Safari sont ce qui se fait de mieux pour gérer les césures.
Quant à Internet Explorer, la prise en compte se fait à partir de la version 10 d'après ce que j'ai lu lors de mes recherches. Ne possédant pas ce navigateur, je n'ai pas pu le vérifier mais je vous fait confiance pour le faire à ma place.
Je vous laisse vous amuser à mettre cette fonctionnalité en place. Enfin, si vous le voulez. ;)
9 réflexions sur ce billet
Le 10/12/2013 à 15h03
Merci pour ce petit test, c'est toujours bon à savoir. Y compris l'astuce CSS.
Pour ma part, je laisse le navigateur faire son retour à la ligne, mais j'imagine que dans certains cas, c'est bien utile.
Le 10/12/2013 à 21h14
S'il semblait évident à priori qu'une modification via CSS de l'affichage du texte n'impacte pas le SEO (mais il était intéressant de le prouver, parce que les évidences ne reposent souvent que sur du vent, et qu'il est bon de les remettre à plat de temps en temps, merci donc pour l'exercice), j'aimerais savoir si vous pourriez mener la même expérience avec des césures mises en place côté serveur avec le soft hyphen du HTML (), ainsi peut-être qu'avec un simple tiret ?
Bon, j'avoue que la question ne m'empêchait pas de dormir la nuit. ^^
Mais en effet, comme dans le code il n'y a aucune coupure, il semble tout à fait logique que Google le lise tel quel.
Merci en tout cas pour la petite astuce CSS ça peut servir, notamment comme le signale RSW pour rendre le texte justifié un peu plus joli.
Intéressant ton test Hervé, est-ce que tu as testé ce que ça donnait dans "aperçus instantanés" Webmaster Tools ?
Visiblement la page ressort aussi sur "glouladia-men" en expression exacte (avec guillemets) mais sur "glouladia men"
Le 11/12/2013 à 14h53
@Djolhan, RSW : merci ;)
@Mancko : seule l'utilisation via le CSS m'intéressait dans le cas de l'étude. Je n'ai pas le temps de tester côté serveur.
@François : moi aussi, mais j'ai préféré m'en assurer avec un petit test.
@Antoine : c'est étonnant que le mot-clé apparaisse dans les résultats avec le tiret puisque celui-ci n'apparait pas dans le code source, ni lors du test dans GWT pour voir le site comme le voit Googlebot. Mais bon, à la limite tant mieux je dirais.
Merci pour le test. Ça confirme ce que je pensais déjà mais je suis trop fainéant pour aller faire le test moi même. Et puis je manque de temps surtout en ce moment.
Je m'étais posé une question proche non pas à cause de la césure mais du text-overflow: ellipsis; disponible en CSS. Et j'étais arrivé à une conclusion similaire.
Le 12/12/2013 à 13h40
Au moins le test est fait et approuvé par Hervé, ça peut toujours être utile une petite class CSS, merci à toi Mac Gyver du css. Installe I.E c'est le mal absolu des navigateurs ;-)
La création de site Internet sur mesure est le coeur de métier de l'agence web Infini'click.
D'autres prestations sont également proposées, découvrez-les !
- Tutoriel : installer un serveur Debian (wheezy)
- Tutoriel : Installer un certificat SSL
- Piwik : monitorez tous vos sites discrètement
- Tutoriel Paypal : Intégration et configuration du paiement en ligne
- Tutoriel PayPlug : intégration au panier d'achat
- Référencement des images : l'état de l'art
- Des onglets en CSS avec JQuery
- Gildas le 04/03/2022 à 18:00
Nop j'ai que le require('fpdf.php) ; Mais pas... - Hervé le 04/03/2022 à 17:58
Gildas Tu n'appelles pas de fichier externe via un... - Gildas le 04/03/2022 à 17:50
merci de ton retour rapide, effectivement dans ma... - Hervé le 04/03/2022 à 17:45
Bonjour Gildas Effectivement, 8 ans ça fait un bail.... - Gildas le 04/03/2022 à 17:37
Bonjour Hervé, Bon j'arrive 8 ans après la... - Olivier le 16/01/2022 à 23:09
C'est clair que les actions réalisées ne correspondent...