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.
Índice de contenidos
¿Qué es AMP HTML?
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.
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.
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:
- Versión normal: http://www.sportyou.es/noticias/sergio-ramos-respeto-gerard-pique-591366
- Versión AMP: http://www.sportyou.es/noticias/sergio-ramos-respeto-gerard-pique-591366/amp
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 :
- Versión normal: https://ayudawp.com/poner-un-aviso-en-las-publicaciones-antiguas/
- Versión AMP: https://ayudawp.com/poner-un-aviso-en-las-publicaciones-antiguas/?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:
Versión AMP de la misma página:
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.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
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.
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.
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
Para las páginas individuales sirve. Pero la home en AMP va peor en velocidad y otros ratios
Muy cierto y comprobado, AMP está pensado para artículos/páginas individuales, no para listados o galerías de contenido.
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?
no se por que confundí de post mis comentarios 🙁
https://ayudawp.com/poner-un-aviso-en-las-publicaciones-antiguas/#comment-2423791350
https://ayudawp.com/poner-un-aviso-en-las-publicaciones-antiguas/#comment-2423798267
Hemos implementado la AMP en nuestro sitio web http://vozcharra.com/2016/ y en las entradas corre de maravilla. En una entrada normal, cuyo tamaño sería de 2.3 MB, el AMP la ha reducido a 436 KB. Un ahorro considerable de recursos para nuestro servidor. Y dado que nuestra portada está hecha en html, nos ha caído como anillo al dedo.
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,
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.
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
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.
Pingback: AMP, SEO y WordPress | Ayuda WordPress
Pero no muestra ni los videos que uno tiene en el post.
Pingback: Personalizar AMP | Ayuda WordPress
Muy interesante el artículo, quisiera aportar que ya existe un plugin para personalizar el diseño
https://wordpress.org/plugins/pagefrog/
Fuente: blog YOAST
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?
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
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
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
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!
Son cosas de Google, se supone que a partir de cierto momento en el buscador móvil primará las versiones AMP
Gracias Fernando, me mantendré a la espera entonces 🙂
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
Buenas! Para las tiendas woocommerce recomiendas no tener la función amp o recomiendas tener el blog aparte con amp para mejorar la optimizacion?
Si son noticias Google quiere AMP
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
Hola! Gracias por el artículo tocayo! Mira, he hecho lo que has dicho en mi web pero no se como comprobar si funciona o no, por ejemplo: ¿cómo puedo saber si esta url está bien configurada: https://www.ferelbloguero.com/centros-comerciales-panama-malls/ ?
A todo esto, por el momento solo funciona para noticias o en algún momento funcionará para todo tipo de búsquedas? (ejemplo «apartamentos en madrid» «bares en madrid»…)
Gracias!
Pingback: El verano, ese momento de relax… ¡Nunca!
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.
Pingback: 12 tareas imprescindibles después de instalar WordPress
Excelente como siempre a la ultima Fernando sabes como se puede comprobar si funciona bien el AMP de mi web nunca veo articulos en Amp como los pone Google en diapositivas como por ejemplo si hace con el mundo te dejo link https://entrenadorfutbol.es
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
Pingback: Personalizar AMP
Pingback: Facebook Instant Articles – Ivan Wk
Pingback: Cómo escribir contenido atractivo para usuarios móviles
Pingback: Mi lista secreta de 23 plugins para WordPress - Jessica Gestoso
que buen artículo espero aprovechar y aprender a optimizar mis trabajos