Cómo configurar AMP en WordPress para mejorar el SEO móvil

By 4 diciembre, 2016SEO

Hola, hoy te mostraré cómo debes configurar AMP en WordPress y todas las ventajas que tiene AMP para el SEO  y la experiencia de usuario. AMP, siglas de Acelerated Mobile Pages,  es un nuevo sistema para mostrar las páginas o entradas de un sitio web de una forma mucho mas rápida a los usuarios, por medio de su propio HTML optimizado.Se trata de un proyecto muy interesante ya que está totalmente enfocado en mejorar la experiencia de navegación de los usuarios en internet. Por ello ya lo están usando grandes empresas como El País, The Washington Post, The New York Times, BBC o Mashable.

Quizás te interese:

 

¿Que es AMP y cómo puedo configurarlo en WordPress?

AMP  es la forma de que las páginas web carguen mucho más rápido en dispositivos móviles.  AMP quiere decir Accelerated Mobile Pages (Páginas móviles aceleradas) y es una nueva iniciativa de código abierto que tiene como finalidad que las páginas web sean mucho más rápidas y sean mas funcionales.

Principalmente Acelerated Mobile Pages (AMP) tiene estas 3 características principales:

  • Contenido optimizado usando HTML básico (AMP HTML).
  • Su propia librería de Javascript que hace que las páginas se presenten rápido al usuario.
  • Usa el sistema de caché de Google AMP.

AMP y la web Responsive

AMP y responsive no tienen nada que ver. AMP está pensado en ofrecer el máximo de funcionalidad principalmente en móviles, pero la versión original sigue existiendo, no se sustituye.

Entonces se genera otra versión de tus entradas en AMP, pero no te preocupes por el contenido duplicado porque AMP incluye un canonical a la url original para evitar esto.

 

 

Funcionamiento de Google AMP

Si implementas AMP en tu web tus artículos cargarán mucho más rápido ya que AMP utiliza código HTML y Javascript muy simple y así no consume tantos recursos. Además permite almacenar tu web en la cache de Google AMP y servírsela a los usuarios de una forma más rápida.

SUBSCRÍBETE 

Suscríbete a una lista de personas que están interesadas en seguir obteniendo trucos de Marketing Online.

Vamos a analizar el código fuente una vez implementado AMP para ver como se comporta.

Al principio del código vemos la referencia al código HTML simplificado de AMP que comentaba anteriormente (AMP HTML), que suele aparecer como <html amp> o <html

Si vamos al post original podemos ver que se ha añadido la siguiente linea:

<link rel=”amphtmlhref=”http://alvaropmarketing.com/inspiracion-diseno-grafico/amp/” />

 

Esta linea indica a los motores de búsqueda donde tienen la versión AMP de esa entrada y a donde deben ir para encontrarla y servirla a los usuarios. Lo indica con el atributo “amphtml”.
Por otra parte, si vamos a la entrada en versión AMP vemos la linea que indica el canonical, apuntando a la url del post original:

<link rel=”canonicalhref=”http://alvaropmarketing.com/inspiracion-diseno-grafico/” />

 

También se observa la linea que carga AMP JS, la librería javascript de AMP:

<script async src=https://cdn.ampproject.org/v0.js></script>

 

Esto hace que los scripts se carguen desde la CDN de AMP.

Además vemos que hay algunos elementos del HTML de toda la vida como <img>, <video> y <audio> han sido sustituidos por <amp-img>, <amp-video> y <amp-audio>

amp htmlPara ello AMP genera otra vista de tus artículos con una estética diferente y simplificada, por lo que no te extrañe cuando veas que no aparecen los mismos elementos o las mismas tipografías. Esta es la forma que tiene AMP de simplificar el código de tu web para que cargue mucho antes.

AMP por lo tanto va a tener algunas limitaciones en cuanto a diseño ya que su código es limitado. No podrás por ejemplo introducir formularios de suscripción personalizados o Facebook boxes como se suelen ver en las sidebar de muchos blogs.


 

¿Beneficia AMP al SEO de tu WordPress?

Google no se ha manifestado con respecto a la relación entre AMP y el SEO, no obstante AMP hace que las páginas carguen mucho mas rápido, y esto es un punto a favor. Por otra parte la experiencia de usuario en la navegación con AMP mejora radicalmente, ya que realmente AMP es muy rápido.

En búsquedas realizadas desde dispositivos móviles no podemos estar esperando 5 segundos a que se cargue un contenido. La gente se marcha de nuevo a Google a hacer clic en otro resultado. Si con AMP evitamos esto, la experiencia de usuario mejorará y estaremos evitando posibles rebotes.

El SEO cada vez va mas de la mano de la experiencia de usuario, por lo que se podría decir que AMP si que puede jugar un papel en ese aspecto.

Prueba de tiempos de carga tras configurar AMP en WordPress

¡AMP funciona! Los tiempos de carga logrados realmente son mucho mejores que en la versión original de sus entradas. He realizado pruebas con una de mis entradas y estos son los resultados:

Prueba versión original:

que-es-amp

 

Prueba versión AMP:

amp-wordpress-seo

Las pruebas han sido realizadas con GTmetrix, configurado con el servidor en Londres y el navegador Google Chrome. Como veis el tiempo de carga de la versión en AMP se reduce drásticamente, pasando de 1,9 segundos en la versión original, a 0,8 segundos en AMP. Y también mejora el Page Speed Score, pasando del 93% al 98%.

 

Ventajas y desventajas de usar AMP en WordPress

Acelerated Mobile Pages (AMP) está muy bien y tiene muchos pros que veremos a continuación, pero también tiene alguna desventaja que ha ocasionado que no todos quieran implementaron en su web de momento.

Se piensa que el propósito de AMP es ayudarte a rankear mejor en Google ya que mejora la experiencia de los usuarios acelerando la carga de las webs en internet, sobre todo para aquellos cuyas conexiones son demasiado lentas.

Si gran parte de tu tráfico web viene a través del móvil AMP te va a ayudar a mejorar  tu SEO porque Google quiere que la gente use este sistema y puede estar dando un empujón a las urls que ya funcionan con AMP en las búsquedas desde teléfonos móviles. AMP utiliza su propio set de HTML, CSS y Javascript, por ello el diseño  de tus páginas o entradas en AMP no será como deberían ser en la version responsive de tu web, sino un diseño nuevo totalmente simplificado y poco editable. Por eso precisamente es beneficioso para los tiempos de carga.

En cuanto a la analítica, AMP si que funciona con Google Analytics, pero no con muchas otras plataformas de analítica web y lo mismo ocurre con plataformas de publicidad en internet.

 

Configurar Acelerated Mobile Pages (AMP) en WordPress

El primer paso para activar AMP en WordPress es instalar el plugin AMP. Este plugin hará que ya puedas empezar a usar AMP en tu web aunque no quiere decir que desde el primer instante vayas a ver los en resultados de búsqueda tus urls en AMP; esto puede tardar.

Una vez el plugin está instalado puedes editar algunas cosas desde WordPress, en Apariencia > AMP, donde podrás ver cómo se muestra tu web en dispositivos móviles usando AMP. Como ves solo da opción de editar el color del texto y el color del Header, así como el color del fondo de la página en general, eligiendo entre una modalidad light y otra dark. AMP mostrará también el logo o imagen que tengas configurado como favicon en tu sitio web.

amp wordpress

 

Haz la prueba: Visita cualquier post de tu web y añade /amp/ después.

 

 

Si has instalado AMP en WordPress, comprueba si Google lo rastrea

En Google Search Console podrás ver datos sobre como se están comportando tus páginas en AMP. Dentro de Aspecto de la Búsqueda > Acelerated Mobile Pages. En esta sección podrás ver tanto las páginas de AMP indexadas como las que tienen errores.

amp-wordpress

Si acabas de implementar AMP en tu sitio web es normal si no te aparecen resultados. Dale tiempo a Google para que pueda indexar tus páginas de AMP y mostrarte datos.

 

Personaliza AMP en WordPress aún más.

Hay varios plugins para AMP que seguramente te permitirán darle un toque mas personalizado a tus páginas de AMP. Si utilizas Yoast SEO te recomiendo probar Glue for Yoast SEO & AMP.

Este plugin te añadirá una nueva sección relativa a AMP en el administrador de WordPress y te va a permitir hacer lo siguiente:

  • Post Types: Habilitar los tipos de páginas que quieres que usen AMP (posts, páginas o medios)
  • Diseño: Podrás poner  un icono o logotipo para que se muestre en la parte superior. También podrás configurar una imagen destacada para aquellas páginas que no tengan una establecida. Y en tercer lugar, los colores de textos, títulos, etc.
  • Analítica: Podrás conectar AMP con Google Analíticas introduciendo en ID de seguimiento.

amp plugin wordpress

 

Conclusiones sobre AMP en WordPress

AMP es tendencia actual en diseño web y tiene muchas ventajas.  Por eso está siendo implementado en muchas webs.

Estas son algunas de las características del proyecto AMP. ¿Has implementado ya AMP en tu web? ¿Has probado AMP en WordPress? Si estas contento con AMP y ves que tus entradas se muestran en AMP déjame un comentario.

 

Cómo configurar AMP en WordPress para mejorar el SEO móvil
5 (100%) 11 votes

Álvaro Peña Costilla

Author Álvaro Peña Costilla

Dedicado al Marketing Online y al diseño web en Tooeasy. Me gusta todo lo relacionado con las nuevas tecnologías, el diseño gráfico, el branding y la fotografía.

More posts by Álvaro Peña Costilla
  • José Peña

    Hola Álvaro estoy viendo si soluciono el problema que me surgio al instalar el plugin. A mi si me salia el formulario de suscripción (creado por shortcode), aunque este salia con caracteres extraños. La vaya de autor también me aparecía igual de mal y imágenes del sidebar también y no deberían mostrase. No se si sabes si se pueden arreglarse o eliminarse para que no aparezcab en versión amp. Gracias

tendencias diseño web material design

Suscríbete a la Newsletter

Únete y te enviaré contenido actualizado sobre Marketing y consejos sobre WordPress. También te enviaré recursos gráficos y códigos CSS para editar tu página web.

Te has suscrito correctamente

Twittear
Compartir
Compartir
+1
Pin