Google a confirmé que les contenus masqués dans des accordéons ou des onglets voient leur poids diminué dans l’algorithme. Et certaines techniques pour masquer des contenus sont considérées comme violant les guidelines. Qui plus est, les règles vont changer avec le mobile first index. Nous ferons le point sur les bonnes pratiques pour masquer du contenu, valides en 2018. Intervenant : Kevin Lebars – Consultant SEO – Search Foresight

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

2. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
L’évolution de l’algorithme
2

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

4. 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 ?

5. 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

6. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Comment cacher du texte ?
Les méthodes

7. 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».

8. 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

9. 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 ?
??
??
? ?
?
?
? ?
?
?
?
?

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

11. 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.

12. 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

13. 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 !

14. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Mettons nous en situation
14

15. Le Cloaking
Ce que Google voit
<H1>Titre H1</H1>
AccueilFilD’Ariane
Ce que l’utilisateur voit
<H1>Titre H1</H1>
AccueilFilD’Ariane

16. Les boutons JS & les accordéons
Ce que Google voit (plus ou moins)
<H1>Titre H1</H1>
AccueilFilD’Ariane
Ce que l’utilisateur voit
<H1>Titre H1</H1>
AccueilFilD’Ariane
Nous avons du texte visible
quand je clic sur le
Chouette !Chouette !

17. Avec du CSS : Display None (Cas abusif)
Ce que Google voit
<H1>Titre H1</H1>
AccueilFilD’Ariane
Ce que l’utilisateur voit
<H1>Titre H1</H1>
AccueilFilD’Ariane
Je suis du texte en display:none
mais malheureusement, Google me
voit et si j’en fais trop, il risque de
ne pas être content.

18. Avec du CSS : Jouer avec les couleurs 1/2
Ce que Google voit
<H1>Titre H1</H1>
AccueilFilD’Ariane
Ce que l’utilisateur voit
<H1>Titre H1</H1>
AccueilFilD’Ariane
J’ai bien du texte, mais je
fais en sorte qu’il ne soit
pas visible

19. Avec du CSS : Jouer avec les couleurs 2/2
Ce que Google voit
<H1>Titre H1</H1>
AccueilFilD’Ariane
Ce que l’utilisateur voit
<H1>Titre H1</H1>
AccueilFilD’Ariane
J’ai bien du texte, mais je
fais en sorte qu’il ne soit
pas visible

20. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
1 autre astuce

21. 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»

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

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

24. En bref
Dè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