Le contenu caché avec l’arrivée du Mobile First Index

Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics

L’évolution de l’algorithme

2

Le SEO commence à prendre son importance dans les années 90

Les entreprises ressentent le besoin d’optimiser leur référencement.

Dans les années 2000 arrivent les notions de « white hat » & « black hat »

Google réagit et prend des mesures radicales pour éviter toute tricherie et revoit complètement son algorithme.

2011 : première apparition de Panda (qualité de contenu)

2012 : première apparition de Penguin (pénalisant les techniques de référencement abusif)

Pourquoi parle-t-on de « contenu caché » ?Faisons le point ! (la genèse)

Pourquoi ce sujet redevient tendance ?

Pourquoi parle-t-on de contenu caché ?

Pas encore en responsive ? Ne tardez pas !

Effectivement : On sait que le contenu caché sur Desktop est difficilement valorisable par Google. Mais qu’en est-il du contenu caché sur mobile ?

Si nous avons l’habitude d’intégrer des textes optimisés sur notre version desktop, cela pourrait très vite devenir encombrant sur une version mobile ou tablette, ce qui ferait fuir les utilisateurs.

Nous savons aussi que Google n’est pas vraiment fan du cloaking. Alors, comment respecter toutes ces règles à la fois?

Quelles sont les différentes méthodes, acceptées ou non par Google, et lesquelles nous permettent d’optimiser notre contenu ?

Quelle méthode privilégier ?

CSSCloaking JS

PushstateContent in tabLes accordéons

Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics

Comment cacher du texte ?Les méthodes

Le Cloaking Cloaking

Quelle méthode ?

- Le Cloaking, à ne pas confondre avec l’IP Delivery, est une méthode visant à présenter un contenu différent aux moteurs de recherche de celui vu par les utilisateurs «normaux».

Le CSS

Il existe plusieurs propriétés pour cacher du texte avec du CSS, la plus connue étant l’utilisation du « display: none» (non pénalisé sauf si abus)

Google a communiqué sur son support en ligne sur la dangerosité de certaines méthodes qui sont considérées comme étant contraires aux guidelines:

Voici celles qui sont pénalisées et considérées comme une méthode «black hat»

CSS

L’article complet ici

Le JavaScript n’a pas le même impact sur Desktop et Mobile

Les boutons «voir plus» ou «lire plus».. Sont très souvent appelés en JS.

Cela risque de poser problème sur Desktop, mais pas sur mobile.

JSLe JavaScript

Quelles sont les raisons pour que Google réagisse comme tel ?

??

??

? ?

?

?

? ??

??

?

Cacher du contenu avec du JS ? JS

Sur Desktop, le contenu devra clairement être affiché ! Sinon, il sera mal pris en compte par les bots de Google

Sur mobile, le bouton «lire plus» est toléré si :

- Le texte est totalement chargé en une seule fois.

- Le texte caché sur Mobile devra être clairement visible sur le desktop (sinon effet cloaking)

Content in tabs Content in tabs

Nous savons maintenant qu’un texte doit être clairement visible sur Desktop pour qu’il soit bien pris en compte.

Ici, l’onglet «Overview» étant directement ouvert lorsqu’on arrive sur la page sera bien pris en compte par les bots. Il n’en sera pas de même pour le texte à l’intérieur des autres onglets.

Les accordéons (Click to expand) Accordéons

Sur le même principe que les content in tabs.

Les grands titres seront pris en compte, mais pas le texte qui s’affiche à l’intérieur des

Une habitude à prendre

Pour s’assurer de la bonne prise en compte de votre contenu et à l’aide du module web developer, pensez à afficher vos pages désactivant votre JavaScript et Votre CSS.

La première règle à garder en tête :

"Tout ce que l'internaute voit, le moteur doit le voir, tout ce que

le moteur voit, l'internaute doit le voir."

On va jouer à un jeu !

Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics

Mettons nous en situation

14

Le Cloaking

Ce que Google voit

<H1>Titre H1</H1>

AccueilFilD’Ariane

Ce que l’utilisateur voit

<H1>Titre H1</H1>

AccueilFilD’Ariane

Les boutons JS & les accordéons

Ce que Google voit (plus ou moins)

<H1>Titre H1</H1>

AccueilFilD’Ariane

Ce que l’utilisateur voit

<H1>Titre H1</H1>

AccueilFilD’Ariane

Nous avons du texte visible quand je clic sur le

Chouette ! Chouette !

Avec du CSS : Display None (Cas abusif)

Ce que Google voit

<H1>Titre H1</H1>

AccueilFilD’Ariane

Ce que l’utilisateur voit

<H1>Titre H1</H1>

AccueilFilD’Ariane

Je suis du texte en display:nonemais malheureusement, Google me voit et si j’en fais trop, il risque de ne pas être content.

Avec du CSS : Jouer avec les couleurs 1/2

Ce que Google voit

<H1>Titre H1</H1>

AccueilFilD’Ariane

Ce que l’utilisateur voit

<H1>Titre H1</H1>

AccueilFilD’Ariane

J’ai bien du texte, mais je fais en sorte qu’il ne soit pas visible

Avec du CSS : Jouer avec les couleurs 2/2

Ce que Google voit

<H1>Titre H1</H1>

AccueilFilD’Ariane

Ce que l’utilisateur voit

<H1>Titre H1</H1>

AccueilFilD’Ariane

J’ai bien du texte, mais je fais en sorte qu’il ne soit pas visible

Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics

1 autre astuce

Le pushstate

Il existe une méthode pour segmenter notre contenu par onglet.

Sur l’onglet Nantes:

- URL : /nantes

- Title : «Search Foresight Nantes»

- H1 : «Search Foresight Nantes»

Le pushstate

Sur l’onglet Paris :

- URL : /Paris

- Title : «Search Foresight Paris»

- H1 : «Search Foresight Paris»

On recharge seulement un bout de la page en AJAX et On fait croire à l’utilisateur qu’il est toujours sur la même page.

Pourtant, regardez bien, tout à changé ! (Titlte, Hn, Description, URL)

Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics

Conclusion

23

En brefDès que possible, nous afficherons notre texte en clair !!! Sinon ::

Sur le mobile, du texte additionnel pourra être dissimulé derrière un bouton si celui-ci est ENTIÈREMENT visible sur Desktop, et ce sans mener d’action supplémentaire.

CSSCloaking JS

PushstateContent in tabLes accordéons