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.

<!doctype html>
<html amp>
<head>
	<title>Poner un aviso en las publicaciones antiguas | Ayuda WordPress</title>
	<meta charset="utf-8">
	<link rel="canonical" href="https://ayudawp.com/poner-un-aviso-en-las-publicaciones-antiguas/" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
	<link href='https://fonts.googleapis.com/css?family=Merriweather|Open+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
			<script custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" async></script>
		<script src="https://cdn.ampproject.org/v0.js" async ></script>
<style>body {opacity: 0}</style>
<noscript>
<style>body {opacity: 1}</style>
</noscript>
<style amp-custom>
	/* Generic WP styling */
	amp-img.alignright { float: right; margin: 0 0 1em 1em; }
	amp-img.alignleft { float: left; margin: 0 1em 1em 0; }
	amp-img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
	.alignright { float: right; }
	.alignleft { float: left; }
	.aligncenter { display: block; margin-left: auto; margin-right: auto; }

¿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 Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(49 votos, promedio: 4.6)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

56 comentarios en “AMP HTML, WordPress y el futuro de la Web ¿estás preparado? ¡Corre!”

    1. 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…

      1. 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.

        1. 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

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

    1. Fernando Puente

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

  1. Alfredo Prádanos

    Muy interesante, he instalado el plugin en la web, aquí un ejemplo, , aunque no aparece el script de statcounter, ¿deberé añadirle a la plantilla del plugin?

  2. Me gusta mucho la idea. Aunque hay que decir que contradice un poco lo que siempre ha dicho Google, acerca de tener una misma versión web, con mismo código y misma url, pero con estilos adaptables:

    «Google recomienda (pero no requiere) utilizar RWD antes que otros patrones de diseño.Una de las ventajas de RWD es que solo tienes que hacer el mantenimiento en una versión del sitio, y no en dos (es decir, no hace falta que hagas el mantenimiento del sitio para ordenadores en http://www.example.com y de la versión para móviles en m.example.com.»

    Saludos,

  3. Pingback: ¡Feliz Navidad WordPress! | Ayuda WordPress

  4. 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!

    1. 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.

  5. 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?

    1. 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.

  6. Pingback: Cómo escribir contenido atractivo para usuarios móviles

  7. Pingback: Motivos por los que tu empresa debe usar WordPress | Ayuda WordPress

  8. Paco González

    Hola. Estupendo artículo como todo lo que leo en esta web. Solo quería dar un pequeño aviso en linea con los comentarios que habéis hecho.

    1- Ya sabréis todos a estas alturas que no funciona para páginas. Search Console te devuelve un montón de fallos.

    2- Yo hago el marcado «schema.org» en el html a mano y me va bien. Todo con tal de no utilizar plugines.

    Pues bien; después de instalar el plugin Acelerated Movile Pages me he dado cuenta de que machaca todos los datos estructurados de las páginas que pruebas con la famosa extensión ?amp . Volveré al ataque dentro de un tiempo, pero de momento, tranquilito.

    Gracias Fernando y saludos a todos.

  9. Pingback: AMP, SEO y WordPress | Ayuda WordPress

  10. Pingback: Personalizar AMP | Ayuda WordPress

  11. En nuestro blog también está activado ya aunque todavía no aparece ningún resultado en Webmaster Tools. ¿Habéis configurado algo aparte o es cuestión de días que se vaya mostrando?

  12. Pingback: ¿Por qué AMP es más rápido? | Ayuda WordPress

  13. Pingback: 2 razones poderosas de por qué la velocidad importa en tu web | Ayuda WordPress

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

  15. 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.

  16. Pingback: AMP HTML y WordPress, prepara tu web | Google | Anuncios Google

  17. Pingback: AMP Project activado en blogti.net - BlogTi.NET

  18. Pingback: AMP Project activado en eliezermolina.com - Eliezer Molina

  19. 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!.

      1. Hola Fernando,

        Yo llevo casi 1 mes con (a excepción de 4) todos los artículos del blog indexados correctamente como AMP según Webmaster tools, sin embargo por más que hago pruebas desde dispositivos móviles nunca me carga directamente la versión AMP,

        ¿Sabes a qué puede ser debido? Utilizo el plugin que recomendaste desarrollado por automattic

        ¡Gracias!

  20. Buenas! Para las tiendas woocommerce recomiendas no tener la función amp o recomiendas tener el blog aparte con amp para mejorar la optimizacion?

  21. Antonio Ortiz

    Hola Fernando. He activado el plugin AMP y la extensión para Yoast en mi blog https://rondainfinita.info Sin embargo solo he visto que funciona en los post, pero no funciona por ejemplo en las páginas. ¿Como puedo activarlo en otro tipo de entradas? Gracias por la ayuda y saludos

  22. Pingback: El verano, ese momento de relax… ¡Nunca!

  23. Hola Fernando,
    gracias por toda la información. No estaba muy segura de lo que era AMP, no me había «puesto» a saber hasta ahora y este post me aclara muchísimo.
    Quería, no obstante, hacer una pregunta.
    ¿Se podría decir entonces que la versión AMP es como una vuelta atrás? Viendo la apariencia de las versiones sin y con AMP, parece como estar viendo una web de hace 15 años.

  24. Pingback: 12 tareas imprescindibles después de instalar WordPress

  25. Hola,
    En primer lugar gracias por el artíclo, me ha resultado muy útil. He instalado el AMP y tengo un par de dudas.

    Primero, como hacemos que Google indexe los artículos versión AMP, porque en el código no veo el canonical a la versión amp, al revés sí.
    Por otro lado, alguien ha probado este otro plugin?

    AMP for WP – Accelerated Mobile Pages

    Parece bastante interesante aunque no se hasta qué punto se llevará bien con Elegant builder

  26. Pingback: Personalizar AMP

  27. Pingback: Facebook Instant Articles – Ivan Wk

  28. Pingback: Cómo escribir contenido atractivo para usuarios móviles

  29. Pingback: Mi lista secreta de 23 plugins para WordPress - Jessica Gestoso

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido