![- 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>](https://image.slidesharecdn.com/ampslidespetitdjeuner19novembre-151120071605-lva1-app6892/75/Accelerated-Mobile-Pages-7-2048.jpg)
Téléchargé parPhilippe YONNET
Accelerated Mobile Pages
Les Accelerated Mobile Pages (AMP) sont une initiative open source visant à créer des pages optimisées pour mobile, permettant un affichage rapide grâce à un CDN dédié. Les pages AMP, présentées par Google et Twitter, doivent respecter des spécificités techniques pour garantir leur performance et minimiser les temps de chargement. Il est essentiel d'utiliser la balise canonique pour éviter les problèmes de contenu dupliqué sur les pages AMP.
Contenu connexe
Similaire à Accelerated Mobile Pages
Accelerated Mobile Pages
- 1. QUEL IMPACT SURVOTRE SEO ? ACCELERATED MOBILE PAGES - 1 - PETIT DEJEUNER SEO SEARCH FORESIGHT 10EME ÉDITION PARIS LE 19 Novembre 2015 9h-12h
- 2. / Adapté pourles 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 - Despages sérieusement allégées
- 6. - 6 - Lespré-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 - Codeminimum 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 - Statutsdes 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 versionAMP 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