Cómo instalar AMP en WordPress: te cuento mi experiencia con Acelerated Mobile Pages

By 20 marzo, 2018 SEO No Comments
instalar AMP Wordpress

Desde hace unas semanas ya dispongo de AMP en mi página web. Era una de las mejoras de entre tantas que quería aplicar, pero supongo que pensaba que esta operación me iba a requerir más conocimientos de desarrollo web y por ello lo iba postergando en el tiempo. Nada más lejos de la realidad. Voy a contarte paso a paso cómo instalar AMP en WordPress y algunos consejos que he ido viendo sobre la marcha

¿Qué es AMP?

Con las siglas Acelerated Mobile Pages denomina Google a su iniciativa de código abierto creada para mejorar la velocidad de carga de una página web, mostrando su versión html, sencilla y sin añadidos.

Esta mejora se ha ido implementando a lo largo del tiempo conforme se observaba el ascenso del tráfico móvil. En datos, España lidera el ranking mundial de penetración con el 88% de usuarios. Además, prácticamente la totalidad (el 94,6%) de los españoles utiliza el móvil como el dispositivo preferido de acceso a Internet.

Además, Google ha ido mostrando su preferencia por el entorno mobile. Primero, poniendo como requisito la correcta aplicación de la versión móvil y posteriormente con el Mobile First Index.

¿A que ahora empiezas a ver la relevancia que puede suponer la tecnología AMP?

¿Por qué tengo que configurar AMP en WordPress?

  • Porque mejorarás la velocidad de carga de tu página web. Google afirma que se mejora hasta en un 85% una vez has implementado AMP
  • Porque Google otorga prioridad a las páginas AMP, dándoles preferencia en los resultados de búsqueda
  • Porque mejoras el posicionamiento web SEO de tu página web

¿Cómo mejora AMP el rendimiento de mi página web?

Cómo aligera AMP el Html

AMP es capaz de obviar algunos elementos del código para mejorar su velocidad de carga: por ejemplo, los object o frames tienen aplicada restricción en la carga de la página.

Cómo aligera AMP el JS

AMP suministra los recursos Javascript para que AMP Html funcione, de forma que el uso se restringe exclusivamente a sus librerías.

Caché mediante Http 2.0

Si la implementación de AMP en la web es correcta, gracias al uso de los CDN del proyecto se permite que no se haga uso de recursos externos, sino que se cachea el contenido y se ofrece desde allí, dando una respuesta óptima al usuario en el momento de carga.

En definitiva, con AMP Google muestra una versión minimalista de tu web, eliminando elementos para mejorar su velocidad de carga: desaparece el menú hamburguesa, widgets, Javascript, formularios, frames, rich snippets... sacrificándolos en búsqueda de un beneficio mayor: ofrecer una mejor experiencia de carga a los usuarios móvil.

¿AMP sustituye a la versión móvil de mi web?

No nos confundamos. No sustituye el responsive de tu web. Simplemente mejora las características de la web para ofreciendo una mejor velocidad de carga.

¿Para quiénes se recomienda disponer de AMP?

AMP está altamente recomendado para webs que realicen una constante actualización de contenidos. Por ello, dependiendo de la naturaleza de tu web, la implementación de AMP será más o menos recomendable:

  • Páginas web de noticias
  • Blogs
  • Diarios online

No

  • Tiendas online
  • Páginas web corporativas

¿Qué pasa con el contenido duplicado?

Era una de las primeras cuestiones que yo me pregunté al tener conocimiento de AMP. Lo cierto es que por ello no debes preocuparte, ya que todas las páginas de la web tienen implementado un rel="canonical" para indicarle a Google cuál es la versión original y cuál es la que tiene que tener más en cuenta.

¿Cómo mejora AMP la velocidad de carga?

Vamos a ver un ejemplo práctico comparando dos páginas de mi sitio con Gtmetrix.

Versión sin AMP

Versión sin AMP

La versión normal nos da datos que son obviamente mejorables: con un tiempo de carga de 4.5 segundos y un tamaño de página de 1.83, es indiscutible que hay elementos que podemos sacrificar en beneficio de una mejor velocidad de carga, ¿no crees?

amp instalado

Como veis, hemos pasado de un Page Speed Score tipo C a una A, y de un Yslow Score D a una A. Sin duda, el tiempo de carga mejora radicalmente.

¿Te he convencido?

¿Cómo instalar AMP en WordPress?

Para instalar AMP en tu WordPress necesitas instalarte un plugin. Por el momento, WordPress es el que más sencillo lo pone a los usuarios, pero se prevé que próximamente otras plataformas puedan sacar sus propias configuraciones para hacer de esta tarea lo más sencilla posible.

¿Cuál es el mejor plugin AMP para WordPress?

El plugin que yo utilizo es AMP for WordPress. Muy sencillo de instalar. Una vez te bajas el plugin y sigues los pasos, ya tienes habilitado AMP en tu página web, aunque es necesario realizar algunas acciones de forma previa.

AMP for WordPress

Este plugin es el mejor para AMP en WordPress hasta la fecha

Ahora si quieres comprobar las versiones AMP, tan solo escribe /amp en cualquiera de las páginas de tu sitio web y podrás ver la diferencia:

Como ves, la versión AMP es muy limitada en cuanto a diseño. Sí mantiene el nombre del sitio web,  la imagen de autor, la imagen de cabecera, los botones de redes sociales y los post relacionados. Pero de lo que se trata de diseño web, no mantiene el diseño de origen.

Afortunadamente este plugin permite personalizar muchos aspectos clave que te voy a ir explicando.

¿Cómo sé que tengo correctamente instalado AMP?

Existe una extensión de Google Chrome que nos ofrece información sobre AMP. Esta extensión, llamada AMP Validator nos ofrece tres tipos de datos:

icon-invalidNo dispone de AMP

icon-linkTiene habilitado Acelerated Mobile Pages

icon-validTe encuentras en la versión AMP

Si quieres hacer una prueba, instala la extensión y mira qué aparece en esta misma entrada.

Existe otra forma de comprobarlo, a través de Search Console. Aquí pueden aparecer errores en el caso de que no hayas implementado bien la versión AMP de tu sitio web.

> Puedes echarle un vistazo a las Directrices AMP para salir de dudas y profundizar más en el tema.

¿Cómo cambio el diseño de mis páginas AMP?

El plugin AMP for WordPress del que te hablaba dispone de multitud de opciones que vamos a ir viendo poco a poco.

Ajustes AMP for WP

  • General. aquí podemos subir nuestro logo y permitir opciones AMP para páginas, entradas, home...
  • AMP Page Builder. Es un Page Builder como puede ser Visual Composer, pero con la particularidad de que funciona solamente para nuestra versión AMP. Así conseguimos un estilo visual mucho más profesional, sin ser por defecto el de AMP, pudiendo crear landings realmente atractivas. Existe también la opción Pre-built,  que carga 3 tipos de plantillas que podemos personalizar para dar todavía más imagen profesional a nuestras páginas.
  • Advertisement. En caso de que monetices con AdSense, este apartado te servirá para configurar opciones en AMP.
  • SEO. Puedes permitir su integración con Yoast, permitir mostrar la metadescripción y ajustar opciones de indexación de páginas, autor, categorías...
  • Performance: para mejorar todavía más la velocidad de carga de AMPAnalytics: permite configurar Analytics y otras aplicaciones de analítica como Statcounter, Yandex Metrica, Alexa Metrix, Píxel de Facebook, Google Tag Manager ...
  • Structured Data: para trabajar los datos estructurados (product, article, Blog Posting...).
  • Notice Bar: notificaciones. No le veo utilidad.
  • Contact Form: para permitir formularios también en la versión AMP.
  • Comments: para habilitar los comentarios del Blog, de Facebook o Disquss.
  • Instant Article, para los Instant Article de Facebook, que se pueden habilitar desde aquí y de los que hablaremos más adelante.
  • HIDE Amp: por si deseas ocultar alguna categoría de AMP.
  • Advance Settings > Mobile redirection: marcando esta opción rediriges directamente a los usuarios de móvil a tu versión AMP.
  • Translation panel: muy útil para personalizar opciones de navegación en AMP, tipo "related post", "recent post", "next, previous"

Diseño

  • Posibilidad de elegir la template que tendrá nuestro AMP.
  • También eliges el color base de titulos y enlaces
  • Puedes definir cómo quieres el menú y el header. También definir qué quieres que salga en el footer.
  • Opciones típicas de entradas: mostrar la fecha, la bio del autor, si se ordena por categorías, si deseas mostrar un extracto, breadcrumbs...
  • También los iconos de RRSS

De momento sigo trasteando las opciones de este plugin que me ha parecido completísimo, en unas semanas os contaré qué tal me ha ido con AMP y qué conclusiones prácticas puedo extraer, además de qué mejoras he implementado y cuáles no. Ya sabes, cualquier duda, si está en mi mano, aquí estoy. Escríbeme en comentarios y me pondré en contacto contigo lo antes posible.

¿Qué os parece AMP? ¿Lo estáis usando?

Author Lucía Roldán

More posts by Lucía Roldán

Leave a Reply

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
A %d blogueros les gusta esto: