Prise en charge d’AMP par les composants principaux

Dernière mise à jour : 12 juillet 2024

Créé pour :

  • Développeur
  • Administration

Depuis la version 2.11.0 des composants principaux, la fonctionnalité AMP de pages mobiles accélérées est entièrement pris en charge.

Ce document donne un aperçu de la prise en charge d’AMP et explique comment l’activer pour vos sites. Pour obtenir des détails techniques complets, consultez la documentation destinée aux développeurs sur GitHub.

Qu’est-ce qu’AMP ?

AMP (Accelerated Mobile Pages) est un framework open source conçu à l’origine par Google en vue d’optimiser les pages pour la navigation mobile. En règle générale, les pages AMP se chargent beaucoup plus rapidement que les pages web standard, offrant ainsi de meilleures expériences mobiles.

AMP dans les composants principaux

La prise en charge d’AMP dans les composants principaux est entièrement configurable. Les versions AMP des pages peuvent être diffusées seules, avec les versions HTML standard, ou ne pas être diffusées du tout.

Les composants principaux utilisent amp comme sélecteur Sling pour le rendu d’une page AMP. Par exemple, example.html affiche la page normale et example.amp.html la version AMP.

Les projets individuels peuvent décider de tirer ou non parti d’AMP. En fait, étant donné que les pages AMP et HTML standard peuvent être diffusées en parallèle, un projet peut choisir d’utiliser AMP uniquement sur certaines pages.

Prise en main de la prise en charge AMP dans votre projet

La prise en charge AMP offre avec une grande flexibilité et quelques étapes simples suffisent pour une prise en main rapide :

  1. Installez l’extension de prise en charge AMP si nécessaire.

    • Pour les projets AEM as a Cloud Service, l’extension est disponible automatiquement avec les composants principaux et aucune installation n’est nécessaire.
    • Pour les projets On-Premise et AMS, l’extension doit être installée explicitement lors de l’installation des composants principaux.

  2. Une fois l’extension AMP installée, l’auteur du composant doit simplement pointer les supertypes de composant vers ceux de l’extension.

  3. Activez la prise en charge AMP au niveau du modèle ou sur vos pages individuelles.

  4. Déployez une page CSS intégrée selon les besoins.

Activation d’AMP pour les pages

Pour activer AMP pour une page, le Mode AMP doit être sélectionné dans la Politique de page.

Options de politique de page AMP

  • Aucun AMP  : la page est diffusée en HTML standard uniquement.
  • AMP couplé  : la page est diffusée au format AMP ainsi qu’au format HTML.
  • AMP uniquement  : la page est diffusée uniquement au format AMP.

Les paramètres AMP d’une page peuvent également être remplacés dans les Propriétés de page d’une page donnée.

Propriétés de page AMP

  • Hériter du modèle de page  : il s’agit de la valeur par défaut, qui permet d’utiliser le paramètre de la politique du modèle de page.
  • Aucun AMP  : la page est diffusée en HTML standard uniquement.
  • AMP couplé  : la page est diffusée au format AMP ainsi qu’au format HTML.
  • AMP uniquement  : la page est diffusée uniquement au format AMP.

Exigences CSS

Lors de l’utilisation d’AMP avec les composants principaux, la principale différence réside dans le fait qu’AMP exige que tous les éléments CSS soient insérés dans l’élément <head> et optimisés.

Pour ce faire, un composant de page personnalisé est utilisé. Celui-ci charge uniquement la page CSS spécifique à AMP pour les composants présents sur la page.

NOTE
En raison des limitations de conception d’AMP, Adobe ne prend pas en charge l’utilisation de la grille réactive avec la version AMP de votre page.

Pour plus d’informations sur les exigences et les détails techniques, consultez la documentation destinée aux développeurs sur GitHub.

d2be9096-a81e-404b-9952-d8925af7219c