Les pages AMP sont similaires aux pages HTML et se chargent dans n’importe quel navigateur.
Pourquoi développer des pages AMP ?
- Gain de 15% à 85% sur le temps de chargement des pages sur mobile. Par conséquent, taux de rebond en baisse et conversion en hausse.
- Meilleure visibilité dans les résultats de Google et donc plus de trafic.
- Présence dans le carrousel News (concerne majoritairement les articles des sites présents dans Google News)
- Label AMP (concerne tous les contenus)
- Etre à l’avant-garde d’une adoption massive de ce format pour le web mobile. Google redouble d’efforts pour promouvoir et améliorer AMP, de plus il s’agit d’un projet open source soutenu pas une communauté importante de développeurs.
Les fichiers AMP HTML DOIVENT :
- Commencer par le type du document
<!doctype html>. - Contenir une balise
<html ⚡>de niveau supérieur (<html amp>est également accepté). - Contenir les balises
<head>et<body>(facultatives dans HTML). - Contenir une balise
<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. - Contenir une balise
<meta charset="utf-8">comme premier enfant de la balise head. - Contenir une balise
<meta name="viewport" content="width=device-width,minimum-scale=1">dans la balise head. Il est également recommandé d’inclure initial-scale=1. - Contenir une balise
<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). - Contenir ce qui suit dans la balise
<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
- https://www.ampproject.org/latest/blog/start-fast-with-new-amp-start-templates/
- https://themeforest.net/tags/amp
- https://colorlib.com/wp/amp-themes/
- https://mobirise.com/extensions/mobiriseamp/
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 !
- Google va pénaliser les utilisations abusives dès 2018 !
- Google a toujours indiqué que les pages AMP devaient être identiques aux pages d’origine au niveau du contenu + d’infos
- Google exige que le contenu AMP soit identique au contenu original : Ainsi, à compter du 1er février 2018, il va exiger que le contenu de la page AMP soit comparable au contenu de la page canonique, c’est à dire au contenu Web original qui sert à créer le contenu AMP. + d’infos
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
votre Visite Virtuelle
Présentez votre entreprise à 360° dans les recherches Google
La visite virtuelle Google Street View améliore la géolocalisation et permet de partager l'ambiance et le décor de votre établissement.
Cet outil sera utile pour vos clients et entreprises utilisatrices, afin d'en apprécier les espaces et services.
Le référencement peut être largement optimisé en utilisant ces prises de vues sur votre site internet et réseaux sociaux : Augmentation du temps de consultation de vos pages + Taux de rebond diminué grâce au fait que vos différents espaces bénéficieront de la technologie Google Street View (Interactivité) = Plus de visibilité = Meilleur référencement.