Google recomienda optimizar las web a móviles y AMP

Google recomienda optimizar las web a móviles. Los móviles están cambiando el mundo y Google lo sabe.

El dinero ahora está en el móvil y quiere que aunque tengas un móvil con poca RAM y procesador , la experiencia sea satisfactoria.

Hoy en día, todos llevamos un smartphone encima y nos comunicamos y buscamos información constantemente. En muchos países, ya hay más smartphones que ordenadores, por lo que disponer de un sitio web optimizado para móviles se ha convertido en un requisito esencial de la presencia online. Es básico para el SEO y el WPO.

Además deberás tener una versión AMP.

Google recomienda optimizar las web a móviles y AMP

Si todavía no has optimizado tu sitio web para móviles, deberías hacerlo. Es probable que la mayor parte de los usuarios que visitan tu sitio web lo hagan desde un dispositivo móvil.

1. Si no sabes si tu sitio web está optimizado para móviles, haz la Prueba de optimización para móviles ahora mismo.
2. Si has utilizado un software de gestión de contenido como WordPress para diseñar tu sitio web, consulta nuestra guía para personalizar el software de tu sitio web.
3. Si no utilizas un software de este tipo, te recomendamos contratar a un desarrollador web. Disponemos de unalista de comprobación sobre los aspectos que debes tener en cuenta al hacerlo.
4. Si tienes los conocimientos técnicos suficientes para hacerlo tú mismo, consulta nuestra Guía de SEO para móviles.

Si quieres obtener más información sobre las razones por las que deberías crear un sitio web optimizado para móviles, continúa leyendo.

¿Por qué optimizar un sitio web para móviles?

En EE.UU., el 94% de las personas con smartphones buscan información local desde los teléfonos. Curiosamente, el 77% de las búsquedas en móviles se hacen desde casa o desde el trabajo, donde normalmente hay ordenadores.

Los móviles son fundamentales para tu negocio y lo seguirán siendo, tanto si escribes un blog sobre tu equipo deportivo favorito, como si trabajas en el sitio web del teatro de tu comunidad o si vendes productos a posibles clientes. Por lo tanto, asegúrate de que los visitantes tengan una buena experiencia cuando accedan a tu sitio desde sus dispositivos móviles.

¿Cómo empiezo?

El trabajo necesario para optimizar un sitio web para móviles depende de los recursos del desarrollador, del modelo de negocio y de la experiencia. En el diagrama siguiente puedes ver un ejemplo de cómo se rediseña un sitio para ordenadores para que funcione en móviles:

Para obtener más información sobre la implementación técnica de un sitio web para móviles, tanto si contratas a un desarrollador como si lo haces tú mismo, consulta nuestra documentación en SEO para móviles.

¿Cuánto cuesta crear un sitio para dispositivos móviles?

Depende de la opción que elijas. Te presentamos algunos ejemplos:

• La optimización para móviles es gratis si  seleccionas un tema o una plantilla con diseño receptivo para el sitio web. Los temas o plantillas con diseño receptivo adaptan la pantalla al visitante, tanto si utiliza un ordenador como un tablet o un teléfono móvil.
• La optimización para móviles es gratis si tienes las capacidades técnicas para crear un sitio para móviles. Consulta Aspectos básicos de la Web.
• La optimización para móviles implicará una inversión de tiempo y dinero si tienes que contratar a un desarrollador. Además, si tu sitio web se creó varios años atrás, puede ser que el nuevo desarrollador te recomiende empezar desde cero (así que tendrás que pagar una renovación completa). Esto sucede porque hay nuevas técnicas de desarrollo web y nuevos temas (o plantillas de página) que pueden hacer que sea más eficaz volver a hacer el sitio de nuevo en vez de modificarlo. Este es el caso, especialmente, de los sitios siguientes:
  • Sitios creados con Flash
  • Sitios que utilizan plataformas de comercio electrónico obsoletas

La parte positiva es que, si empiezas desde cero, el desarrollador puede utilizar un tema o una plantilla existentes. También puedes reutilizar tu contenido actual, con lo que probablemente ahorres tiempo y dinero.

¿Cuáles son los pasos siguientes?

• Si el sitio se creó a partir de una plantilla o de un tema de software de sitios web de terceros, consulta el artículo Personalizar el software del sitio web para usuarios de dispositivos móviles, que es la forma más rápida de optimizar el sitio para móviles.
• Si tienes intención de contratar a un desarrollador web, consulta nuestra guía de contratación.
• Si quieres obtener más información sobre el proceso de implementación de un sitio web para móviles, consulta nuestra documentación en SEO para móviles.
• Si vas a crear un sitio optimizado para móviles, elige un diseño web adaptable. Consulta nuestra documentación en SEO para móviles o ve directamente a Aspectos básicos de la Web y a Principios de diseño de sitios web.
• Si quieres obtener más información sobre cómo optimizar el contenido para móviles de tu empresa, te recomendamos los artículos siguientes: Guía para móviles, Think with Google para la plataforma para móviles y Casos de éxito de sitios multipantalla en Google.

¿AMP es necesario?

El siguiente paso es que debes tener una versión AMP para móviles.

¿Qué es AMP?

AMP es una manera de compilar páginas web para contenido estático de representación rápida. AMP en acción consta de tres partes diferentes:

AMP HTML es HTML con algunas restricciones para lograr un rendimiento confiable, y con algunas extensiones para compilar contenido enriquecido más allá del formato HTML básico. La biblioteca AMP JS garantiza la representación rápida de páginas AMP HTML. El Google AMP Cache (opcional) proporciona las páginas AMP HTML.

AMP HTML

AMP HTML es básicamente contenido HTML ampliado con propiedades AMP personalizadas. El archivo en AMP HTML más sencillo tiene el siguiente aspecto:

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <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-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

Si bien la mayoría de las etiquetas en una página AMP HTML son etiquetas HTML comunes, algunas etiquetas HTML se reemplazan por etiquetas específicas de AMP (consulta también la sección deetiquetas HTML en la especificación de AMP). Estos elementos personalizados, llamados componentes AMP HTML, crean patrones comunes que pueden implementarse con buen rendimiento en forma sencilla.

Por ejemplo, la etiqueta amp-img proporciona soporte completo de srcset, incluso en navegadores que todavía no lo admiten. Obtén más información acerca de cómo crear tu primera página AMP HTML.

AMP JS

La biblioteca AMP JS implementa todas las prácticas recomendadas de rendimiento de AMP, administra la carga de recursos y te proporciona las etiquetas personalizadas que se mencionan arriba para garantizar la representación rápida de tu página.

Una de las optimizaciones más importantes es que transforma en asincrónico todo lo que proviene de recursos externos, de modo que ningún elemento de la página pueda bloquear la representación.

Entre otras técnicas de rendimiento se incluyen la disposición de todos los iframes en espacios seguros, el cálculo previo del diseño de cada elemento de la página antes de que se carguen los recursos y la desactivación de selectores de CSS lentos.

Para obtener más información acerca de las optimizaciones y las limitaciones, lee la especificación de AMP HTML.

Google AMP Cache

El Google AMP Cache es una red de distribución de contenido basada en proxy para la entrega de todos los documentos de AMP válidos. Captura las páginas AMP HTML, las almacena en caché y mejora el rendimiento de estas automáticamente. Al usar el Google AMP Cache, el documento, todos los archivos de JS y todas las imágenes se cargan desde el mismo origen que usa HTTP 2.0 para lograr la máxima eficiencia.

El caché también viene con un sistema de validación integrado que confirma que se garantiza el funcionamiento de la página, y que esta no depende de recursos externos. El sistema de validación ejecuta una serie de aserciones que confirman que el marcado de la página cumple con la especificación de AMP HTML.

Cada página AMP viene con otra versión del validador integrada. Esta versión puede registrar errores de validación directamente en la consola del navegador cuando se representa la página, lo que te permite ver cómo los cambios complejos en tu código podrían afectar el rendimiento y la experiencia del usuario.

Obtén más información acerca de cómo probar tus páginas AMP HTML.

¿Cómo optimizo mi sitio para los dispositivos móviles?

Si sabes con qué software se ha creado tu sitio web, consulta directamente la guía correspondiente:

• WordPress
• Joomla!
• Drupal
• Blogger
• vBulletin
• Tumblr
• DataLife Engine
• Magento
• PrestaShop
• Bitrix
• Google Sites
• Typepad

Si el software de tu sitio web no aparece en la lista o tienes algún comentario que enviarnos, no dudes en rellenar este formulario de Google.

Para empezar, hemos recopilado las siguientes directrices generales:

1. Haz una copia de seguridad de tu sitio antes de modificarlo o actualizarlo.

Recomendamos hacer una copia de seguridad de tu sitio antes de realizar cambios en él. Si no estás seguro de cómo realizar una copia de seguridad de tu sitio, ponte en contacto con tu proveedor de CMS o busca información en la comunidad de Google de ayuda para webmasters.

2. Actualiza tu CMS a la última versión.

En algunos casos, al actualizar a la última versión, se aplicarán automáticamente las mejoras de seguridad necesarias que optimizarán tu sitio para móviles. Si el proceso no empieza automáticamente, inicia la actualización de forma manual para evitar fallos de seguridad. Por ejemplo, Joomla 3 ofrece asistencia para móviles.

3. Si el CMS ofrece temas personalizados, asegúrate de que estén optimizados para móviles de las siguientes formas:

1. En el panel de administración de tu CMS, puedes ver un tema para tu sitio y buscar en su documentación términos como «móvil» o «adaptable».
2. Si hay una plantilla de demostración disponible, copia y pega la URL de la plantilla en la herramienta Prueba de optimización para móviles y asegúrate de que esté optimizada para dispositivos móviles.
3. También puedes aprovechar para comprobar si la plantilla es rápida consultando la sección de velocidad de PageSpeed Insights. Asegúrate de que no haya en dicha sección problemas pendientes de solucionar.

4. Revisa los foros de ayuda de tu CMS para ver qué problemas pueden tener los usuarios con las versiones para móviles de sus sitios

Fuentes:

https://www.ampproject.org/es/learn/about-amp/

https://developers.google.com/webmasters/mobile-sites/

https://developers.google.com/webmasters/mobile-sites/website-software/

Hagas lo que hagas a continuación, elige la siempre la optimización para móviles y AMP es tus proyectos webs. Google recomienda optimizar las web a móviles y AMP para mejorar tu SEO y WPO.