Slides présentés au Petit Déjeuner de l'agence Search Foresight le 19 novembre 2015
Qu'est ce que le projet Accelerated Mobile Pages, comment créer des pages AMP, quel intérêt pour vos contenus ?
Quel est l'impact SEO des accelerated mobile pages
Optimisez vos sites pour la recherche sur smartphone, tablettes et objets con...
Accelerated Mobile Pages
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