31 / 3 / 2025

Cómo Implementar AMP en Páginas Web AdHoc y Mejorar su Rendimiento

Descubre como implementar AMP, que te ayudarña a aparecer en discover, para páginas desarrolladas Ad Hoc. Así lo aprendimos nosotros.

La velocidad de carga y la optimización para móviles son clave en el posicionamiento web y la experiencia de usuario. Si has desarrollado tu web de forma artesanal (AdHoc), implementar AMP (Accelerated Mobile Pages) puede marcar una gran diferencia. En este artículo, aprenderás cómo convertir tu página en una versión AMP optimizada sin perder funcionalidad ni diseño.

¿Qué es AMP y por qué es importante?

AMP es una tecnología de código abierto creada por Google que permite crear páginas web ultrarrápidas y optimizadas para dispositivos móviles. Sus beneficios incluyen:

✅ Carga casi instantánea en móviles.
✅ Mejor posicionamiento en Google gracias a la optimización.
✅ Mayor retención de usuarios y menor tasa de rebote.
✅ Aparición en Google Discover y carruseles de noticias AMP.

1. Estructura Básica de una Página AMP

Para transformar una web artesanal en AMP, necesitas seguir una estructura específica. A continuación, un ejemplo de código AMP válido:

<!DOCTYPE html>
<html ⚡ lang="es">
<head>
    <meta charset="utf-8">
    <title>Ejemplo de AMP en Web AdHoc</title>
    <link rel="canonical" href="https://tuweb.com/pagina-original.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <style amp-custom>
        body { font-family: Arial, sans-serif; padding: 20px; }
        h1 { color: #0056b3; }
    </style>
</head>
<body>
    <h1>Bienvenido a AMP</h1>
    <p>Esta es una versión optimizada de tu página web.</p>
    <amp-img src="https://tuweb.com/imagen.jpg" width="600" height="300" layout="responsive" alt="Ejemplo AMP"></amp-img>
</body>
</html>

2. Elementos Clave para Implementar AMP

🔹 Etiqueta <html ⚡>: Indica que la página es AMP.
🔹 CSS restringido: Todo el CSS debe ir dentro de <style amp-custom> y no superar 75 KB.
🔹 No se permite JavaScript personalizado: Solo puedes usar los componentes oficiales de AMP.
🔹 Imágenes optimizadas con <amp-img>: En lugar de <img>, usa <amp-img> para mejorar la carga.
🔹 Evitar redirecciones y cargas pesadas: AMP prioriza la velocidad de renderizado.

3. ¿Cómo Implementar AMP en una Web Hecha a Mano?

Paso 1: Crear una versión AMP de cada página clave

Si no quieres convertir toda tu web, puedes hacer versiones AMP solo para páginas importantes (como artículos o landing pages).

Paso 2: Añadir la etiqueta `<link rel="amphtml">` en la versión original

En la versión HTML tradicional, añade lo siguiente en <head>:

<link rel="amphtml" href="https://tuweb.com/pagina-amp.html">

Paso 3: Validar la Página AMP

Antes de publicar, verifica que tu página cumple con los estándares de AMP usando esta herramienta de Google: 👉 https://search.google.com/test/amp

También puedes probar en Chrome abriendo la consola y ejecutando:

AMP.toggleExperiment('amphtml')

4. Beneficios SEO de AMP en Webs AdHoc

🔹 Mayor velocidad = Mejor ranking: Google premia las páginas rápidas.
🔹 Compatibilidad con Google Discover: Las páginas AMP aparecen en el feed de noticias.
🔹 Experiencia de usuario optimizada: Carga inmediata y menos rebotes.
🔹 Mayor alcance en móviles: AMP es ideal para mejorar el tráfico móvil.

Conclusión

Implementar AMP en páginas web desarrolladas a medida es una estrategia clave para mejorar el SEO, la velocidad y la experiencia del usuario. Siguiendo estos pasos, puedes transformar tu web artesanal en una plataforma más rápida y optimizada para dispositivos móviles. 🚀

📌 ¿Necesitas ayuda con AMP en tu web? Contáctanos.

Contacta para Cómo Implementar AMP en Páginas Web AdHoc y Mejorar su Rendimiento

Etiquetas