Accelerated Mobile Pages
•
2 j'aime•10,057 vues
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
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Accelerated Mobile Pages
Similaire à Accelerated Mobile Pages (20)
Plus de Philippe YONNET
Plus de Philippe YONNET (20)
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)
- 5. - 5 - Des pages sérieusement allégées
- 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
- 10. / http://www.ampproject.org - 10 - Pour en savoir plus : Démo : https://g.co/ampdemo Depuis un smartphone évidemment