Guillermo González Alemán, fundador y CEO de Lightbox y especialista de SEO, guía la creación de una página con AMP para ofrecer una experiencia móvil veloz y confiable. Aquí verás cómo estructurar el HTML, optimizar imágenes, aplicar estilos y validar que todo cargue en menos de un segundo.
¿Qué es AMP y cómo acelera el SEO móvil?
AMP es un proyecto open source que prioriza la experiencia en dispositivos móviles. Su objetivo: reducir drásticamente los tiempos de carga frente a versiones responsive que suelen arrastrar recursos innecesarios de desktop.
¿Qué componentes usa AMP?
AMP HTML: HTML con restricciones específicas para rendimiento.
AMP JS: gestiona la carga de recursos de forma eficiente.
AMP Cache: almacena y sirve el contenido AMP para mejorar la entrega.
¿Por qué no basta con un sitio responsive?
Reutiliza recursos de desktop que no siempre se necesitan en móvil.
Puede incluir scripts y estilos que ralentizan la carga.
AMP obliga a optimizar: menos dependencias y reglas claras para la velocidad.
¿Cómo crear tu primera página AMP paso a paso?
Comienza con un archivo nuevo y aplica las prácticas obligatorias para que el documento sea válido y pueda servirse como AMP.
¿Qué requisitos obligatorios pide AMP?
Incluir el doctype al inicio.
Usar <html amp> en lugar de <html>.
Agregar meta charset.
Incluir la librería de AMP JS provista por Google.
Definir meta viewport para móvil.
Añadir link rel="canonical" apuntando a la versión original del contenido. Si no existe otra versión, el canonical puede apuntar a sí mismo.
Mantener una sola hoja de estilos interna con style amp-custom.
No usar hojas de estilo externas: solo se permiten tipografías externas.
¿Cómo estructurar el contenido y agregar imágenes responsive?
Usa encabezados claros: H1 para el título y H2 para subtítulos.
Inserta imágenes con <amp-img> en lugar de <img>.
Agrega alt descriptivo: mejora SEO y accesibilidad.
Define width y height obligatorios, y layout="responsive" para que ocupe el 100% del ancho.
Ejemplo de imagen AMP mencionado en la lección:
<amp-imgsrc="seguros contra terceros.jpg"width="320"height="320"layout="responsive"alt="seguros contra terceros"></amp-img>
¿Cómo estilizar, tipografiar y validar en AMP?
AMP permite personalizar el look and feel con restricciones que garantizan rendimiento. Verás cómo aplicar estilos internos, cargar una fuente externa y validar el documento.
¿Cómo aplicar estilos con style amp-custom?
Declara estilos en el head con la etiqueta style amp-custom.
Evita estilos externos: centraliza todo en un único bloque.
Aplica espaciados y alineaciones para mejorar lectura en móvil.
Personaliza colores y márgenes de títulos para jerarquía visual.
Carga de tipografías externas y estilos base descritos por el instructor:
<!-- En el <head> --><linkrel="stylesheet"href="enlace de Google Fonts a Montserrat"><styleamp-custom>body{font-family:'Montserrat', sans-serif;font-size:14px;font-weight:400;}/* Agrega padding y ajustes visuales según tu contenido */</style>
¿Cómo validar el desempeño y el marcado AMP?
Abre el inspector de Chrome y la consola: verás el mensaje “Powered by AMP HTML”.
Añade en el URL: #development=1 para ejecutar el validador.
Confirma el estado: “AMP validation successful” indica que no hay errores.
Revisa tiempos de carga: el objetivo es que el contenido se entregue en menos de un segundo.
Habilidades y conceptos aplicados durante el proceso:
Configuración inicial con doctype, html amp, meta charset y viewport.
Implementación de canonical: referencia a la versión original o a sí misma cuando no hay otra.
Uso de amp-img con layout="responsive", width/height y alt.
Estilización con style amp-custom y sin CSS externo.
Integración de fuentes externas como Montserrat mediante link rel.
Validación con consola de Chrome y #development=1 para QA.
¿Tienes dudas puntuales o quieres compartir lo que construiste con AMP? Deja tu comentario y conversemos sobre tu implementación y resultados.
