contenus masqués, un point sur les bonnes pratiques - petit déjeuner du 18 janvier 2018
Post on 22-Jan-2018
64 Views
Preview:
TRANSCRIPT
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
top related