Slides présentées lors du Petit Déjeuner Search Foresight du 19 novembre 2015.
Google, AMP et SEO
Google a annoncé le 7 octobre dernier une nouvelle spécification pour créer des pages rapides pour un affichage sur Smartphone : le projet AMP (accelerated mobile pages).
Qu'est-ce que c'est ? comment ça marche ? quel est l'impact pour le SEO ? Faut-il se précipiter à adopter cette nouvelle norme ?
Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes
Accelerated Mobile Pages : Quel impact sur votre SEO ?
1. QUEL IMPACT SUR VOTRE SEO ?
ACCELERATED MOBILE PAGES
- 1 -
PETIT DEJEUNER SEO
SEARCH FORESIGHT
10EME ÉDITION
PARIS LE 19 Novembre 2015
9h-12h
2. / Adapté pour les news et les pubs, mais pas que…
- 2 -
Pages AMP
3. / Une réponse à Facebook Instant Articles ?
3
AMP : le projet en bref
Accelerated Mobile Pages : une initiative Open Source pour
Promouvoir un standard pour construire des pages allégées, optimisées pour le mobile
Mettre à disposition un CDN dédié pour accélérer encore l’accès à ces contenus
Et proposer une diffusion large de ces contenus par des acteurs majeurs du web
Un projet initié par Google et Twitter, présenté officiellement le 8 octobre 2015
AMP est d’ores et déjà implémenté par un groupe d’acteurs majeurs
4. / cdn.ampproject.org
- 4 -
Un CDN dédié pour un affichage presque instantané
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
Les pages AMP voient donc le
temps de téléchargement du
contenu réduit de manière
spectaculaire (jusqu’à 10 fois)
6. - 6 -
Les pré-requis techniques en AMP HTML
Les documents codés en AMP HTML doivent :
Débuter par la balise doctype <!doctype html>.
Contenir une balise top-level <html ⚡> (<html amp> est également valide).
Contenir forcément au moins une balise <head> et <body> (C’est optionnel en HTML classique).
Contenir une balise <link rel="canonical" href="$SOME_URL" /> dans la zone head qui pointe vers
la page HTML classique équivalente, ou vers la même page s’il n’existe pas de version normale.
Contenir une balise <meta charset="utf-8"> dans la zone head.
Contenir une balise <meta name="viewport" content="width=device-width,minimum-scale=1">
dans la zone head. Il est recommandé d’inclure la valeur d’attribute “initial-scale=1”.
Contenir une balise <script async src="https://cdn.ampproject.org/v0.js"></script> en tant que
dernier élément de la zone head.
Contenir <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
dans la zone head.
7. - 7 -
Code minimum pour une page AMP HTML
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
8. - 8 -
Statuts des
balises
HTML5
en AMP HTML
Le standard AMP HTML
définit une version
« allégée » et
« simplifiées » des
balises disponibles en
HTML. Ce n’est pas un
nouveau langage.
9. / La version AMP HTML est un doublon de contenus existants
- 9 -
SEO : attention aux doublons
N’oubliez pas la balise canonical sur la page AMP HTML, pointant vers un contenu
existant (s’il y’a lieu)
Cette approche pose les problèmes habituels avec les doublons, même
« canonicalisés »
Donc, avant de le faire à grande échelle, il convient de s’interroger sur les gains
attendus grâce aux pages AMP