AMP HTML, WordPress y el futuro de la Web ¿estás preparado? ¡Corre!

Si pensabas que ya tenías tu web optimizada, que con algo de cache y una CDN lo tenías todo hecho para obtener un buen ranking en los buscadores y ofrecer una rápida y buena experiencia a tus visitantes te equivocas. Te falta AMP HTML, la tecnología de la que todos vamos a hablar en 2016.

¿Qué es AMP HTML?

google-amp

Mejor empezaría por decir qué no es AMP …

AMP no es, ni define, la nueva Web móvil, es una nueva tecnología de publicación, especialmente para editores de noticias. No reemplaza a las actuales, es un añadido más a nuestros formatos de publicación.

Lo que sí es AMP …

AMP son las iniciales de Accelerated Mobile Pages, o Páginas Móviles Aceleradas, así que solo con esto ya te puedes ir haciendo una idea del asunto.

Estamos hablando de publicación para móviles (navegadores y WebViews). Es una tecnología muy nueva pero, con apenas dos meses de vida, ya ha captado la atención de los grandes editores de contenido y de las principales plataformas tecnológicas, incluyendo WordPress, por supuesto.

Está concebida para una publicación de página rápida y 100% funcional en todos los dispositivos, móviles y de escritorio, pero especialmente optimizada para todo lo que sea móvil, lo que requiera un máximo de velocidad y un mínimo de consumo de recursos.

como funciona amp html

Es una tecnología Open Source, con muchos técnicos y plataformas involucrados, así que el desarrollo será rápido. Google, WordPress, Twitter, Pinterest o LinkedIn y la comunidad Open Source no pueden estar equivocados ¿no crees?

Lo que tengo claro, y tu también espero, es que habrá que estar muy atentos al GitHub donde se está desarrollando o a la web del proyecto AMP. Es una tecnología Open Source, con muchos técnicos y plataformas involucrados.

Viene a ser la competencia directa de código abierto a Apple News y Facebook’s Instant Articles.

Los usuarios tendrán en poco tiempo la opción en sus navegadores de visitar las versiones ligeras (AMP) de las páginas o las completas, más lentas, aunque quizás más bonitas visualmente, si es que eso importa estos días.

Debemos estar preparados para los primeros meses de 2016, cuando Google empiece a redirigir tráfico de búsqueda a las páginas AMP, tanto previsualizando el contenido de búsquedas como mejorando nuestro ranking al ser AMP-friendly.

¿No es lo mismo AMP que responsive?

No, en absoluto. Una web responsive mantiene todos los estilos y scripts, pero con la particularidad de que se adapta, en tamaño y estructura, a los distintos dispositivos de visualización.

AMP es mucho más especializado, exigente y restrictivo a la hora de ofrecer una experiencia veloz y móvil. De  hecho, la guía de desarrollo de AMP incluyen estos requisitos:

  • Sin campos de formularios
  • Sin JavaScripts externos
  • Sin hojas de estilos externas
  • Sin estilos internos
  • Todo debe ajustarse a los límites de tamaño de archivos definidos

Ah vaya, ¿pensabas que sería fácil?

En realidad sí, pero con algunas reglas…

Qué admite AMP y qué no – AMP para desarrolladores

AMP HTML tiene importantes limitaciones al JavaScript pero ¿y para el CSS?

A AMP le encanta el CSS, y de hecho contempla que podamos personalizar nuestras webs a nuestro estilo, simplemente siguiendo algunas normas básicas de formato, pero sí, podremos aplicar estilos a nuestra web.

Ahora bien, los anuncios, las analíticas, aunque fundamentales para los editores y administradores, son parte del problema actual de rendimiento de las webs, por lo que también deberán ser parte de la solución a este problema.

Todos sabemos que usamos a menudo varios proveedores de anuncios y analíticas, y esto llena nuestras webs de códigos JavaScript que ralentizan su carga y comprometen su rendimiento. Pues bien, AMP no permite nada de esto.

Lo que se busca es que se trabajen las analíticas – especialmente – mediante pixels de seguimiento, que se podrán incrustar fácilmente en cualquier página AMP. De  hecho suelen incorporar versiones no script que facilitan esta integración.

No se contempla, de momento, otros sistemas de analítica más avanzados. La idea es ofrecer una biblioteca de analítica de código abierto, sencilla, unificada, auditable y de gran rendimiento, que pueda generar informes para los diversos sistemas y proveedores de analítica, y como Google está en este meollo de AMP hazte a la idea de que estará pronto implantado y será compatible con Google Analytics.

Otro efecto colateral de que no admita JavaScript es que no permitirá incrustar contenido directamente mediante iframes, por ejemplo, ya sean vídeos o incluso anuncios.

Vamos, que se le buscarán alternativas a todo esto pero de momento hay que sacrificar ingresos por rendimiento, y ten claro que de cara al SEO va a ser muy importante ofrecer al menos una versión AMP de tu web, y si quieres monetizar estas versiones deberás buscar alternativas, como banners de imagen o texto, por ejemplo.

También es importante recalcar que cada recurso debe declarar su tamaño en el documento. No es que esos recursos no puedan ser responsive, que pueden, sino que tanto el ratio de aspecto y las dimensiones tiene que estar especificados explícitamente en el HTML.

Esto significa que un documento AMP no cambia hasta que el usuario hace algo,no realiza una acción. Esto reduce enormemente toda la basura que sobra y procesos improductivos, especialmente los visuales.

Para resumir, AMP es un subconjunto de HTML con elementos personalizados que ofrecen un rendimiento superior y una carga instantánea de contenido estático.

En este vídeo tienes un vistazo a la estructura de una página AMP y su código…

¿Para quien es AMP?

AMP es una tecnología para todos, y de hecho supondrá un nuevo impulso a la navegación móvil, pero está especialmente pensado para editores, blogueros, para todo aquel que ofrezca noticias e información.

empresas usando amp

Si solo tienes una web corporativa, aunque siempre será positivo ofrecer la versión AMP optimizada y adaptada a tu diseño en lo posible, está claro que a priori deberás ofrecer una página principal optimizada, atractiva y que atraiga a tus clientes o compradores.

Si no publicas noticias o tu contenido es estático porque se trata de una web corporativa o utilizas WordPress como plataforma de comercio electrónico, con WooCommerce por ejemplo, es posible que aún AMP no sea para ti, pero estate atento, y sigue su evolución.

Las principales empresas editoriales ya están incorporando AMP. En la web del proyecto AMP tienes una amplia relación de ellas, y también te adelanto que webs como SportYou ya tienen versiones AMP; un ejemplo:

También Automattic está metido de lleno en la adaptación a AMP, y de hecho ya lo ha anunciado para sus clientes de VIP WordPress.com.

Y, por supuesto, tu blog favorito, Ayuda WordPress, también ofrece versión AMP, que puedes comprobar en los siguientes enlaces o en cualquier otra publicación simplemente añadiendo al final de la URL ?amp=1 :

Como podrás ver su aspecto, y velocidad de carga es tremendamente diferente.

¿Cuánto más rápida es la versión AMP de una página?

Mucho, pero mucho, mucho, mucho.

Un ejemplo real…

Página sin AMP:

pagina sin amp

Versión AMP de la misma página:

pagina con amp

Como puedes ver, dejando aparte los rankings, la misma página carga de manera absolutamente inmediata, reduciendo su tamaño enormemente y minimizando de manera bestial la cantidad de peticiones que realiza.

AMP y WordPress

Lo sé, estabas esperando esto. ¿Cómo añado AMP a mi WordPress?

Fácil, de hecho ya hay un plugin oficial, AMP, que, aunque en versión inicial (0.1 a la fecha de este artículo) funciona perfectamente. Solo  tienes que instalarlo, activarlo y ya tendrás la versión AMP de tu WordPress.

Para acceder a la versión AMP de cualquier entrada o página solo tienes que añadir al final de la URL /amp/ o ?amp=1, depende de la configuración de tus enlaces permanentes.

No hay nada que configurar, de momento, pero funcionar funciona, y te sorprenderá lo rápido que cargan las versiones AMP de tus páginas y entradas.

De hecho, si revisas el código fuente de las páginas generadas comprobarás cómo funciona AMP, definiendo el tipo de documento como AMP, como gestiona los scripts que carga (desde la CDN del proyecto AMP) o cómo aplica los estilos y tamaños, de lo que hemos hablado antes.

¿Se puede personalizar el aspecto de las páginas AMP en WordPress?

La personalización de la plantilla es algo que todos buscamos para que se ajuste a nuestra imagen de marca, y AMP contempla esta posibilidad, también en WordPress.

El plugin AMP contiene en su carpeta un archivo denominado template.php que podemos personalizar para que se ajuste en lo posible al diseño y estilos de nuestra marca.

De hecho, en el código fuente anterior tienes los estilos generados por esta plantilla, que puedes personalizar a tu gusto, recordando siempre hacer una copia antes de actualizar el plugin, como siempre, para no perder tus cambios, acuérdate.

Las plantillas personalizadas, los temas con plantilla AMP y demás opciones vendrán más adelante, no lo dudes.


Supongo que ya te habrás hecho una idea de qué es AMP y lo que supone para el presente y futuro de la Web, y lógicamente también de WordPress.

Todos debemos ofrecer webs más rápidas y optimizadas,  y AMP, con el apoyo unánime de los grandes de Internet, es la herramienta que, en muy poco tiempo, todos vamos a utilizar para conseguirlo.

Si no tenías nada pendiente que hacer en tu web próximamente ya tienes tarea, preparar tu sitio para AMP.


Gracias a Fernando Puente por ponerme al día y ayudarme con sus sabios consejos.

Valora este artículo para mejorar la calidad del blog ...

PobreRegularEstá bienMuy buenoExcelente (30 votos, promedio: 4,77 de 5)
Loading...

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad
  • Y yo que pensaba pasar un tranquilo 2016… Me habéis dado la nochebuena!!! 😀

  • La forma en que está hecha el plugin no me convence. Yo diría que crea contenido duplicado de cajón. Creo que más vale no precipitarse

    • Si te fijas define bien el tipo de documento (amp) y la relación canonical con el documento original así que me da a mi que no.

    • Fernando Puente

      Tanto el plugin como la tecnología están en fases muy iniciales, sobre todo el plugin, ya que no es casi compatible con ningún tema ni con nuestros plugins y widgets.
      Falta mucho por hacer.
      Como bien se decía en el artículo, no viene a sustituir a las versiones mobile o responsive, es un añadido “lite” para motores, otros servicios amp, navegar en formato amp, etc…

      • Gracias Fernando. Imagino que lo habrán planteado bien a modo arquitectura y luego está el tema que duplicas de golpe el número de páginas indexadas cosa que Google, al menos antes, lo veía de forma muy sospechosa. A ver si lo integran en próximas actualizaciones en el core de wp. Sería lo suyo si finalmente este es el paso definitivo a seguir. Creo que por ahora me mantendré prudente.

        • Fernando Puente

          De nada Quique.
          No es cosa del core de WP, lo debe resolver el Theme o theme+plugin.
          No te preocupes por Google, en realidad sólo indexa la canonical (la que llamamos bonita), no ambas.
          Según avance 2016 habrá más información.
          Saludos

        • Y la canonical si está bien definida en la template del plugin, como he dicho, así que por esa parte sin problema 😉

        • Eso es lo importante, que la versión amp declare siempre cuál es su canónica correspondiente… Saludos

  • FJ

    Para las páginas individuales sirve. Pero la home en AMP va peor en velocidad y otros ratios

    • Fernando Puente

      Muy cierto y comprobado, AMP está pensado para artículos/páginas individuales, no para listados o galerías de contenido.

  • Pingback: ¡Feliz Navidad WordPress! | Ayuda WordPress()

  • Hola! Todo muy lindo e interesante, pero como juega el SEO en estos casos? No hay posibilidad de que te penalice Google por contenido duplicado? o automáticamente sobreentiende ya y no indexa las versiones amp? Y los usuarios móviles simplemente tendrán alguna opción en el browser para pasarse a la versión amp? hay metatags para informarlo? Muchas preguntas? Pues que esperabas, jajaja. Felices Fiestas!

    • Ya se han dado algunas respuestas y, aunque en versión 0.1, ya se define la página canonical con lo que no hay peligro de contenido duplicado además de que ¿he dicho que en esto está Google? 😉

      Sobre lo de redirigir a la versión AMP para los móviles eso ya se puede hacer con un poquito de código en tu WP, como harías con cualquier otra versión móvil.

      De todos modos irán saliendo cositas, esto es el primera avance de algo que acaba de salir y, aunque ya lo usan grandes empresas, tiene pinta de que se va a implantar masivamente así que más vale seguirle la pista y estar informado. Yo intentaré seguir publicando todo lo relevante que salga.

      Felices fiestas.

  • ¡Excelente aporte! Muchas gracias y felicidades por el 8 aniversario.

  • Jose Antonio Neto

    En primer lugar enhorabuena por el artículo. Me parece muy interesante.
    Con respecto al SEO acabo de ver que en la Search Console se ha habilitado un apartado para AMP dentro de la sección de Aspecto de busqueda. Y por lo que veo parece que Goolge va a dar una prelación superior a las páginas que esten adaptadas a esta tecnología.
    Por otro lado me gustaría hacerte una pregunta al respecto del plugin para WordPress. ¿Sabes de alguna manera de activarlo para algunas partes del dominio y no para otras?

    • Ya lo vi, el problema es que el plugin está muy verde aún y se generan muchos errores en la consola de búsqueda ya que no elimina, por ejemplo, etiquetas innecesarias.

  • Pingback: Cómo escribir contenido atractivo para usuarios móviles()

  • Pingback: Motivos por los que tu empresa debe usar WordPress | Ayuda WordPress()

  • Pingback: AMP, SEO y WordPress | Ayuda WordPress()

  • Pero no muestra ni los videos que uno tiene en el post.

  • Pingback: Personalizar AMP | Ayuda WordPress()

  • Pingback: ¿Por qué AMP es más rápido? | Ayuda WordPress()

  • Pingback: 2 razones poderosas de por qué la velocidad importa en tu web | Ayuda WordPress()

  • Pingback: Mejorando AMP: páginas, menús, etiquetas, categorías y diseño | Ayuda WordPress()

  • Ԃяεaӎs

    Esa optimización se puede conseguir perfectamente sin utilizar AMP…he
    reducido una página en bootstrap de 1.7mb a 200kb y un tiempo de carga
    inferior de 500ms según pingdom, manteniendo el mismo
    diseño aunque optimizado… creando tus propios botones sociales en lugar de utilizar
    scripts y limitando iframes pesados como de youtube tienes más de la mitad hecho.

    Si mejoran AMP puede que piense en usarlo…actualmente consigo más vistosos resultados de manera sencilla utilizando bootstrap.

  • Pingback: AMP HTML y WordPress, prepara tu web | Google | Anuncios Google()

  • Pingback: AMP Project activado en blogti.net - BlogTi.NET()

  • Pingback: AMP Project activado en eliezermolina.com - Eliezer Molina()

  • NVillen

    No se si será general este error o no, pero tras unos pocos días con el plugin AMP instalado, en Search Console me devuelve un error de las nuevas páginas AMP por atributos prohibidos en las etiquetas de las páginas (Atributos prohibidos: vocab, clear, property). ¿Alguna idea ante esto?. ¡Gracias!.

  • Gran Artículo, me ha servido de mucho, querría hacerte una pregunta, ¿hay que hacer algo para dirigir el tráfico de móvil al artículo /amp, o eso se hace solo?

    • Eso es cosa de Google, lo hace él solito

  • En pagespeed de google me salen malos resultados por Reducir el tiempo de respuesta del servidor
    Pero si no pongo el amp se vuelve a estabilizar

Pin It on Pinterest

¿Te gustó?

¡Compártelo!