Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)
¿Qué Es AMP?
En Octubre Pasado, Google anunció AMP como una iniciativa de código abierto para proporcionar navegación web móvil más rápida. Como describió TechCrunch, muchos ven a AMP como un intento por Google de competir mejor con Instant Articles de Facebook y aplicaciones móviles que proporcionan navegación cada vez más rápida y sencilla. Tiendo a estar de acuerdo.
Las páginas optimizadas con AMP aparecerán en un carrusel de navegación móvil en la parte suprior de los resultados de Búsqueda de Google, relegando artículos de HTML tradicional más abajo en la página. Y estos cargarán casi instantáneamente.
Honestamente, estoy escéptico de AMP para bloggers y pequeños publicistas. Frecuentemente escribimos gran contenido que tiene dificultades para aparecer hasta arriba de los resultados de Búsqueda de Google. Ahora, tenemos que implementar otra tecnología en nuestros limitados recursos esperando que nuestro contenido aparezca en la parte superior. De manera interesante, mientras que aparecen grandes publicistas de medios, no estoy viendo entradas de blog en los resultados de búsqueda AMP y tampoco otros bloggers WordPress:
También sospecho que la UX de enterrar otros resultados de búsqueda bajo el carrusel funcionará bien para Google.
Cuando trabajé en Microsoft, ayudé a lanzar MSN News en 1995 como parte de la MSN Online Network que se lanzó con Windows 95, la respuesta de Microsoft a AOL. MSN News requirió un visor personalizado de aplicación que se ejecutó en una versión de la plataforma Media Viewer de Microsoft, el framework que había habilitado sus anteriores esfuerzos de contenido CD. Pero, dentro de un año, tuvimos que preparar para la web y nuestra fusión con NBC---después se convirtió en MSNBC.com. Tuvimos que personalizar nuestro framework de publicación para generar tanto Media View como HTML de manera simultánea. Esto creó un número de nuevas complejidades.
AMP me recuerda a todos esos esfuerzos. Es una versión de HTML extremadamente diferente, altamente limitada que requiere cambios vastos a tu sitio y cualquier publicidad que pudieras estar usando.
El Complemento Gratuito WordPress AMP
La buena noticia es que WordPress ha lanzado un complemento AMP gratuito que te ayuda a implementa AMP sin mucho desarrollo extra. Sin embargo, tiene muchas limitaciones. EL diseño de tu sitio es demasiado limitado, y hay conflictos con otros complementos WordPress, técnicas comunes de optimización, y más. AMP también se convertirá ahora en una carga adicional para desarrolladores de temas WordPress.
AMP está en su infancia, y estoy decepcionado de que Google eligió crear un framework completamente nuevo en vez de trabajar con publicistas para optimizar HTML5 para configurar más rápidamente cómo deberían cargar las páginas, que debería cargar primero, y cómo diseñar texto rápidamente. Esto habría sido una aproximación más ilustrada. Pero entonces, los equipos Google son genios.
A pesar de mis preocupaciones, en este tutorial te guiaré a través de instalar el complemento AMP para WordPress y el complemento Yoast SEO Glue para AMP, que te da un poco más de control sobre la apariencia final de tu sitio.
¿Cómo Luce AMP en WordPress?
Aquí hay un ejemplo de una página AMP comparada con la página HTML original. Puedes navegarlas dinámicamente, aquí para la original y aquí para la versión AMP. Ciertamente, la carga de la página es mucho más rápida con AMP.
Imagen de la página HTML5 Original en JeffReifman.com:
La siguiente etiqueta de enlace es agregada a cada página dentro del bloque <head>, diciendo a los motores de búsqueda que una versión AMP de la página está disponible.
1 |
<link rel="amphtml" href="http://jeffreifman.com/2016/01/28/a-new-business-model-for-twitter/amp/" /></head> |
2 |
Pero también hay un enlace canónico definiendo la URL de la página fuente para enlazar:
1 |
<link rel="canonical" href="http://jeffreifman.com/2016/01/28/a-new-business-model-for-twitter/" /> |
Imagen de la página AMP en JeffReifman.com:
Los menús y la navegación se han ido, y la marca se ha ido en gran parte (aunque hay algunas opciones), pero la página carga rápido.
Déjame guiarte a través de activar AMP con WordPress.
El Complemento AMP WordPress
Puedes estudiar y descargar el Complemento AMP WordPress desde el directorio de complementos WordPress. O, puedes buscarlo e instalarlo directamente desde tu Tablero WordPress.
Solo ve a Complementos > Agregar Nuevo y busca AMP. Después, da clic en Instalar Ahora:
Una vez instalado, da clic en Activar:
Una vez activado, solo visita cualquier publicación en tu blog WordPress con la extensión /amp/. Por ejemplo, el artículo Amazon Marketplace Fraud Made Easy es uno de mis resultados de Búsqueda de Google más populares. Aquí está como luce cuando visitas la versión AMP en http://jeffreifman.com/2014/03/25/amazon-makes-fraud-easy-in-marketplace/amp/:
El Complemento Glue para Yoast SEO & AMP
El complemento genérico AMP para WordPress ofrece pocas personalizaciones. Los chicos de Yoast SEO han creado una adición para su popular complemento que mejora tu soporte AMP.
Puedes revisar el Complemento Glue para Yoast & AMP, o instálalo a través del tablero WordPress como hicimos anteriormente para el complemento AMP. Una vez activado, debería lucir así:
Nota: Asegúrate de tener el complemento Yoast WordPress SEO instalado primero.
Puedes modificar tus ajustes AMP a través del menú de barra lateral de Yoast SEO---da clic en AMP al fondo del menú.
Verás las varias maneras en que el complemento Glue te permite mejorar tu implementación AMP.
Primeramente, Yoast te permite extender funcionalidad AMP a páginas y otros tipos de páginas de WordPress. AMP por defecto solo cambia publicaciones sensibles al tiempo--está diseñado primariamente para nuevos artículos:
Nota: Si ves páginas en blanco debajo de las pestañas, asegúrate de que actualizas el complemento original Yoast SEO y eso debería arreglarlo.
Después, Yoast ofrece algunas maneras útiles de personalizar la marca, diseño y esquema de color:
Y finalmente, ellos ofrecen una manera de colocar código de Analytics personalizado estilo-AMP. Esto no es tan sencillo como parece. Nota el código que tuve que pegar abajo para hacerlo trabajar:
Encontré la versión AMP para implementar Google Analytics aquí; solo personaliza tu código de cuenta para tu sitio web:
1 |
<amp-analytics type="googleanalytics" id="analytics1"> |
2 |
<script type="application/json"> |
3 |
{
|
4 |
"vars": { |
5 |
"account": "UA-xxxxxxxx-x" |
6 |
},
|
7 |
"triggers": { |
8 |
"trackPageview": { |
9 |
"on": "visible", |
10 |
"request": "pageview" |
11 |
}
|
12 |
}
|
13 |
}
|
14 |
</script>
|
15 |
</amp-analytics>
|
Estoy seguro de que Yoast continuará actualizando su complemento Glue a lo largo del tiempo mientras la funcionalidad del complemento AMP se desarrolla.
Sobre todo, es bastante simple comenzar en esto. Pero no lo es.
Depurando Errores AMP
Unos pocos días después de que instalé AMP, recibí un amistoso email de la Consola de Búsqueda de Google reportando 10 páginas con errores. Pero de hecho, todas las publicaciones AMP en mi sitio estaban rotas.
Inicié sesión en la Consola de Búsqueda de Google para navegar las páginas con errores y vi esto:
Hice clic en una de las páginas:
Después, hice clic en Abrir Página y vi los errores a más detalle. Esencialmente, puedes hacer esto de manera manual agregando /amp#development=1 a la URL, como: http://jeffreifman.com/2014/02/24/how-to-secure-your-mac-from-potential-theft/amp/#development=1. Y después, abre la Consola JavaScript en tu navegador:
Resulta que todas mis páginas del sitio web con AMP habilitado en JeffReiman.com estaban fallando por el error: La etiqueta 'script' no es permitida excepto en formularios específicos. Sin embargo, en PublishingwithWordPress.com, no había errores.
En una serie futura en Envato Tuts+, describo cómo logré personalizar JeffReiman.com para lograr una Carga de Página de 100. Esto requirió usar características personalizadas de W3 Total Cache para colocar algunas características JavaScript minimizadas cerca del final de la página antes de </body>. AMP no permite esto, y el complemento WordPress AMP no es capaz de filtrarlo.
1 |
<script type="text/javascript" src="http://c4.jeffreifman.com/wp-content/cache/minify/000000/68b0b/default.include-footer.952e41.js?d4992f"></script></body> |
Necesito investigar más para determinar si W3 Total Cache se apagará para mi para ciertas rutas como /amp/ (poco probable) o si necesito encontrar otra solución. Colocando estos scripts de vuelta en <head> afectarán mi Velocidad de Carga Google. De manera interesante, recientemente también descubrí que usar anuncios Google DFP en mi sitio web también rompe la Velocidad de Página Google. Google es un maestro difícil de buscar, y no hace todo fácil de usar de sus tecnologías.
Me quedé pensando qué es más importante: las valoraciones de Velocidad de Página Google, soporte AMP, o mi tiempo de desarrollo y depuración.
En Conclusión
Francamente, no estoy seguro de que tus páginas AMP de blog alguna vez verán la luz del día cerca de la parte superior de la búsqueda, tampoco estoy seguro de que ganarás muchos ingresos exitosamente de estas sin personalizaciones adicionales. Google parece estar ajustando AMP para más publicistas de medio con los recursos para optimizar mejor vistas para marca, estética e ingreso.
Esencialmente, AMP es la ruta de una web de valor optimizado cuestionable para la comunidad open-source, mientras que los Instant Articles de Facebook son los elegidos elite para el "gran" jardín amurallado. Preferiría haber visto que Google construyera un modelo priorizado de carga en HTML5 con scripts de acompañamiento.
Para mi, AMP solo hace más difícil para pequeños publicistas permanecer relevantes. Estoy contento de que WordPress está manteniendo el esfuerzo para ayudar, y estoy seguro de que los diseñadores de temas lo harán también, pero muchos defectos permanecen. Creo que Google ha perdido la marca en realmente ayudar a cualquiera fuera de los publicistas web más grandes aquí.
Enlaces Relacionados
- Documentación FAQ de AMP Project
- El Complemento AMP WordPress
- El Complemento Glue para Yoast SEO AMP
- Presentando el Accelerated mobile Pages Progress, para una web móvil abierta más rápida (Google Blog)
- Google Anuncia Accelerated Mobile Pages Project Para Traerte Artículos de Carga Rápida (TechCrunch)
- Facebook Comienza a Hospedar "Instant Articles" de Publicistas (Tech Crunch)
By
