Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet - Petit Déjeuner du 1er Février - Luxembourg

1
SEO – Votre priorité 2018
optimiser les performances de votre site Web
Actualités SEO, Content marketing et E-commerce, Google Shopping, Crawl…
1
BIENVENUE
@s4sight
Lux Future Lab, LuxembourgJeudi 1er Février 2018
Petit Déjeuner SEOSEA
Matinée Conférences
Search : les changements majeurs
annoncés en 2018
Actualité SEO SEA Chantiers indispensables pour 2018  Mobile first index  Content Marketing Crawl…
en partenariat avec

Programme de la matinée
Nous allons passer 3 heures passionnantes ensemble
2
Présentation
de l’agence
Actualité des moteurs
de recherche et du
référencement
(SEO & SEA)
PauseLes chantiers indispensables
à glisser dans votre
roadmap 2018
Comment tirer le meilleur
parti possible du content
marketing
@s4sight
Les étapes du
développement d’une
stratégie de content
marketing
Le mobile first index L’évolution des
crawls mobile
de Google…

Les chantiers indispensables à
ajouter à votre roadmap 2018
3

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
5

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

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

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
9

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

Chantiers
Recherche mobile
Web mobile

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

Il semblerait que ce soit devenu
un nouveau besoin primaire
15

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
16

Créer des pages AMP
17

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
19

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
20

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

Un code sérieusement allégé
22
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
23

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
24

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 !
25

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
26

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
29

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

VRAIMENT plus de conversions
Etude Wompmobile 2017
31

Et parce qu’il y’a un ranking boost !
Et donc un traffic boost parfois
32
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
33

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
34

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

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

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
37

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
39

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

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
46

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

Restons en contact
Philippe YONNET | CEO
philippe.yonnet@search-foresight.com
+33 1 74 18 29 40
Slideshare.net/S4sight
@S4sight | @Cariboo_seo
www.search-foresight.com
51

Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet - Petit Déjeuner du 1er Février - Luxembourg

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet - Petit Déjeuner du 1er Février - Luxembourg

Semelhante a Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet - Petit Déjeuner du 1er Février - Luxembourg (20)

Mais de Peak Ace

Mais de Peak Ace (20)

Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet - Petit Déjeuner du 1er Février - Luxembourg