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

Curso de SEO: Posicionamiento en buscadores 2017

Contenido del curso

Antes de comenzar

1
Auditoría SEO rápida con herramientas reales
04:54 min

Introducción a SEO

Estrategia de palabras clave

Optimización del contenido

Problemas comunes

Indexación y Desindexación de contenido

SEO en sitios móviles

Rich snippets y datos estructurados

Usabilidad y UX

SEO Local

27
Cómo posicionarte mejor de manera local
08:45 min

Link Building

Reportes

Sesiones en Vivo

34
Auditoría SEO: tres sitios reales analizados
55:09 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0015:08

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

Curso de SEO: Posicionamiento en buscadores 2017

Clase 20 de 34

Clase 20 / 34

Recursos

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.

Resumen

¿Qué es AMP y cómo acelera el SEO móvil?

¿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.

Antes de comenzar

Auditoría SEO rápida con herramientas reales

Introducción a SEO

SEO y los motores de búsqueda

Cambios en el algoritmo de Google

Framework de SEO: orden y estrategia

Estrategia de palabras clave

Verificación de Google Search Console paso a paso

Qué palabras clave elegir para SEO

Cómo funciona la búsqueda semántica en Google

Lluvia de ideas y herramientas para Keyword Research

Cómo encontrar palabras clave reales con Search Console

Competencia: Dificultad y ranking actual

Optimización del contenido

Keyword stuffing: por qué Google penaliza tu sitio

Optimización de URL y etiquetas

Checklist de optimización del contenido

Problemas comunes

Errores de rastreo que bajan tu SEO

Casos comunes de contenido duplicado en SEO

Cómo resolver el contenido duplicado

Indexación y Desindexación de contenido

Cómo crear un sitemap XML para Google

Evitar que Google indexe ciertas páginas

SEO en sitios móviles

Por qué Google prioriza móvil sobre escritorio

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

Rich snippets y datos estructurados

Qué son los datos estructurados

Cómo validar datos estructurados con Schema

Usabilidad y UX

Métricas de engagement

Velocidad de carga: factor Google SEO

Quick wins

SSL y HTTPS: cómo funcionan y por qué mejoran tu SEO

SEO Local

Cómo posicionarte mejor de manera local

Link Building

Popularidad, autoridad de página y de dominio

Factores que determinan el peso de links externos

Cómo hacer una campaña de Link Building

Cómo medir campañas exitosas y qué métricas usar

Reportes

Reportes SEO mensuales en Excel

Mitos del SEO

Sesiones en Vivo

Auditoría SEO: tres sitios reales analizados

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