¿Qué es AMP? Guía para principiantes sobre páginas AMP y SEO

Carlos Silva

may 13, 20248 min de lectura
qué son las páginas amp

TABLA DE CONTENIDOS

Para hacer nuestro contenido accesible a más usuarios, hemos traducido este artículo del inglés al español mediante traducción automática. Haz clic aquí para leer el artículo original. Si detectas algún problema en el contenido, no dudes en escribirnos a report-osteam@semrush.com.

¿Qué es AMP? 

AMP (antes conocido como Accelerated Mobile Pages) es un marco HTML de código abierto que ayuda a crear páginas web optimizadas para móviles de carga rápida.

Así pues, una página AMP es, en esencia, una versión reducida de una página web normal.

Y puede tener este aspecto:

infografía página móvil normal vs página móvil acelerada

Google encabezó el proyecto de código abierto para competir contra Facebook Instant Articles y Apple News. 

Ambos permitían a los editores crear contenidos que se cargaban rápido y eran fáciles de consumir. 

Google sirvió por primera vez páginas AMP en los resultados de búsqueda para móviles en 2016. Y se limitaban a una sección de "Top Stories" en la parte superior de las SERP. 

Así:

Páginas AMP en la búsqueda móvil

Se diseñó originalmente para editores de noticias. Pero desde entonces se ha ampliado para incluir todo tipo de páginas web.

¿Cómo funciona AMP?

El marco AMP consta de tres componentes básicos:

  1. AMP HTML
  2. AMP JavaScript
  3. Caché AMP

AMP HTML

AMP HTML es HTML con ciertas restricciones para garantizar que las páginas se cargan rápidamente. Elimina o modifica algunos elementos y atributos que pueden ralentizar las páginas web. 

Un archivo HTML sencillo puede tener este aspecto:

un sencillo ejemplo de archivo HTML

Fundamentalmente, los documentos AMP HTML deben:

  • Comienza con <!doctype html> (para enviar información al navegador sobre qué tipo de documento debe esperar)
  • Incluye una etiqueta de nivel superior <html ⚡> o <html amp> (para indicar que es una página AMP HTML).
  • Incluye las etiquetas <head> y <body> (para definir el contenido del documento, es decir, títulos, párrafos, imágenes, hipervínculos, tablas, etc.)
  • Incluye un enlace<rel="canonical" href="URL"> (para indicar la versión HTML normal de la página o para enlazarse a sí misma si no existe una página normal)
  • Incluye una etiqueta <meta charset="utf-8"> (para especificar la codificación de caracteres)
  • Incluye una etiqueta <meta name="viewport" content="width=device-width"> (para dar al navegador instrucciones sobre cómo controlar las dimensiones de la página).
  • Incluye una etiqueta <script async src="https://cdn.ampproject.org/v0.js"><script> (para añadir extensiones a la biblioteca base)
  • Incluye el código AMP boilerplate(head > style[amp-boilerplate] y noscript > style[amp-boilerplate]) en la etiqueta head

Para más detalles sobre las etiquetas, atributos y plantillas especiales, consulta la documentación oficial sobre AMP HTML

AMP JavaScript

JavaScript es delicado porque demasiado JS puede hacer que las páginas web sean lentas y no respondan. 

Sin embargo, la biblioteca JavaScript de AMP contiene marcos y componentes que te permiten crear páginas rápidamente sin escribir JS ni importar bibliotecas de terceros. 

Todos ellos son cruciales para la experiencia del lector. 

Caché AMP

La caché de AMP es una red de distribución de contenidos (CDN) basada en proxy que obtiene y reproduce previamente las páginas AMP antes de que las soliciten los usuarios. 

Y es un cambio de juego para la velocidad del sitio. 

¿Por qué?

Porque permite que tu sitio cargue varias partes de diferentes servidores a la vez. Y también permite a los visitantes cargar tu sitio desde el servidor que esté más cerca de ellos. 

Lo que significa que tu sitio web carga superrápido para más gente. 

Y actualmente hay dos proveedores principales de AMP Cache: 

Estas plataformas almacenan en caché tus páginas cuando utilizas el formato AMP. 

Por ejemplo, los proveedores de caché pueden descubrir tu página AMP a través de la etiqueta <html ⚡> o <html amp> y almacenar en caché su contenido. 

O un editor puede añadir manualmente la página a la caché AMP(sólo aplicable a la caché AMP de Google). 

Otras plataformas pueden acceder a las páginas AMP almacenadas en caché a través de su URL.

Por ejemplo, si pones /amp al final de cualquier noticia en The Guardian, verás la versión AMP. 

Así:

Página AMP de The Guardian

Consejo profesional: Si no estás seguro de si tu sitio tiene páginas AMP, puedes comprobarlo con la herramienta Site Audit Tool de Semrush. 

Empieza por añadir tu nombre de dominio y hacer clic en "Iniciar auditoría".

Herramienta de auditoría del sitio

A continuación, dirígete a la pestaña "Estadísticas" de tu panel de control y verás una fila que dice "Enlaces AMP". 

Así:

Pestaña "Estadísticas" en la Herramienta de Auditoría del Sitio

¿Cuáles son las ventajas y limitaciones de las páginas AMP? 

Aunque AMP puede mejorar el rendimiento de tu página y la experiencia del usuario, también tiene ciertas desventajas. 

Veamos los pros y los contras de las páginas AMP:

Ventajas de la AMP

  • La carga de la página es casi instantánea 
  • Las páginas son fáciles de construir 
  • Mejora la experiencia del usuario en el móvil
  • Permite diseños personalizados 
  • Múltiples plataformas, incluidas Google y Bing, lo admiten

Limitaciones de la AMP

  • Google ya no muestra el icono de la insignia AMP para indicar el contenido AMP 
  • Los elementos de diseño están muy restringidos 
  • Las páginas AMP sólo permiten una etiqueta de publicidad por página
Infografía Ventajas y limitaciones de las páginas AMP

Cómo configurar AMP en tu sitio web

Puedes crear páginas AMP siguiendo el marcado HTML o utilizando un CMS (mediante un plugin o una funcionalidad personalizada). 

Crea tu página HTML AMP

Código básico

Para empezar, aquí tienes el marcado de una página AMP básica:

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hola, AMPs</title>
<link rel="canonical"
href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s
steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s
steps(1,end) 0s 1 normal both;-ms-animation:-amp-inicio 8s pasos(1,fin) 0s 1 normal ambos;animacion:-amp-inicio 8s pasos(1,end) 0s 1 normal ambos}@-webkit-keyframes
-amp-start{de{visibility:hidden}a{visibility:visible}}@-moz-keyframes
-amp-start{de{visibility:hidden}a{visibility:visible}}@-ms-keyframes
-amp-inicio{de{visibility:hidden}a{visibility:visible}}@-o-keyframes
-amp-inicio{de{visibility:hidden}a{visibility:visible}}@keyframes
-amp-inicio{de{visibility:hidden}a{visibility:visible}}</style><noscript><style
amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-
animation:none;animation:none}</style></noscript>
</head>
<body>
<h1 id="hola">¡Hola Mundo AMPHTML!</h1>
</body>
</html>

Como puedes ver, el contenido del cuerpo es sencillo, pero hay código adicional en la cabeza. 

Consejo: utiliza el "patio de recreo" de fragmentos de AMP para experimentar y practicar con el código. 

Añadir imágenes

Si quieres añadir una imagen, tienes que sustituir la etiqueta HTML normal por su equivalente AMP. 

En este caso, la etiqueta <amp-img> en lugar de <img>

Para probarlo, copia y pega el siguiente código en el cuerpo de tu página <>. 

<amp-img src="https://source.unsplash.com/random/600x400" width="600"
height="400"></amp-img>

Añadir estilo

El siguiente paso es añadir estilo. 

Cualquier estilo debe hacerse utilizando propiedades CSS. Pero, AMP establece que todo el CSS se incluya dentro de una etiqueta personalizada, llamada <style amp-custom> en la cabecera<> del documento. 

Por ejemplo, prueba a añadir el siguiente estilo a tu página:

<style amp-custom>
h1 {
margin: 1rem;
}
body {
background-color: verde;
}
</style>

JavaScript

AMP permite JavaScript personalizado a través del componente <amp-script>

Te permite escribir y ejecutar tu propio JS de forma que se mantengan las garantías de rendimiento de AMP. Y construye páginas rápidamente sin codificar JavaScript ni utilizar bibliotecas externas. 

Para obtener información más detallada, lee la guía de AMP sobre el uso de JavaScript personalizado y sigue su tutorial de AMP JS para empezar. 

Revisar y validar

Una página AMP válida significa que sigue unas directrices estrictas que garantizan que es apta para el almacenamiento en caché y que crea una gran experiencia de usuario. 

Antes de validar tu página AMP, asegúrate de seguir estas buenas prácticas:

Y cuando estés listo para revisar, utiliza la Herramienta de prueba de AMP para asegurarte de que tu página cumple todos los requisitos.

Herramienta de prueba AMP

Para obtener una guía más detallada, consulta el tutorial oficial de AMP para validar páginas AMP. 

Y si eres nuevo en el desarrollo web, utiliza los cursos de AMP o el codelab de fundamentos de AMP de Google. 

Crea tu página AMP con un CMS

Si gestionas tu contenido a través de un CMS, puedes utilizar Drupal, Joomla o WordPress

Por ejemplo, veamos qué aspecto tiene utilizando AMP para WP.

Plugin AMP para WP

Tras activar el plugin en WordPress, puedes empezar a crear tus Páginas Móviles Aceleradas.

Empieza añadiendo una nueva página o una nueva entrada.

Página "Añadir nuevo" en el menú

A continuación, haz clic en "Iniciar el Constructor de páginas AMP".

Botón "Iniciar el Constructor de páginas AMP" resaltado

Puedes elegir entre utilizar diseños predefinidos o crear los tuyos propios arrastrando y soltando elementos.

Elementos de arrastrar y soltar de AMP Page Builder

A continuación, haz clic en el icono del engranaje para editar los elementos de tu página.

el icono del engranaje resaltado

Y guarda cada módulo sobre la marcha.

"Botón "Guardar módulo

Una vez que publiques la página, verás la versión AMP de la página añadiendo "amp" al final de la URL de tu página.

Versión AMP de la página de ejemplo

Supervisa y mejora tus páginas AMP

Una de las mejores formas de controlar y mejorar tus páginas AMP es auditar periódicamente tu sitio. Te ayudará a controlar cualquier problema de HTML, plantillas, estilo y diseño. 

Empieza pasando tu sitio por nuestra herramienta de Auditoría del Sitio

Consejo: Crea una cuenta Semrush gratuita y rastrea hasta 100 URL de cualquier dominio, subdominio o subcarpeta.

Herramienta de auditoría del sitio

Una vez rastreado tu sitio, dirígete a la pestaña "Estadísticas". Verás los temas en la fila denominada "Enlaces AMP". 

Pestaña "Estadísticas" en la Auditoría del Sitio

La herramienta comprueba más de 40 de los errores más comunes relacionados con las páginas AMP. Y te dice cómo solucionarlos. 

Por qué y cómo solucionar los problemas con la sección de páginas AMP

Resuelve cualquier problema lo antes posible. Pueden afectar a la forma en que los motores de búsqueda sirven tu contenido a los buscadores. 

Compartir
Author Photo
Carlos Silva is a content marketer with over 8 years of experience in writing, content strategy, and SEO. At Semrush, he’s involved in research, editing, and writing for the English blog. He also owns Semrush’s Educational Newsletter (4M+ subscribers).