Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeuner de Genève du 20 Juin

SEO – Votre priorité 2018
optimiser les performances de votre site Web
Actualités SEO, Content marketing et E-commerce, Google Shopping, Crawl…
1
@s4sight
Petit Déjeuner SEOSEA
Matinée Conférences
Les chantiers indispensables
à glisser dans votre roadmap 2018
Intervenant :
Philippe Yonnet - Directeur Général - Search Foresight
en partenariat avec

Les chantiers indispensables à
ajouter à votre roadmap 2018
2

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
4

Quel balisage pour quelles données ?
5
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
…
6

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

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
8

Oups j’ai fait mon site en full Angular JS !
Et je le regrette déjà
9
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
10
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
11

Créer des sites rapides à
télécharger
12

Juillet 2018
C’était déjà le cas sur Desktop
Mais pas sur mobile. Ce n’est même pas un
problème pris en compte dans le mobile friendly
test
Il a fallu attendre une plus grande fiabilité
des outils de mesure de la performance par
Google
Mise à jour des outils Pagespeed
https://webmasters.googleblog.com/2018/01/usi
ng-page-speed-in-mobile-search.html
La vitesse de chargement devient un critère de classement sur mobile
13

Pensez à vos utilisateurs d’abord
Avoir de meilleurs performances
dope la conversion sur mobile
Avoir de mauvaises performances
vous fait perdre des visiteurs et des
clients
Si vos concurrents ont des vitesses
de téléchargement plus élevées, vos
clients iront chez eux
Ne travaillez pas vos performances juste parce que Google le veut !
14

Vais-je être impacté ?
Les outils suggérés par Google pour savoir où
vous en êtes côté performance
Chrome User Experience Report
https://developers.google.com/web/tools/chro
me-user-experience-report/
Lighthouse
https://developers.google.com/web/tools/lighth
ouse/
Pagespeed Insights
https://developers.google.com/speed/pagespee
d/insights/
Seuls les cancres vont subir des pertes de position
15

Google propose beaucoup d’outils sur la perf
https://developers.google.com/web/funda
mentals/performance/speed-
tools/pdf/Infographic-
How_To_Think_About_Speed_Tools.pdf
https://developers.google.com/web/funda
mentals/performance/speed-tools/
Pour y voir clair, il y’a cette infographie
16

Impact : sur les positions SEO, et le quality score
17

Chantiers
Recherche mobile
Web mobile

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
19

Créer des pages AMP
20

Le contexte : des pages mobiles trop lentes
Le poids des pages mobiles ne cesse d’augmenter
La faute :
A des pages RWD mal conçues
A des pages mobiles conçues avec des frameworks et des standards conçus… pour le desktop

Et pour les sites éditoriaux, c’est pire
Le problème :
Les scripts de tracking
Les mouchards publicitaires
Les gestionnaires de bannières
La monétisation implique l’emploi
de scripts javascripts nombreux,
lourds et lents
Par ailleurs, ces sites présentent :
Pages avec beaucoup de contenus
Des images et des videos
22

Une lenteur qui fait fuir les internautes
A partir d’un load time de
2 sec, on perd un
internaute sur deux
Bref, le web mobile est
partiellement inutilisable,
car le chargement des
pages est trop lent !
Et ce n’est pas qu’un
problème de bande
passante, de 3G vs 4G
23

Les principes
Gains de
perfomance
X10
Code
allégé
Mise en cache
Pré rendition /
préchargement
chez Google

Un code sérieusement allégé
25
Une page AMP contient 5 fois moins de trackers en
moyenne qu’une page « normale », et un code 6 foix
plus léger.
Comment ?
Des balises HTML « lourdes » interdites
Une librairie javascript « couteau suisse » unique et
allégée

A quoi ressemble ce code ?
AMP c’est du HTML5
Mais un « sous ensemble » du HTML5
A droite : le code d’une page AMP ultra
simple
26

Un CDN dédié
Un CDN (content delivery network) est un
ensemble de serveurs :
• Conservant une version « en cache » de la page
• Et répartis partout dans le monde, près des utilisateurs
Google fournit le CDN dédié aux pages AMP
Remarque : la mise en cache systématique
rend la création de pages AMP entièrement
dynamiques « server side » impossible
Par contre, on peut créer des pages partiellement
dynamiques
27

SEO : attention aux doublons
La page AMP est un doublon quasi parfait du
contenu de la page « normale »
Il faut donc « canonicaliser » la page AMP
Lien link rel=canonical pointant vers le contenu
d’origine
Au départ, Google recommandait de pointer vers
la version desktop
Avec le mobile first index : la recommandation
reste la même !
Pourquoi ? Pour les autres moteurs !
28

Peut-on faire des pages AMP sa version mobile ?
Si vous déclarez l’AMP comme votre version
mobile via les rel=alternate, alors les pages
AMP seront votre version mobile
Sinon : vous n’avez pas de version mobile !
Pour le mobile first index, si vous n’avez pas de
version mobile déclarée, c’est la version desktop
qui sera indexée, pas la version AMP !
Tout à fait, mais attention aux balises rel=alternate
29

Les pages AMP :
Pourquoi les utiliser

Adopter l’AMP : parce que c’est plus rapide
Test fait en 2016 sur les pages
responsive du Guardian, comparé avec
la version AMP
Le score Google pagespeed passe de
57% à 94% !
L’amélioration de l’UX est réelle et spectaculaire

C’est VRAIMENT plus rapide
Source : Rannaa Zhou de Google, SMX West 2017
32

Et l’impact, c’est plus de conversions
33

VRAIMENT plus de conversions
Etude Wompmobile 2017
34

Et parce qu’il y’a un ranking boost !
Et donc un traffic boost parfois
35
Sur mobile, les carrousels AMP pour les news sont placés en
tête des résultats (position zéro)
Pour être présent dans ce carrousel, il n’est pas nécessaire d’être
indexé dans google news, il faut juste le balisage schema.org ad hoc et
des pages AMP
Evidemment, cela met en valeur les pages AMP vs les pages
« normales »
Le gain maximal est atteint si on est dans la première case du
carrousel

Indirectement, il y’a parfois un ranking boost
Deux exemples
Impact avec des cas de sites mobiles
AMP
Cause : probablement le speed boost
Un code plus SEO friendly ?
Mais avoir des pages AMP n’est pas un ranking factor
36

Il y’a aussi le « label » AMP sur les résultats
Question : quelle est la proportion
d’utilisateurs qui ont compris que les
résultats avec ce label s’affichaient plus vite
Pas d’étude sérieuse, mais ils sont visiblement
minoritaires
Notons que l’affichage du label n’est pas
stable, il y’a eu beaucoup de test and learn
depuis fin 2015
Test label bleu « instant »
en oct 2017
37

Et c’est vrai à l’international
Les carrousels AMP envahissent les versions internationales de google
38

De plus en plus de diffuseurs exploitent l’amp
Les principales plateformes qui exploitent l’AMP en dehors de Google :
Pinterest, LinkedIn, et Twitter
39

Quels sont les limitations de l’AMP ?
L’AMP est rapide car il n’embarque qu’un
certain nombre limité de fonctionnalités,
certaines balises, scripts ou façon de codées
sont volontairement interdites
Conclusion : tout n’est pas supporté en AMP
Au début : beaucoup de choses utiles voire
indispensables n’étaient pas disponibles
Mais aujourd’hui, toutes les briques utiles
sont dispo en AMP !
Possibilité de faire 100% d’un site éditorial ou
ecommerce en AMP
Mais au prix de certaines concessions
Changement d’outils de trackings, d’ad servers,
de régies, de systèmes de paiement, ou de
méthodes de conception
Il y’en a, de moins en moins gênantes, et plus vraiment bloquantes
40

Le nombre de sites AMP a explosé
4 milliards de pages AMP, 25 millions de domaines

Et les sites ecommerce s’y mettent
Le « traffic boost » est moins net que pour le site media
Le « conversion boost » est néanmoins intéressant
42

Pour en savoir plus :
http://www.ampproject.org
43

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
49

Passage au HTTPS
À chaque étape, les impacts peuvent être importants
En 3 étapes
50
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

Take aways
Dorénavant, travaillez à fond la version mobile de vos
sites,
Testez l’AMP et pensez aux PWA
(faites au moins un test, un POC)
Exploitez tout le potentiel des données structurées
Travaillez toute la chaine du SXO, et notamment les
positions zéro et attention à la qualité
Pensez performance, performance et encore
performance
Soyez la meilleure réponse possible à une recherche
d’un internaute !
Adaptez vous !
54

Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeuner de Genève du 20 Juin

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeuner de Genève du 20 Juin

Similaire à Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeuner de Genève du 20 Juin (20)

Plus de Peak Ace

Plus de Peak Ace (20)

Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeuner de Genève du 20 Juin