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:
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í:
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:
- AMP HTML
- AMP JavaScript
- 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:
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]ynoscript > 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í:
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".
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í:
¿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
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:
- Si estás optimizando para Google, sigue sus directrices para páginas AMP
- Enlaza tus páginas AMP a sus canónicas (versión no AMP, o la propia página AMP)
- Utiliza el mismo marcado de datos estructurados en las páginas AMP y canónicas
- Comprueba que los datos de la estructura funcionan utilizando la prueba de resultados enriquecidos
- Comprueba que tu archivo robots.txt no bloquea tu página AMP
- Sigue las directrices internacionales de SEO hreflang
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.
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.
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.
A continuación, haz clic en "Iniciar el Constructor de páginas AMP".
Puedes elegir entre utilizar diseños predefinidos o crear los tuyos propios arrastrando y soltando elementos.
A continuación, haz clic en el icono del engranaje para editar los elementos de tu página.
Y guarda cada módulo sobre la marcha.
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.
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.
Una vez rastreado tu sitio, dirígete a la pestaña "Estadísticas". Verás los temas en la fila denominada "Enlaces AMP".
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.
Resuelve cualquier problema lo antes posible. Pueden afectar a la forma en que los motores de búsqueda sirven tu contenido a los buscadores.