Compatibilidad con AMP para Componentes principales

Desde la versión 2.11.0 de los componentes principales, AMP: Accelerated Mobile Pages son totalmente compatibles.

Este documento proporciona información general sobre cómo se admite AMP, así como sobre cómo habilitarlo para sus sitios. Sin embargo, para obtener información técnica completa, consulte la documentación para desarrolladores de GitHub.

¿Qué es AMP?

Accelerated Mobile Pages o AMP es un marco de código abierto diseñado originalmente por Google para optimizar las páginas para la navegación móvil. Las páginas de AMP generalmente se cargan mucho más rápido que las páginas web estándar, lo que ofrece mejores experiencias móviles.

AMP en los componentes principales

La compatibilidad con AMP en los componentes principales es totalmente configurable. Las versiones AMP de las páginas se pueden servir exclusivamente, junto con las versiones HTML estándar, o no.

Los componentes principales utilizan amp como selector de Sling para procesar una página de AMP. Por ejemplo, example.html renderizaría la página normal y example.amp.html sería la versión de AMP.

Los proyectos individuales pueden decidir si se utiliza o no AMP. De hecho, como las páginas AMP y HTML estándar se pueden entregar en paralelo, un proyecto puede elegir utilizar AMP solo en determinadas páginas del proyecto.

Introducción a la compatibilidad con AMP en su proyecto

Aunque la compatibilidad con AMP ofrece un buen nivel de flexibilidad, para empezar a utilizarla rápidamente se necesita completar unos pocos pasos sencillos:

  1. Instale la extensión de compatibilidad con AMP si es necesario.
    • Para proyectos de AEM as a Cloud Service, la extensión está disponible automáticamente con los componentes principales y no es necesario realizar ninguna instalación.
    • Para los proyectos locales y AMS, la extensión debe instalarse explícitamente al instalar los componentes principales.
  2. Una vez instalada la extensión de AMP, el autor del componente debe indicar los supertipos de componentes a los de la extensión.
  3. Habilite la compatibilidad con AMP en el nivel de plantilla o en sus páginas individuales.
  4. Implemente CSS en línea según sea necesario.

Habilitar AMP para páginas

Para habilitar la AMP para una página, el modo AMP debe estar seleccionado en la Política de la página.

Opciones de política de la página de AMP

  • Sin AMP: la página se entrega solo como HTML estándar.
  • AMP emparejado: la página se entrega como AMP, así como HTML.
  • Solo AMP: la página se entrega como AMP solamente.

La configuración de AMP para una página también se puede sobrescribir en Propiedades de página para una página individual.

Propiedades de página de AMP

  • Heredar de la plantilla de página: este es el valor predeterminado, que permite que la configuración se tome de la política de la plantilla de página.
  • Sin AMP: la página se entrega solo como HTML estándar.
  • AMP emparejado: la página se entrega como AMP, así como HTML.
  • Solo AMP: la página se entrega como AMP solamente.

Requisitos de CSS

Cuando se utiliza AMP con los componentes principales, la diferencia principal es que AMP requiere que todos los CSS estén insertados en el elemento <head> y que también estén optimizados.

Para admitir esto, se utiliza un componente de página personalizado, que carga solo el CSS específico de AMP para los componentes presentes en la página.

NOTA

Debido a las limitaciones de diseño de AMP, Adobe no admite el uso de Cuadrícula interactiva con la versión de AMP de su página.

Para obtener más información técnica y requisitos, consulte la documentación para desarrolladores de GitHub.

En esta página