Las páginas AMP (Accelerated Mobile Pages) son un proyecto de código abierto desarrollado por Google con el objetivo de mejorar la velocidad de carga de las páginas web en dispositivos móviles. Estas páginas están diseñadas para ser más ligeras y rápidas, lo que contribuye a una experiencia de usuario más rápida y fluida en smartphones y tabletas.
Las características clave de las páginas AMP incluyen:
Carga Rápida: Las páginas AMP están optimizadas para cargar de manera extremadamente rápida en dispositivos móviles. Esto se logra mediante la eliminación de elementos innecesarios y la priorización de contenido esencial.
Pre-renderizado: Las páginas AMP se pre-renderizan en caché antes de que el usuario haga clic en ellas, lo que significa que el contenido aparece de inmediato cuando se selecciona un enlace, en lugar de esperar a que la página se cargue por completo.
Estructura Simplificada: Las páginas AMP utilizan una estructura HTML simplificada que restringe el uso de ciertas etiquetas y permite un procesamiento más rápido por parte del navegador.
Carga Diferida: Las imágenes y otros recursos en una página AMP se cargan de manera diferida, lo que significa que se cargan solo cuando el usuario se desplaza hacia abajo en la página, lo que mejora aún más la velocidad de carga inicial.
Prioridad en Contenido Visual: Se da prioridad al contenido visual, como imágenes y videos, para que se cargue antes que otros elementos.
Las páginas AMP son especialmente útiles para sitios web de noticias y contenido editorial, ya que permiten que los usuarios accedan rápidamente a la información que están buscando, lo que mejora la retención de visitantes y reduce las tasas de rebote. También pueden ser beneficiosas para tiendas en línea y sitios web de comercio electrónico, ya que una carga más rápida de las páginas puede aumentar las conversiones y las ventas.
Es importante destacar que las páginas AMP no reemplazan completamente las páginas web convencionales, sino que son una opción adicional para mejorar la experiencia móvil. Muchos sitios web implementan páginas AMP en paralelo con sus páginas regulares para proporcionar a los usuarios la opción de una experiencia de carga rápida en dispositivos móviles.
Aquí tienes un ejemplo básico de código HTML para una página AMP:
<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Mi Página AMP</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="https://www.ejemplo.com/mi-pagina-amp">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
/* Estilos personalizados para esta página */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<header>
<h1>Mi Página AMP</h1>
</header>
<article>
<h2>Título del Artículo</h2>
<p>Este es un artículo de ejemplo para una página AMP.</p>
<amp-img src="imagen.jpg" alt="Imagen de ejemplo" width="300" height="200"></amp-img>
<p>Contenido del artículo...</p>
</article>
<footer>
<p>Pie de página de la página AMP</p>
</footer>
</body>
</html>
En este ejemplo:
- Se especifica
<!DOCTYPE html>para indicar que es una página HTML5. - El atributo
ampen el elemento<html>indica que esta es una página AMP. - Se incluyen metadatos esenciales, como la codificación de caracteres, el título de la página y la configuración de la vista móvil (
viewport). - Se agrega un enlace canónico (
<link rel="canonical">) para indicar la versión original de la página. - Se carga el script de AMP desde el CDN de AMP Project.
- Se incluyen estilos personalizados dentro del elemento
<style amp-custom>. - El contenido de la página, incluido el encabezado, el artículo y el pie de página, se estructura de manera sencilla.
Es importante tener en cuenta que las páginas AMP imponen ciertas restricciones en las etiquetas HTML y en la carga de recursos externos para garantizar la velocidad de carga. La validación de las páginas AMP es fundamental para asegurarse de que cumplan con los estándares AMP. Puedes utilizar herramientas en línea, como el Validador AMP de Google, para verificar si tu página cumple con las especificaciones de AMP.
1. Encabezado de una página AMP:
El encabezado de una página AMP debe incluir la declaración <!DOCTYPE html> y el atributo amp en la etiqueta html. También se debe agregar una referencia a la biblioteca AMP para cargar los componentes AMP.
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<!-- Contenido de la página AMP -->
</body>
</html>
2. Imágenes AMP:
Las imágenes en AMP se deben cargar utilizando el elemento amp-img. A continuación, se muestra un ejemplo de cómo agregar una imagen AMP:
<amp-img src="imagen.jpg" width="300" height="200" layout="responsive" alt="Descripción de la imagen"></amp-img>
3. Videos AMP:
Para incorporar videos en una página AMP, puedes utilizar el elemento amp-video. Aquí tienes un ejemplo:
<amp-video controls width="640" height="360" layout="responsive" src="video.mp4">
<div fallback>
<p>El navegador no admite la reproducción de video.</p>
</div>
</amp-video>
4. Componente de Twitter en AMP:
Para integrar un tweet de Twitter en tu página AMP, puedes utilizar el componente amp-twitter. Asegúrate de incluir el ID del tweet que deseas mostrar.
<amp-twitter
width="375"
height="472"
layout="responsive"
data-tweetid="1234567890123456789">
</amp-twitter>
5. Componente de Instagram en AMP:
Para integrar una publicación de Instagram en tu página AMP, puedes utilizar el componente amp-instagram. Asegúrate de incluir la URL de la publicación de Instagram.
<amp-instagram
data-shortcode="BkGqbY-gAk">
</amp-instagram>
6. Componente de YouTube en AMP:
Para integrar un video de YouTube en tu página AMP, puedes utilizar el componente amp-youtube. Asegúrate de incluir el ID del video de YouTube.
<amp-youtube
data-videoid="abcd1234"
layout="responsive"
width="480"
height="270">
</amp-youtube>
7. Componente de formulario en AMP:
Puedes utilizar el componente amp-form para crear formularios en páginas AMP. A continuación, se muestra un ejemplo básico de un formulario de contacto:
<amp-form method="post" action-xhr="/procesar-formulario" target="_blank">
<input type="text" name="nombre" required>
<input type="email" name="correo" required>
<textarea name="mensaje" required></textarea>
<input type="submit" value="Enviar">
</amp-form>
Estos son solo algunos ejemplos de elementos y componentes comunes que puedes utilizar en páginas AMP. Ten en cuenta que AMP tiene su propia sintaxis y directrices que debes seguir para crear páginas válidas de AMP. Asegúrate de consultar la documentación oficial de AMP para obtener información detallada sobre cómo crear páginas AMP correctamente.