google amp wordpress

En este post te hablare sobre el formato para las p√°ginas web m√≥viles aceleradas AMP, que es y que hace exactamente, como mejora la velocidad web y como puedes a√Īadir AMP WordPress.

Los usuarios de internet ya navegamos más por internet con dispositivos móviles, y la realidad es que la navegación móvil ya ha superado a la navegación desde el escritorio.

El problema es que las p√°ginas web no est√°n adaptadas a las necesidades de los m√≥viles porque aunque ya existen web responsive que adaptan el dise√Īo a todos la navegaci√≥n web en m√≥viles sigue siendo lenta ya sea por las limitaciones de procesamiento o por los datos m√≥viles que siguen siendo limitados.

¬ŅCuantas veces te has quedado mirando la pantalla del m√≥vil con cara de bobo esperando a que cargue una p√°gina web?

¬ŅY cuantas veces cierras el navegador porque te has cansado de esperar?

Pues para solucionar este problema y crear una navegación web móvil ultra rápida se ha creado un nuevo formato para la web basada en el HTML llamado proyecto HTML AMP Accelerated Mobile Pages.

¬ŅQu√© es AMP Accelerated Mobile Pages?

Amp significa Accelerated Mobile Pages, o Páginas Móviles Aceleradas y es un nuevo formato para mostrar páginas web en dispositivos móviles que tiene como objetivo principal conseguir una velocidad increíble.

AMP es una tecnología con licencia Open Source esto sumado al apoyo de las grandes empresas tecnológicas del sector nos da una garantía sobre su uso, actualización y soporte.

AMP es un subconjunto de código HTML de las páginas de artículos y también es llamado AMP HTML.

¬ŅQui√©n est√° detr√°s del proyecto AMP?

El formato AMP est√° apoyado por empresas y plataformas como Google, WordPress, Twitter, Pinterest, LinkedIn entre otras.

Y editores de noticias y periódicos digitales como The Guardian, el Washington Post,  BuzzFeed también le están prestando atención a esta tecnología.

¬ŅPor qu√© le est√°n prestando tanta atenci√≥n estas grandes empresas? Pues porque se supone que Google va a premiar el SEO del quien ofrezca la versi√≥n AMP de su web y servicios como Google News tambi√©n integraran esta tecnolog√≠a.

¬ŅCu√°ndo usar el formato AMP en WordPress?

Si la pregunta que te est√°s haciendo es ¬ŅNecesito la versi√≥n AMP para mi p√°gina web?

Pues esto depende de cómo sea tu página web.

En principio esta versión está pensada solo para mostrar noticias y artículos de un blog.

El formato AMP está pensado para páginas web con contenido dinámico, es decir Blogs y Revistas o Periódicos Digitales.

Por lo tanto si tienes un Blog te beneficiara tener la versión AMP para tus publicaciones ya que si son leídas en dispositivos móviles serán más rápidas.

Pero la versi√≥n AMP aplica serias restricciones a los c√≥digos JavaScript y otros elementos que utilizamos para el dise√Īo de la web.

Por lo tanto para p√°ginas web est√°ticas como p√°ginas web corporativas aunque te puede beneficiar tener una versi√≥n r√°pida para m√≥vil tienes que saber que la versi√≥n AMP tiene serias restricciones para el dise√Īo y a funcionalidades.

Y como el objetivo de las páginas web es atraer a los usuarios y vender siendo atractivas y funcionales para los usuarios puede que no sea la mejor opción para páginas web estáticas y tiendas online.

Al menos, de momento.

Y digo de momento porque si los grandes de la tecnología se han puesto de acuerdo para crear un estándar de versión  para las páginas web móvil quizá esto evolucione más allá de lo que tenían pensado.

Cuando se muestra el formato AMP Páginas Móviles Aceleradas

El formato amp de páginas aceleradas para móviles no se muestra automáticamente a los usuarios que visiten nuestro sitio web desde dispositivos móviles.

En vez de eso son los buscadores web como Google, agregadores de noticias y aplicaciones los que deciden que versión de tu página web se muestra, si la responsiva o la versión AMP.

A√ļn se est√° desarrollando esta versi√≥n de Google pero puedes utilizar la demo del navegador AMP de Google en https://g.co/ampdemo

Como podemos ver en la imagen Google destaca las p√°ginas con formato AMP y podemos distinguirlas en el navegador con el icono de AMP.

navegador google amp para movil

Diferencias entre AMP y Responsive

La diferencia entre AMP y Responsive es que una p√°gina web responsive adapta el contenido al ancho de la pantalla y cambia su estructura seg√ļn el dispositivo manteniendo los c√≥digos java script, los estilos y los efectos de cada elemento.

Y una p√°gina con AMP muestra una versi√≥n diferente de la p√°gina web que restringe el uso de todo tipo de c√≥digos y etiquetas que ralentizan la velocidad y pr√°cticamente solo dejan ver el texto y el contenido √ļtil.

En resumen la versión de páginas móviles aceleradas AMP quita todo lo que sobra en una página web móvil.

Podemos usar los dos tipos de t√©cnicas perfectamente en la misma p√°gina web, al usuario se le mostrara la versi√≥n Responsive o AMP seg√ļn corresponda.

En esta captura podemos apreciar como cambia el dise√Īo de la web ala izquierda la versi√≥n AMP a la derecha la versi√≥n normal de la web.

Como podemos observar todo lo que no es contenido √ļtil desaparece, as√≠ como la barra lateral que no es √ļtil en dispositivos m√≥viles.

versión amp wordpress

¬ŅPor qu√© es tan r√°pido AMP?

AMP est√° pensado para acelerar la versi√≥n m√≥vil de las p√°ginas web y con este objetivo la versi√≥n AMP HTML pone unas restricciones de dise√Īo y no admite una serie de c√≥digos, etiquetas y funcionalidades en la web.

Es decir que AMP es un subconjunto de HTML simplificado, restrictivo y rápido, donde la mayoría del código es HTML personalizado con etiquetas AMP.

El uso del JavaScript está muy limitado y AMP utiliza su propia librería de JavaScrip personalizada que convierte todo el JS externo en JS asíncrono para que la web cargue mas rápidamente.

Si eres desarrollador puedes ver que etiquetas están permitidas y cuales no en la información de AMP HTML

Lo que si puedes utilizar es CSS en la versión AMP para tunearlo pero siguiendo unas reglas para aplicar el estilo de nuestra web, es decir que también está limitado y tiene que estar optimizado.

Ademas se utiliza Google AMP Cache para mostrar este tipo de formato cargando el JavaScript , imágenes y documentos desde esta cache lo que hace la web más rápida y segura.

AMP también aplica la carga aplazada del contenido o Lazy Load.

Por estas razones la web m√≥vil ser√° muy r√°pida pero tambi√©n afectara al dise√Īo de la web y no puedes utilizar ciertas funcionalidades en esta versi√≥n AMP para m√≥vil.

El proyecto AMP evoluciona constantemente permitiendo cada vez más elementos optimizados para web móviles.

Puedes leer más información y mantenerte actualizado de los cambios en la web del proyecto AMP.

Beneficios de las AMP Páginas Móviles Aceleradas

Si tener una versi√≥n AMP de mi web afecta a mi dise√Īo ¬Ņqu√© beneficios tengo a cambio?

El principal beneficio de las AMP es tener una versión de tu web ultra rápida para móviles.

Y cuando digo ultra r√°pida me refiero a que puedes competir con Facebook en rapidez, sin exagerar, veamos un ejemplo.

Sin AMP:

análisis de wordpres sin versión amp páginas móviles aceleradas

Página web con versión AMP página móvil acelerada:

analisis amp wordpress paginas moviles aceleradas

Como podemos ver la velocidad, el tama√Īo de la web y las peticiones al servidor mejoran de forma incre√≠ble.

Y como consecuencia de tener una web ultra rápida también se mejorara varias estadísticas que afectan al SEO como la tasa de rebote,  y se reducirá el consumo de datos de nuestro servidor que nunca está de más.

Además se mostrará una web cacheada y usando estándares de optimización.

Google Search Console ya tiene una sección AMP para medir la indexación de estas páginas y los errores.

Amp para WordPress

Ahora te voy a explicar paso a paso como poner AMP en WordPress mediante un plugin.

El proyecto AMP paginas móviles aceleradas tiene su propio plugin para WordPress.

Plugin AMP

amp-wordpress-plugin

Se instala como cualquier otro plugin del repositorio de WordPress, vamos a Plugins > A√Īadir Nuevo,¬† buscamos AMP lo instalamos y activamos.

instalar amp wordpress

Una vez instalado no tienes que configurar nada, ya tendrás la versión AMP de los post de tu web lista.

Actualmente solo serán los post los que tengan esta versión AMP pero próximamente las paginas también tendrán su versión AMP.

Para ver la versi√≥n AMP de tu p√°gina web a√Īade al final de la URL /amp/ (o a√Īade URL /?amp=1/ si no tienes los enlaces personalizados en WordPress)

Ejemplo: https://sensacionweb.com/menu-wordpress/amp/

Como vemos AMP elimina todo lo que no es el contenido √ļtil de la entrada, como la barra lateral y el dise√Īo.

Dejando un dise√Īo web muy minimalista, sencillo y r√°pido, muy r√°pido.

Comprobar que funciona la versión AMP de WordPress

Para saber que la versión AMP funciona correctamente y que nuestra página web no va a explotar podemos utilizar un verificador de  versión AMP de nuestro sitio web.

AMP validator

amp validator, comprueba que funciona amp wordpress

YOAST SEO y AMP

El plugin Yoast Seo crea incorrectamente algunas etiquetas de SEO para corregir este problema el equipo de Yoast ha creado el plugin Glue for yoast seo amp, que soluciona este problema.

En resumen si utilizas Yoast SEO y quieres instalar la versión AMP de tu web también tienes que incluir Glue For Yoas Seo Amp.

glue for yoast seo amp wordpress

Aparte de solucionar este problema Glue for Yoast SEO te permite incluir el código de Google Analitycs para poder medir las  analíticas de las paginas AMP de tu sitio web.

También permite opciones para personalizar parte de la versión AMP como incluir el logo de tu web y cambiar el color de los textos y links.

Personalizar AMP en WordPress

Para personalizar la versión AMP en WordPress podemos utilizar el plugin Pagefrog, este plugin permite la personalización de las paginas AMP.

plugin wordpress facebook instant articles google amp pages by pagefrog

Tambi√©n permite a√Īadir Google Analitycs y Google Adsense a la versi√≥n AMP web m√≥viles aceleradas entre otras plataformas.

NOTA: utilizar este plugin si no usamos el plugin Yoast SEO ya que Glue for Yoast SEO ya incluye opciones de personalización de AMP.

Lo que tienes que tener en cuenta sobre AMP y WordPress

  • Es una tecnolog√≠a a√ļn en desarrollo con constantes actualizaciones.
  • Es una versi√≥n optimizada de la p√°gina web para m√≥vil.
  • El dise√Īo, contenido y navegaci√≥n est√°n optimizados para m√≥vil.
  • El dise√Īo y su personalizaci√≥n son limitados.
  • El plugin AMP de momento solo soporta entradas post.
  • Aseg√ļrate de tener la relaci√≥n can√≥nica configurada en tu sitio.
  • Tienes que insertar el c√≥digo de Google Analitycs en la versi√≥n AMP si quieres medir las estad√≠sticas.
  • Si utilizas Yoast Seo a√Īade el plugin Glue para Yoast SEO AMP para solucionar problemas de seo en la versi√≥n AMP.
  • Est√° pensada para web que generen contenido.
  • No est√° pensada para web est√°ticas corporativas.

Puedes leer mas información y mantenerte actualizado sobre los cambios y evolución del proyecto AMP en:

Conclusión sobre AMP en WordPress

AMP está avalada y desarrollada por las grandes empresas del sector tecnología que buscan un estándar para la navegación móvil, y esto es una garantía de que esta tecnología acabara utilizándose.

Estoy seguro de que en un futuro llegaran a WordPress temas con versiones AMP incluidas y personalizables a medida que se demande la versión AMP para móviles.

AMP no está pensada para páginas web estáticas, está pensada para grandes generadores de contenido como periódicos revistas digitales y grandes blogs.

Y hay que tener en cuenta que AMP est√° en fase de desarrollo.

Así que debes ir con cautela y pensar antes de implementar si esta tecnología es para ti y si los posibles beneficios de velocidad y seo son suficientes como para ir trasteando con ella.

Tu p√°gina web no va a explotar pero nunca se sabe.

Estoy realmente ilusionado por la velocidad web que nos ofrece AMP para los dispositivos m√≥viles, pero mi madre me ense√Īo a no instalar nunca una versi√≥n beta de un producto experimental.

¬ŅQu√© si le voy a hacer caso a mi madre? Por supuesto que no, puedes disfrutar de la versi√≥n AMP de sensaci√≥n web hoy mismo.

¬ŅT√ļ qu√© opinas, vas a utilizar AMP en WordPress o te voy a tener que llamar Gallina como a Marty Mcfly?

10 comentarios en “AMP WordPress P√°ginas Moviles Aceleradas

  1. Muy interesante, de hecho la semana pasada dijeron que iban a cambiar aun más el algoritmo de Google para darle ya toda la importancia al posicionamiento SEO con buenos tiempos de carga en móviles.

  2. El futuro es sin duda el dispositivo m√≥vil. El que no se actualice y lo tenga en cuenta se va a quedar atr√°s desde ya. Muchas gracias por tu gu√≠a, 100% √ļtil.

  3. No sab√≠a nada del AMP en WordPress. Gracias por el post. Ahora intentar√© probar para ver si logro acelerar la p√°gina. ¬ŅHay alguien en casa,Mcfly? Jajajaja

  4. Un post sencillo pero realmente poderoso.

    Pedazo de post hermano.

    No me queda mas que agradecerte y lamentablemente te tendré que seguir leyendo.

  5. ME encanta! mucho mejor mi web, felicidades! una pregunta, tengo yoast e instalo » Glue for yoast seo amp» pero debajo en la descripci√≥n pone «Se asegura de que el plugin AMP WordPress por defecto utilice los metadatos adecuados de Yoast SEO», quiere decir que tengo que instalar amp, por defecto?? ah√≠ estoy confundida. Muchas gracias

Deja un comentario

El email no ser√° publicado. Vas a introducir datos en la web si comentas:

  • Responsable de los datos Gerardo Garc√≠a Asensio
  • Los datos se usar√°n para gesti√≥n de comentarios y medidas de seguridad
  • Legitimaci√≥n: tu consentimiento.
  • Destinatarios: los datos estar√°n ubicados en los servidores de Siteground.
  • Derechos: podr√°s ejercer tus derechos, entre otros, rectificar, limitar y borrar tus datos.

Pin It on Pinterest

Esta web utiliza cookies para su funcionamiento. Lee y acepta el aviso legal o abandona la web. m√°s info

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar