Page d'accueil » Mobile » 10 composants importants des pages mobiles accélérées (AMP) à connaître
10 composants importants des pages mobiles accélérées (AMP) à connaître
Pages mobiles accélérées ou AMP est l'initiative de Google rendre le web mobile plus rapide. Pour atteindre cet objectif, les normes AMP restreignent l'utilisation de HTML, CSS et JavaScript, et gère le chargement des ressources externes, tels que des images, des vidéos et des annonces via sa propre exécution.
Cela implique que vous ne peut pas utiliser soit du code JavaScript personnalisé (écrit par l'auteur ou tiers), soit des éléments HTML liés aux ressources, tels que des images et des vidéos, dans vos documents AMP.
Pour combler le fossé entre les besoins des utilisateurs et les meilleures pratiques de performance, AMP a Composants spécifiques vous pouvez utiliser à la place de ces éléments exclus.
Les composants AMP sont balises HTML spécifiques. Ils se comportent comme les balises HTML classiques: ils ont des balises d’ouverture et de fermeture, des attributs, et la plupart d’entre elles peuvent être stylées avec CSS. Ils peuvent être facilement reconnus, car ils toujours commencer par le ampli- préfixe.
Il existe deux types de composants AMP: intégré et élargi Composants.
Composants AMP intégrés
Built-ins sont intégrés à l'exécution de JavaScript par AMP, vous n'avez donc pas à les inclure séparément.
1. amp-img
remplace le étiquette dans les documents HTML AMP. Vous devez ajouter le src et alt attributs tout comme lorsque vous travaillez avec le régulier élément.
a également deux autres attributs obligatoires: vous devez toujours spécifie le largeur et la taille les attributs en nombre entier de pixels, car cela permet au moteur d'exécution AMP de calculer la mise en page à l'avance.
Si tu veux rendre l'image sensible, ajouter le layout = "responsive" attribut. le disposition attribut contrôle la mise en page dans les documents AMP, et il peut être ajouté à n’importe quel composant AMP (pour en savoir plus à ce sujet sur le système de présentation AMP).
Vous pouvez également utiliser le srcset attribuer sur le tag à spécifier des images différentes pour différentes fenêtres et densités de pixels. Cela fonctionne de la même manière qu'avec les images non-AMP.
2. amp-video
peut être utilisé pour intégrer directement des vidéos HTML dans les documents HTML AMP. Il remplace le dans les fichiers AMP. le étiquette vidéos paresseuses afin d'optimiser les performances.
La source de la vidéo doit être servi via le protocole HTTPS. Vous devez ajouter le largeur et la taille attributs, comme avec le composant.
le La balise a de nombreux attributs facultatifs, tels que lecture automatique et affiche que vous pouvez spécifier pour ajuster le mode d'affichage de votre vidéo HTML5.
prend en charge les formats mp4, webm, ogg et tous les autres formats pris en charge par HTML5
Si vous voulez, vous pouvez aussi ajouter des vidéos de repli pour les utilisateurs dont les navigateurs ne prennent pas en charge les vidéos HTML5, en utilisant le se retirer attribut et le Balise HTML.
Votre navigateur ne supporte pas les vidéos HTML5.
3. amp-ad et amp-embed
vous fournit bacs à sable iframe dans lequel vous pouvez afficher vos annonces. Vous devez diffuser vos annonces via le protocole HTTPS.
Vous ne pouvez pas exécuter vous-même les scripts fournis par votre régie publicitaire. Au lieu de cela, le runtime AMP exécute le code JavaScript du réseau donné à l'intérieur du sandbox. Vous seulement besoin de spécifier quel réseau vous utilisez, et ajoutez vos données.
le composant vous oblige à ajouter les dimensions de l'annonce en utilisant le largeur et la taille les attributs.
Vous pouvez définir la régie publicitaire que vous utilisez avec le type attribut. Voir la liste des réseaux publicitaires pris en charge..
Chaque régie publicitaire a sa propre Les données-* attributs que vous devez également ajouter. Pour voir celui dont vous avez besoin, cliquez sur votre régie publicitaire dans la liste ci-dessus..
est le pseudonyme de , la documentation ne dit pas grand chose à ce sujet si ce n'est qu'il peut être utilisé à la place de quand il est sémantiquement plus précis. Comme Google promet de faire évoluer les composants AMP liés aux annonces au fil du temps, cela pourrait changer à l'avenir..
4. amp-pixel
Avec , vous pouvez ajouter un pixel de suivi à vos documents HTML AMP pour compter les pages vues. Il a un seul attribut, le requis src attribut, dans lequel vous devez spécifier l'URL appartenant au pixel de suivi.
le tag permet substitutions d'URL standard, ce qui signifie que vous pouvez générer une valeur d'URL aléatoire pour suivre chaque impression.
Consultez le Guide de substitution d'URL d'AMP si vous souhaitez utiliser ce composant. Notez que vous ne pouvez pas styler le composant.
Composants AMP étendus
En tant que composants AMP étendus ne font pas partie de l'exécution de JavaScript, vous toujours besoin de les importer dans le section de la page AMP sur laquelle vous souhaitez les utiliser.
Remarque: les versions des composants peuvent changer dans le futur, alors n'oubliez pas de vérifier la version actuelle dans la documentation.
5. ampli-audio
remplace le Balise HTML5, et permet de intégrer directement des fichiers audio HTML5 dans les pages AMP.
Pour l'utiliser, vous devez spécifier le src, largeur et la taille attributs, et vous pouvez également ajouter trois attributs facultatifs: lecture automatique, boucle et en sourdine.
Cela peut aussi être une bonne idée de ajouter des fichiers audio de secours pour les utilisateurs dont les navigateurs ne prennent pas en charge HTML5. Vous pouvez le faire en utilisant le se retirer attribut et le tag, juste comme avec le susdit composant.
le Le composant AMP prend en charge les mêmes formats audio que le Balise HTML5.
Votre navigateur ne supporte pas l'audio HTML5.
Utiliser , inclure le script suivant dans le section de votre document AMP:
6. amp-iframe
affiche un iframe dans les documents AMP. a été fait pour être plus sécurisé que les iframes HTML ordinaires. Par conséquent, ils sont bac à sable par défaut.
Il y a quelques règles liées à vous devez suivre pour réussir la validation.
Vous devez spécifier le largeur, la taille, et bac à sable les attributs. le bac à sable attribut est vide par défaut, mais vous pouvez lui donner différentes valeurs afin de modifier le comportement de l'iframe, par exemplesandbox = "allow-scripts"permet à l'iframe d'exécuter JavaScript. Vous pouvez également utiliser les attributs des iframes standard.
Alors que les dimensions de sont prédéfinis par le largeur et la taille attributs, il existe un moyen de le redimensionner au moment de l'exécution. Pour utiliser le composant, ajoutez le script suivant à votre page AMP:
7. ampli-accordéon
Les accordéons constituent un motif d'interface utilisateur fréquent dans la conception mobile, car ils permettent d'économiser de l'espace, tout en affichant le contenu de manière accessible. permet de ajouter rapidement des accordéons aux pages AMP.
Les sections de l'accordéon doivent utiliser le Balise HTML5, et doivent être les enfants directs du étiquette.
Chaque section doit avoir deux enfants directs:
un pour la rubrique
un pour le contenu (le contenu peut aussi être une image)
Utilisez le étendu attribuer sur n'importe quelle section que vous souhaitez développer par défaut.
Section 1
Contenu de la section 1
Section 2
Contenu de la section 2
Section 3
Image pour la section 3
Pour utiliser le composant dans votre document AMP, incluez le script suivant:
8. amp-lightbox
ajoute une lightbox à différents éléments (dans la plupart des cas, des images) sur les pages mobiles accélérées.
Lorsque l'utilisateur interagit avec l'élément, par exemple, appuie dessus, la visionneuse agrandit et remplit toute la fenêtre. Tu dois ajouter un bouton ou un autre contrôle sur lequel l'utilisateur peut appuyer.
Notez que amp-lightbox ne peut être utilisé qu'avec le nodisplay disposition.
Pour utiliser le composant, vous devez l'importer avec le code suivant:
9. ampli-carrousel
Les carrousels sont fréquemment utilisés dans la conception mobile, car ils permettent de: afficher de nombreux éléments similaires (le plus souvent des images) le long de l'axe horizontal. Les résultats AMP sont également présentés sous forme de carrousel dans la recherche Google..
le Ce composant vous permet d’ajouter des carrousels à votre site. le enfants directs du composant sera considéré comme le éléments du carrousel. Vous devez définir les dimensions du carrousel avec le largeur et la taille les attributs.
Vous pouvez utiliser l'option type attribut à déterminer comment afficher les éléments du carrousel. Si la type attribut prend la "carrousel" valeur, les articles seront montrés en bande continue (par défaut), alors que le "diapositives" la valeur affichera les éléments en format diapositives.
le La balise a également d'autres attributs facultatifs qui peuvent vous aider à affiner le résultat..
Dans l'exemple ci-dessous, notez que le carrousel et tous ses éléments utiliser le même largeur et la taille valeurs.
le composant nécessite l'ajout du script suivant:
dix. amp-analytics
peut être utilisé pour collecter des données d'analyse sur les pages AMP. Actuellement, prend en charge quatre types d'événements de suivi, Cependant, cela peut changer à l'avenir:
Pageview
Clics d'ancrage
Minuteur
Défilement
Utiliser , tu dois ajouter un objet de configuration JSON à l'intérieur d'un
Ajoutez le script suivant au section de votre page HTML AMP pour importer le composant:
Mots finaux
Dans cet article, nous avons examiné tous les composants AMP intégrés et certains composants étendus. Comme Accelerated Mobile Pages est encore nouveau, beaucoup de choses peuvent changer dans le futur, il est donc utile de garder un œil sur la documentation, soit sur Github, soit sur le site officiel de AMP..
Ces composants AMP étant open source, vous pouvez également contribuer au développement, même créer votre propre composant. Si vous voulez voir à quoi ressemble une page AMP complète avec différents composants, vous pouvez consulter ces quelques exemples sur Github..
