Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


¿Qué es AMP HTML y qué significa?

Vamos a ver qué es AMP y qué significa, así como las ventajas de tener una web adaptada a dicha maquetación/programación. Su finalidad es la de mejorar el rendimiento de una web en dispositivos móviles y a la postre mejorar su posicionamiento SEO en las búsquedas desde dichos dispositivos.

Otros post que pueden interesaros son:

¿Qué es AMP?

Cada vez son más los usuarios que realizan búsquedas y visitan páginas web a través de móviles y tablets, pero esto no significa que las webs estén adaptadas a la navegación por dichos dispositivos y pueden causar frustración si estas tardan un tiempo en cargar o el contenido no es mostrado de manera óptima.

El consumo desde mobile supera al de desktop, es por ello que Google ha liderado junto con medios de comunicación y otros socios tecnológicos este proyecto de código abierto (Open Source) para crear una web más rápida y segura.

Básicamente AMP es un marcado propio de HTML, JS y cache creado específicamente para este formato web.

Tal y como indica su web oficial las siglas AMP significan Accelerated Mobile Pages (Páginas móviles aceleradas).

AMP no es una web responsive

Google junto con estos socios han conseguido que AMP sea un estándar mobile a la hora de servir determinados contenidos web como pueden ser páginas de noticias, artículos y diversos contenidos de búsqueda masiva.

La diferencia entre AMP y una web responsive radica en:

  • Las webs responsive se adaptan a los diferentes dispositivos (PC, tablet, móvil, smart tv, consolas…).
  • Las páginas AMP están diseñadas específicamente para dispositivos móviles.
  • Las webs responsive conservan la misma URL mientras que las de AMP tienen una distinta.
  • Las webs en formato AMP tienen su propio etiquetado HTML y Java Script mientras que las responsive siguen los ‘estándares tradicionales’.
  • Las webs responsive independientemente del dispositivo que las cargue obliga a descargarse todos los scripts, imágenes… mientras que AMP solo muestra lo estrictamente necesario.

Marcado AMP

Vamos a ver los diferentes elementos que incluye el marcado de AMP:

  • AMP HTML:  Solo se pueden usar las etiquetas HTML especificadas, algunas de las existentes están prohibidas y otras como <img> cambian su marcado a <amp-img>.
  • AMP JS: Solución similar al anterior. Solo se permite el uso de Java Script especificado en las librearías AMP. Cabe destacar la carga asíncrona para todo el contenido externo para evitar bloqueos y carga lenta.
  • AMP Cache: Es una cache propia creada específicamente para AMP, garantiza la carga rápida de contenido HTML y JS. Además dicha cache dispone de un sistema de validación del marcado HTML y código JS para evitar errores de programación/maquetación. Esta cache actua en el buscador de Google.

En este post podemos ver el etiquetado básico:

Validación AMP

Podemos revisar el marcado de AMP de nuestra web desde la sección de ‘Apariencia en buscador’ de la Webmaster Tools de Google o desde el validador oficial:

Es más eficiente hacer la revisión a lo largo del tiempo a través de la Webmaster Tools, usaría el validador cada vez que introduzcamos cambios de programación/maquetación.

En este post podéis ver las diferentes formas de validación:

AMP mejora el posicionamiento SEO

Las páginas optimizadas en formato AMP siempre posicionan mejor que las que no están en las búsquedas realizadas desde mobile. Una URL puede estar bien posicionada en desktop y mal desde dispositivos móviles o viceversa.

Os muestro un ejemplo del carrusel AMP que muestra Google en sus resultados cuando lo hacemos desde móviles o tablets:

¿Qué es AMP y qué significa?: Optimizar páginas para móviles

El término de búsqueda utilizado ha sido ‘Chicarito’ y podéis apreciar como queda el carrusel con las noticias en formato AMP.

Ahora os muestro la misma búsqueda en desktop:

Qué es AMP

Si os fijáis los resultados entre desktop y mobile no tienen nada que ver, los resultados son de páginas distintas.

Tal y como habéis podido ver, quien quiera posicionar bien en mobile va a tener que tener la web optimiza en formato AMP, y según se comenta a la medio plazo Google tenderá a posicionar también en desktop las páginas que estén adaptadas en AMP (Aunque el formato mostrado sea desktop).

Plugins AMP para WordPress

Os listo 2 buenos plugins de AMP para WordPress para los que tengáis la web en dicho CMS:

  • AMP
  • Accelerated Mobile Pages

Podéis ver un repaso a ambos plugins en este post:

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.

ACEPTAR
Aviso de cookies