CursosEmpresasBlogLiveConfPrecios
Curso de SEO: Posicionamiento en buscadores 2017

Cómo crear tu primera página AMP desde cero

Curso de SEO: Posicionamiento en buscadores 2017

Contenido del curso

Tomar examen

Cómo crear tu primera página AMP desde cero

Resumen

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-img 
  src="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> -->
<link rel="stylesheet" href="enlace de Google Fonts a Montserrat">
<style amp-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.