Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille

Les chantiers indispensables à
ajouter à votre roadmap 2018
1

Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Ajouter des données
structurées sur vos pages

Les moteurs sont dépendants des balisages
schema.org
Ces balises sont devenues nécessaires pour être visibles
3

Quel balisage pour quelles données ?
4
Pour savoir ce qui est supporté par Google :
• https://developers.google.com/structured-data/
• En évolution permante (notamment pour Json.LD)
Les microformats
(obsolètes)
Les formats « web
semantique »
RDFa
Les microdata
(microdonnées)
pour le html 5
(schema.org)
Le Json.LD !
(nouveau)

Où apparaissent ces « données structurées »?
Résultats « produits »
Articles
Recettes de cuisine
Videos / films
Evènements
Résultats locaux
Avis
Notes
…
5

Faire indexer votre contenu
généré en javascript
6

Faire indexer votre contenu en ajax
Prise en compte différente à partir de mai
2018 des urls en #!
Reco de Google, utiliser la méthode
pushstate en HTML5
Démo sur le site de SF
http://pushstate.search-foresight.com
Ou en framework javascript
7

Oups j’ai fait mon site en full Angular JS !
Et je le regrette déjà
8
Javascript activé Javascript désactivé
<body ng-controller="appController as app"
id="appController">
<a href="{{pathMap._home._hash}}"> </a>
<a id="triggerAutoRefreshTag"
onclick='angular.element("#appController").scope().autoRe
fresh(location.hash);'></a>
<app-head></app-head>
<app-head-mini></app-head-mini>
<div class="container main
{{app.isCurrentContext(pathMap._phoneDetails._formated
Hash) ||
app.isCurrentContext(pathMap._hotspotDetails._formated
Hash) ? 'phonedetails' : ''}}">
<app-navigator></app-navigator>
<app-title></app-title>
<banner></banner>
<app-container></app-container>
<store-container></store-container>
<phone-container></phone-container>
<support-container></support-container>
<plan-container></plan-container>
<as-container ng-if="appName=='spp'"></as-container>
<familyplans-container ng-
if="appName=='spp'"></familyplans-container>
<checkout-container></checkout-container>
<page></page>
Euh … où est le contenu ?

Rendre ces sites crawlables et indexables
Le contenu est parfaitement visible pour Google
C’est possible, mais pas simple
9
Et pourtant le code téléchargé ressemble à ça :
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div class="wrapper">
<div ng-include="'app/layout/shell.html'"></div>
<div id="splash-page" ng-show="showSplash">
<div class="page-splash">
<div class="page-splash-message">
</div>
<div class="progress progress-striped active page-progress-bar">
<div class="bar"></div>
</div>
</div>
</div>
</div>
<script src="rsc/js/lib-adc3d5f6d9.js"></script>
<script src="rsc/js/app-f84e7b0c4f.js"></script>
</body>
</html>

La reco : coder en JS côté serveur
Code isomorphe : le même code peut être
utilisé côté navigateur, côté serveur, ou
n’importe où entre les deux
Avec ReactJS ou HapiJS, on peut donc
générer le HTML avant de l’envoyer au
navigateur
Il devient possible de créer des sites webs
avec des frameworks JS, sans générer de
problèmes avec le SEO
Attention : mal utilisés, ces frameworks JS de
dernière génération peuvent poser les mêmes
problèmes que ceux expérimentés avec la
première génération
Server side rendering
10

Chantiers
Recherche mobile
Web mobile

« Nous sommes tous hyper connectés à notre mobile »
12

Il semblerait que ce soit devenu
un nouveau besoin primaire
13

S’adapter en mobile first index
Si le site est responsive :
Impact minimum
Rendre le site compatible avec les
nouvelles exigences mobiles :
Pubs intrusives
Performances
Etc.
Si le site est une version mobile en
m. ou du dynamic serving
Plusieurs points d’attention
Risque d’impact négatif sur les
classements
On en reparle en détail tout à l’heure
14

Créer des pages AMP
15

On en reparle tout à l’heure

Les progressive Web Apps

Qu’est ce que le Progressive Web Apps?
Site mobile + Application
• Les principaux avantages:
➢ Un site web qui fonctionne sans connexion (comme une app)
➢ Une site référençable
➢ Un excellent temps de chargement
➢ Un support interactif avec des notifications (comme une app)

Et Google recommande…
Le mix du PWA et l’AMP
Google recommande de cumuler les deux technologies :
AMP + PWA = #PWAMPAccelerated Mobile Pages

Le meilleur des deux mondes
PWAMP

HTTPS :
Sécurisez vos données

Évolution des sites en HTTPS
Nous atteignons 75% des sites qui sécurisés sur les 30 derniers jours
Mozcast : Outil permettant de suivre l’évolution des SERPS
22

Passage au HTTPS
À chaque étape, les impacts peuvent être importants
En 3 étapes
23
Choix du
certificat
MAJ
URLs/Ressources
Plan de
redirection

HTTP2

HTTP2
Le protocole pour la performance

HTTP2
C’est facile à dire!
1) Toutes les technologies ne le supportent pas: Magento 1, NGNIX, Prestashop
<1.6
2) Passer au HTTPS
3) Revoir les optimisations faites en protocole HTTP1 (regrouper les appels JS et CCS par
exemple)
4) Se limiter en termes de domaine appelant des éléments de construction de la
page
5) Avoir des équipes techniques agiles et compétentes

Tendances actuelles
Le nombre de recherches sur mobile a dépassé depuis 2016 les recherches sur le desktop.
Montée en puissance du mobile
27

Se préparer au
Mobile First Index

Déploiement en cours
Google commence avec les
sites pour lesquels il sait que
l’impact va être minime (sites
responsive)
Combien de temps va
prendre la bascule ?
On n’en sait rien, et Google
avance « sur des œufs »
Déploiement prudent et progressif
29

Comment savoir si on a basculé ?
30
Déploiement du Mobile First Index
Méthode 1 : regarder ses logs
Si Googlebot mobile crawle plus de
pages que Googlebot mobile : le site a
basculé, ou est en train de basculer
Seule méthode possible si le site est
responsive
Méthode 2 : regarder ses snippets si
les balises sont différentes (site en
m.)

Prérequis avant la mise à jour
Avoir un contenu identique
Le contenu visible sur desktop doit être 100% présent sur mobile : que ce soit pour les robots ou pour
les utilisateurs, les contenus des deux versions doivent être les mêmes. Les systèmes de cloaking sont
bien évidemment à bannir.
Principe de base : contenu
31

Contenu masqué : onglets et accordéons
Le contenu caché mais potentiellement visible dans une
page (onglets, accordéons, roll over...) sera traité, lors du
lancement du projet Mobile First, comme du texte visible
"normal". Le seul impératif est que l’internaute doit
pouvoir découvrir le contenu par un clic.
Confirmation de John Mueller via un hangout (juillet
2017)
Rappelons qu'aujourd'hui, ce texte potentiellement
visible est indexé, mais avec un poids moins fort. Cette
perte de poids n'existera donc plus avec Mobile First.
Déclaration officielle Google sur le contenu caché
32

Autorise le crawl de la version mobile
Les ressources ne doivent pas être bloquées aux Googlebot
mobile : en effet, il est courant d’avoir des sites bloquant les
fichiers JS et CSS. Cela fait quelque temps que Google nous
invite à ne pas le faire. C’est encore plus important d’éviter
de le faire surtout si ces fichiers statiques sont utiles à
l’affichage de votre rendu mobile.
Principe de base : crawl
33

Pas de changement notable à prévoir pour l’implémentation des balise rel=canonical (version
desktop) et les alternate (vers mobile)
Google vous invite à conserver le système du balisage et des canonicales (vers la version desktop) et
alternates vers la version mobile ne changent pas
cas des sites mobiles dédiés : m.domaine.com ou mobile.domaine.com
Principe de base : site mobile dédié
34

Auditer votre site mobile avec la Search Console
Inscrivez votre site mobile pour être averti des dysfonctionnements (erreurs de crawl, bot bloqué,
actions manuelles, problèmes ergonomiques ou microdatas.)
Principe de base : site mobile dédié
35

Optimisez vos performances
Voici les 3 critères de votre site mobile que vous devez évaluer
Time to First Byte < 200ms
Temps de téléchargement HTML < 500ms
Temps de rendition < 2 secondes
Principe de base : temps de chargement
36

« Google speed update »
Déjà vrai sur desktop
Pas encore pris en compte sur mobile
Pb de mesure
Impact attendu plus grand sur mobile
https://webmasters.googleblog.com/2018/0
1/using-page-speed-in-mobile-search.html
La performance en usage mobile devient un critère de classement en juillet 2018
37

Les Micro-datas un TO DO à avoir
Si vous avez omis le balisage sur mobile, alors qu’elles sont bien implémentées sur desktop, vous perdrez
vos résultats enrichis dans les SERPS (résultats de recherche).
Si vous êtes en version responsive, vos micro datas sont implémentés, pas besoin de faire deux fois le
travail.
Principe de base : données structurées
38

Pas de changement notable à prévoir aussi pour l’AMP
Spécificité > site mobile dédié
Principe de base : AMP
39

Linking externe
À date, nous avons peu d’information de
la part de Google ! On sait simplement
que les liens s’obtiennent rarement sur
une version mobile d’un site. Les
fondements de l’algorithme seront
toujours concentrés autour de la
popularité et donc de celle acquise sur
votre version desktop.
Si vous êtes en responsive et donc avec
une même URL pour la version mobile et
desktop, ce point est déjà traité.
40

Êtes vous prêt avant la
bascule ?

Prêt avant la bascule Mobile First Index ?
Google fournit un test dans les SERPs
https://search.google.com/test/mobile-friendly
42
Site mobile friendly

Prêt avant la bascule Mobile First Index
Les sites sans version mobile:
Si vous êtes sans version mobile, Google positionnera votre version desktop avec le crawler Googlebot
mobile. Il recommande d’ailleurs de ne pas sortir en urgence une version mobile non terminée. Prenez le
temps de bien faire les choses.
Focus on the users robots :
Une fois n’est pas coutume, Gary Illyes nous préconise de développer ses titles, H1 et tout contenu pas
seulement pour les utilisateurs, mais aussi pour les robots. Pour info, la balise title sur mobile est plus
longue puisqu’elle se place sur deux lignes. On peut donc aller jusqu’à 70 caractères (vs 65 caractères sur
desktop)
43
Quid si mon site n’est pas mobile friendly ?

44
@s4sight Slideshare.net/S4sight
Suivez notre actu & nos prochains events
Merci.
Des questions ?

Prochains événements
45
Webconférence
Comment exploiter les possibilités de la
nouvelle Google Search Console ?
le 15 Février
Matinée Conférence SEO-SEA /
Petit déjeuner
le 22 Février – Lille

Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Ähnlich wie Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille

Ähnlich wie Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille (20)

Mehr von Peak Ace

Mehr von Peak Ace (20)

Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille