Quel impact de la césure sur le SEO ?

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.

Mot-clé Gloubladiamen

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. :-)

Mot-clé non indexé

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. ;)

Catégorie Référencement - Écrit par le 10/12/2013 - Article lu 1 407 fois - 9 commentaires

9 réflexions sur ce billet

Écrit par Djolhan
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.

Super étude et doublement :

- D'une part une solution pour éviter des justifications de texte douloureuses pour les yeux.
- D’autre part une question SEO de premier ordre.

Merci de vous y être collé !

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"

Écrit par Hervé
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.

Écrit par Le juge du site http://www.seo-muscle.com/
Le 11/12/2013 à 19h04

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.

Écrit par Tyseo du site http://www.tyseo.net/
Le 12/12/2013 à 13h10

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.

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 ;-)

Les commentaires de ce billet sont fermés

Haut de page