Ejemplos de codigo amp Mobile

agosto 14, 2025

www.onlinetis.com

Aquí tienes varios ejemplos de código AMP (Accelerated Mobile Pages), desde la estructura básica hasta componentes más específicos.

Estructura Básica de una Página AMP

Toda página AMP comienza con una plantilla específica que la diferencia de una página HTML estándar. Este es el esqueleto fundamental.

HTML
<!doctype html>
<html ⚡ lang="es">
<head>
  <meta charset="utf-8">
  <title>Mi Primera Página AMP</title>
  <link rel="canonical" href="URL_DE_LA_PAGINA_ORIGINAL.html">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
  <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>¡Hola, mundo AMP!</h1>
  <p>Este es un ejemplo de una página AMP muy básica.</p>
</body>
</html>

Puntos Clave:

<!doctype html>: La declaración estándar de HTML5.
<html ⚡> o <html amp>: Identifica la página como un documento AMP.
<link rel="canonical" ...>: Enlace a la versión no-AMP (o la propia página si no hay otra versión) de la página. Es obligatorio.
<meta name="viewport" ...>: Define la ventana de visualización para un diseño responsivo.
<style amp-boilerplate>...</style>: Código estándar que oculta el contenido de la página hasta que la biblioteca de AMP esté cargada.
<script async src="https://cdn.ampproject.org/v0.js"></script>: Carga la biblioteca principal de JavaScript de AMP.

Ejemplo con Imagen 🖼️

Las imágenes en AMP no usan la etiqueta <img> estándar, sino <amp-img>. Esto permite a AMP gestionar la carga de imágenes de forma inteligente (por ejemplo, lazy loading).

HTML
<body>
  <h1>Ejemplo de Imagen en AMP</h1>
  
  <amp-img src="https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0"
    width="1080"
    height="720"
    layout="responsive"
    alt="Ejemplo de imagen de Unsplash">
  </amp-img>

</body>

Puntos Clave:

<amp-img>: Es la etiqueta para imágenes.
width y height son obligatorios: AMP necesita saber las dimensiones de la imagen para reservar el espacio antes de que se cargue, evitando saltos en el diseño.
layout="responsive": Hace que la imagen se adapte al ancho del contenedor, manteniendo la relación de aspecto.

Ejemplo con Carrusel de Imágenes 🎠

Para componentes más complejos como un carrusel, necesitas importar el script específico del componente en el <head> y luego usar su etiqueta personalizada.

1. Añadir el script en el <head>:

HTML
<head>
  ...
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
  ...
</head>

2. Usar la etiqueta en el <body>:

HTML
<body>
  <h2>Carrusel de Imágenes</h2>

  <amp-carousel width="400"
                height="300"
                layout="responsive"
                type="slides">
    <amp-img src="/img/image1.jpg"
              width="400"
              height="300"
              alt="imagen 1"></amp-img>
    <amp-img src="/img/image2.jpg"
              width="400"
              height="300"
              alt="imagen 2"></amp-img>
    <amp-img src="/img/image3.jpg"
              width="400"
              height="300"
              alt="imagen 3"></amp-img>
  </amp-carousel>
  
</body>

Puntos Clave:

<script async custom-element="...">: Cada componente AMP interactivo (carrusel, acordeón, etc.) requiere su propio script.
<amp-carousel>: La etiqueta que envuelve las imágenes del carrusel.
type="slides": Define el comportamiento del carrusel (en este caso, una diapositiva a la vez).

Ejemplo con Video de YouTube 🎥

De manera similar a otros componentes, para incrustar un video de YouTube se necesita el componente amp-youtube.

1. Añadir el script en el <head>:

HTML
<head>
  ...
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
  ...
</head>

2. Usar la etiqueta en el <body>:

HTML
<body>
  <h2>Video de YouTube Incrustado</h2>
  
  <amp-youtube data-videoid="dQw4w9WgXcQ"
               width="480"
               height="270"
               layout="responsive">
  </amp-youtube>
  
</body>

Puntos Clave:

<amp-youtube>: Etiqueta específica para videos de YouTube.
data-videoid: Aquí se coloca el ID del video de YouTube (la parte que sigue a v= en la URL).
layout="responsive": Asegura que el video se ajuste correctamente al tamaño de la pantalla.

Buscar este blog