Les pages AMP sont similaires aux pages HTML et se chargent dans n’importe quel navigateur.
Pourquoi développer des pages AMP ?
Les fichiers AMP HTML DOIVENT :
<!doctype html>
.<html ⚡>
de niveau supérieur (<html amp>
est également accepté).<head>
et <body>
(facultatives dans HTML).<link rel="canonical" href="$SOME_URL">
dans l’en-tête qui pointe vers la version HTML standard du document AMP HTML ou vers le document lui-même si aucune version HTML n’existe.<meta charset="utf-8">
comme premier enfant de la balise head.<meta name="viewport" content="width=device-width,minimum-scale=1">
dans la balise head. Il est également recommandé d’inclure initial-scale=1.<script async src="https://cdn.ampproject.org/v0.js"></script>
comme dernier élément de l’en-tête (inclut et charge la bibliothèque AMP JS).<head>
:<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
Exemple de structure :
<!doctype html>
<html amp lang="fr">
<head>
<meta charset="utf-8">
<title>Bonjour, Codez en AMPs</title>
<link rel="canonical" href="http://www.culturemediatic.fr/article.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": "2018-01-20T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Bienvenue dans le monde du mobile !</h1>
</body>
</html>
La plupart des balises HTML peuvent être utilisées directement dans AMP HTML, mais certaines, comme la balise
<img>
, sont remplacées par des balises équivalentes ou des balises AMP HTML personnalisées légèrement améliorées.
<amp-img src="bienvenue.jpg" alt="Bienvenue" height="400" width="800"></amp-img>
Les pages AMP sont des pages Web ; toute application de style sur la page et sur ses éléments est réalisée à l’aide de propriétés CSS communes. Vous pouvez appliquer un style aux éléments à l’aide de sélecteurs de classe ou d’élément dans une feuille de style en ligne au sein de l’en-tête (<head>
), appelée <style amp-custom>
:
<style amp-custom>
/* Tous vos styles ici */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
Bref, tout est là : https://www.ampproject.org/docs/guides/responsive_amp
Templates AMP
Faire supporter AMP par Wordpress : https://www.websitehostingrating.com/best-wordpress-amp-themes/
Consignes relatives à l’AMP dans la recherche Google
Astuce pour rediriger vos visiteurs "Mobile" sur la page AMP :
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://www.liendevotrepage/pageversionamp/">
Pas convaincus après vos tests et vos urls AMP sont référencées ?
Tout va bien se passer, suivez ce Tuto pour retirer le URL amp des résultat de recherche Google
Hic !
Bonne pratique
La version non-AMP de la version de l’URL, https://www.exemple.fr/untruc/, a une référence vers la version AMP de l’URL :
<link rel="amphtml" href="https://www.culturemediatic.fr/untruc/amp/" />
Sur la version AMP il y a une référence en retour vers la version non-AMP :
<link rel="canonical" href=https://www.culturemediatic.fr/untruc/" />
+ d’infos sur les bonnes pratiques
Google Analytics
Une balise Analytics distincte est fournie spécifiquement pour les pages AMP, car vous ne pouvez pas utiliser analytics.js.
il est primordial de respecter les spécifications et de valider vos pages AMP avant de les publier