La web está en constante evolución y para muchos propietarios de negocios esto significa estar al tanto de todos los cambios de Google. Si no lo adaptas, significa que puedes quedarte atrás. Google AMP, la iniciativa móvil para acelerar la web, ahora se acerca a su aniversario de un año. Dado que es mucho más estable ahora de lo que era hace 6 meses, pensamos que sería un buen momento para compartir con ustedes algunos pasos sobre cómo empezar a usar Google AMP en WordPress, así como algunos de las ventajas e inconvenientes de esta nueva plataforma.
¿Qué es Google AMP?
Google AMP (Proyecto de Páginas Móviles Aceleradas) se lanzó originalmente en octubre de 2015. El proyecto se basa en AMP HTML, un nuevo marco abierto construido totalmente de las tecnologías web existentes, que permite a los sitios web construir páginas de peso ligero. Para decirlo de una forma simple, ofrece una manera de servir una versión simplificada de su página web actual.
Desde el primer día, un enfoque clave para AMP ha sido la velocidad. Probablemente lo más frustrante sobre la web móvil – confirmada por reciente investigación de Google es que el 53% de la gente dejará un sitio que no se cargue en tres segundos o menos. Eso es lo peor de todos los mundos, tanto para los usuarios, empresas, editores, sitios web y la web móvil en su conjunto. — David Besbris, Jefe del proyecto AMP en Google.
Según el último reporte de Akamai sobre el Estado del Rendimiento Online de Minoristas cada hasta una décima de segundo importa. Incluso un ligero aumento en el tiempo de carga de la página hasta 2.8 segundos causó una disminución de un 2.4% en las tasas de conversión.
Muchas empresas grandes han adoptado Google AMP durante el año pasado, estas incluyen WordPress, Reddit, eBay, Pinterest, Washington Post, Wired, Gizmodo, etc. De acuerdo con Google, Slate vio un aumento de un 44% en visitantes únicos mensuales y un aumento de un 73% en visitas por visitante único mensual.
Cuando una página se publica a través de AMP en Google, tendrá el símbolo AMP junto a él, como se ve a continuación en el demo de New York Times . Tenga en cuenta, debe estar en un dispositivo móvil para probar esto. También puede utilizar el emulador de dispositivo en devtools de Chrome. El marcado de datos estructurado permite a Google presentar su contenido de manera más destacada en los resultados de búsqueda. Por ejemplo, los artículos de AMP que incluyen las propiedades de marcado adecuadas pueden obtener una posición elegante en SERPs como se ve a continuación.
Y aquí hay un ejemplo de cómo es una página de AMP en el sitio web del New York Times. Como se puede ver es muy básica y simplista, la cual es el objetivo de AMP. Esto asegura que se cargue rápidamente y ofrece una mejor usabilidad.
Igual que con cualquier nueva plataforma debemos pensar los pros y contras y decidir si es la decisión correcta para su negocio y/o sitio web.
Puntos a Favor de Google AMP
- AMP es gratuita y fuente de abierta.
- AMP definitivamente puede mejorar los tiempos de carga de su sitio WordPress. Y recuerde que la velocidad es un factor de clasificación.
- Mejores ubicaciones en SERPs con posibilidad de carrusel para mejor CTR. En una implementación con un editor popular, Google AMP resultó en un 600% en CTRs!
- Google AMP nos obliga usar una gran cantidad de prácticas recomendadas de rendimiento web tales como la prevención de grandes CSS y marcos JS.
- Podrá impactar a sus conversiones en una forma positiva.
- Se habían hecho muchas mejoras durante el año pasado y las opciones publicitarias ahora están disponibles en Google AMP. Esto significa que las revistas y las nuevas publicaciones pueden retener o incluso aumentar sus ingresos de AdSense.
- Optimización de imágenes automática (conversión hasta el formato WebP)
- AMP Lite introduce más optimizaciones para conexiones de red lentas. Google experimentó una reducción de un 45% de bytes.
Puntos Contra Google AMP
- AMP actualmente no es un factor de clasificación, pero puede ser en el futuro. Esto podría ser visto tanto a favor como en contra.
- AMP podría ser difícil de implementar y probar si no eres un desarrollador. Sin embargo, afortunadamente la plataforma de WordPress es un poco más fácil que otras.
- Introduce una plataforma totalmente nueva y funcionalidad de la que usted tiene que preocuparse. ¿Qué pasó con la optimización simple de nuestros sitios para dispositivos móviles?
- Puede dañar o afectar sus conversiones de manera negativa.
- Había reportes sobre el cómo Google AMP destroza las estadísticas en Google Analytics.
- Algunos han visto una colaboración peor y una tasa de rebote más alta
- Pueden haber scripts y aplicaciones de terceros no apoyados.
- No hay soporte de algunos navegadores antiguos como Internet Explorer 11. Han declarado que en general apoyarán las 2 últimas versiones de los principales navegadores como Chrome, Firefox, Edge, Safari y Opera. Y son compatibles con las versiones de escritorio, teléfono, tablet y web de los respectivos navegadores.
- Lean la opinión de Jan Dawson de por qué Google AMP está haciendo más difícil en vez de hacer más fácil, la publicación en la web.
- Lean el artículo de Alex Kras sobre algunos de los problemas con Google AMP, junto con una respuesta del técnico líder en el proyecto AMP en Google.
- Tim Kadlec comparte su opinión sobre Google AMP y la necesidad de una alternativa mejor: políticas de rendimiento de contenido.
Desde Febrero de 2017 Google AMP empezó a mostrar el enlace directo de los editores. Antes sólo se veía la versión de Google que fue servido de la cache. Esto fue una preocupación de la gente por cuestiones de marcación. Afortunadamente Google comprendió la situación y cambió la característica. Ahora el campo de la URL continuará mostrando la URL de Google. Sin embargo el encabezado de AMP mostrará un icono de enlace o cadena que se llaman el botón de «ancla'». Haciendo clic en él mostrará la URL directa del editor así se podrá copiar y pegar fácilmente. No es una solución perfecta pero mejor tener algo que nada.
Aquí viene otro ejemplo sobre la pérdida de marcación.
Another reason to not use Google AMP –> You lose your brand :) cc @HuffingtonPost you might want to think about it :) pic.twitter.com/n3LEHIOEBZ
— Syed Balkhi (@syedbalkhi) January 19, 2017
También es importante tener en cuenta que si la única página de versión móvil que existe es una versión de AMP, Google seguirá utilizando la versión de escritorio para la indexación, incluso cuando Google cambie su índice al índice móvil primero.
So @maileohye confirmed that in a situation where there is desktop and AMP, Google will index desktop for mobile first. #StateofSearch
— Jennifer Slegg (@jenstar) November 14, 2016
¿Cómo Configurar Google AMP en WordPress?
Afortunadamente, es mucho más fácil ahora implementar Google AMP en WordPress que hace 6 meses. Se han hecho muchos progresos en los plugins de WordPress y en la plataforma en su conjunto. Recuerde sin embargo, su código debe ser validado con Google para mostrar la versión AMP de su sitio en SERPs. Un plugin convertirá su publicación en una versión de AMP, pero es Google quien decide mostrar la versión de AMP en su lugar.
Básicamente, cómo funciona es que su publicación de WordPress obtiene una URL diferente asignada a ella. Todo esto es manejado por el plugin de WordPress automáticamente. Típicamente / amp o /?amp está agregado a su publicación actual. Aquí hay un ejemplo:
Publicación de Blog Original URL: https://domain.com/blog-post
Publicación de Blog AMP URL: https://domain.com/blog-post/amp/
Plugins de Google AMP WordPress
En la actualidad hay 2 plugins populares de WordPress en el repositorio que pueden ayudarle a configurar con Google AMP. El primero es el plugin gratuito oficial de AMP , que en realidad es desarrollado por el equipo de Automattic.
Al escribir esto, actualmente tiene más de 200,000 instalaciones activas con un 3.5 de 5 estrellas. Puede descargarlo desde el repositorio de WordPress o buscándolo en el panel de WordPress en «Agregar nuevos» plugins. Puede personalizar la apariencia un poco bajo el editor «Apariencia AMP» (como se ve a continuación). Sin embargo, sus opciones son bastante limitadas con el plugin y se basa en saber cómo implementar filtros adicionales para características como AdSense o Analytics.
También es importante tener en cuenta que sólo admite publicaciones, no páginas. Aunque han anunciado que están trabajando en la adición de esta característica. A continuación, se muestra el ejemplo de cómo se ve nuestra publicación de WordPress después de instalar el plugin.
Si usted desea tener una manera fácil de agregar características adicionales, entonces aquí es donde el plugin gratuito AMP para WP entra en juego. Esto es básicamente una extensión del plugin oficial AMP y le ofrece características y soporte adicionales. Es desarrollado por Ahmed Kaludi y Mohammed Kaludi quienes también dirigen una exitosa tienda de plantillas de WordPress. Nota: Para usar esto, el plugin oficial de AMP es necesario.
Al momento de escribir esto, actualmente el plugin tiene más de 50,000 instalaciones activas con un 4.6 de 5 estrellas de calificación. Puede descargarlo del repositorio de WordPress o mediante la búsqueda del mismo en el panel de control de WordPress en «Agregar nuevos» plugins. Este complemento le permite personalizar mucho más con su configuración de Google AMP. También hace páginas de apoyo. A continuación, entraremos más en detalle con respecto a las personalizaciones y las funciones disponibles en la configuración de los plugins de AMP en el panel de control.
¡De hecho lo utilizamos aquí en Kinsta! ¡Usted puede ver que AMP se está ejecutando en esta entrada si se dirige a https://kinsta.com/blog/google-amp/amp/. Y puede ver un ejemplo en SERPs de una entrada de Kinsta a continuación. Se ve el logo de AMP.
General
Bajo la pantalla general puede personalizar el logotipo, el tamaño decidir si desea habilitar AMP en sus páginas. Dependiendo del tráfico de su sitio puede ser que habilite AMP en sus blog posts (tipos de posts).
Página Principal
En la pantalla de Página Principal, puede desactivar el soporte de página principal, configurar el tamaño de la miniatura de la página de inicio y decidir qué pasará cuando los usuarios hacen clic en el logo (vaya a versión AMP de la versión no-AMP).
Page Builder
En Page Builder puede habilitar que AMP widgets puedan ser usados.
Diseño
Bajo la pantalla diseño puede lanzar post builder o seleccionar un esquema prediseñada. Puede activar HTTPS para búsqueda y también agregar el botón «Call now». Hay una opción a CSS personalizado. En nuestro sitio por ejemplo añadimos el siguiente código para personalizar el color de la cabecera:
.amp-wp-header {background-color:#5CC0C0;}
Singular
Bajo la pantalla de Singular, puede habilitar iconos sociales, deshabilitar enlaces, mostar el autor bio y cambiar las opciones de publicaciones relacionadas.
Publicidad
En Publicidad puede habilitar AdSense y elegir las ubicaciones. El plugin es uno de los métodos más fáciles para añadir AdSense con Google AMP. Aquellos que cuentan con las publicidades en sus sitios es una característica muy útil (lectura sugerida: ¿Cómo añadir Google AdSense a WordPress?).
AMP Menú
Bajo Menú puede elegir si añadir o no /amp/ al final de los URLs. Quizás prefiera que sus visitantes se queden en su sitio con AMP si es así debe habilitarlo.
Social
Bajo el menú Social puede añadir qué redes sociales desea que aparezcan en el mővil para compartir el contenido. Para Facebook tendrá que hacer u n registro de App ID.
SEO
La pantalla SEO probablemente sea la más importante ya que muestra cómo Google verá y clasificará su contenido AMP. Recomendamos habilitar la opción «Meta Descripción». Si está usando el Yoast SEO plugin aconsejamos habilitar las opciones «Etiquetas Meta de Yoast» y «Desscripción de Yoast en Id+jason».
Analíticas
Analíticas le permite añadir sripts de seguimiento para Google Analytics así como Google Tag Manager. Deberá añadir estos para asegurarse de que sus datos de reporte estén puestos al día.
Soporta también Segment Analytics, Piwik Analytics, Quantcast Measurement, comScore, Effective Measure, StatCounter, HitStats Analytics, Yandex Metrika, y Chartbeat Analytics.
Datos Estructurados
Esta pantalla le permite personalizar el logo e imagen de post estructurado por defecto.
Formulario de Contacto
La pantalla de formulario de contacto le permite habilitar el soporte de Contact Form 7.
Notificaciones
Bajo Notificaciones puede habilitar la advertencia del uso de cookies. Esto es útil en caso de países con leyes de privacidad más restrictivas.
Cometarios
En esta pantalla puede habilitar el soporte de sistemas de comentarios de terceros tales como Disqus y Facebook.
Ajustes Avanzadas
En esta sección puede habilitar la redirección de móviles. Recuerde que de forma predeterminada solo AMP será habilitada para los usuarios de móviles que hacen clic en los SERPs. Si un usuario móvil navega directamente por su sitio no recibirán ninguna página habilitada de AMP salvo que habilite la redirección. Puede introducir HTML personalizado en esta pantalla y cambiar la acción de enlaces en el footer.
Extensiones
Los desarrolladores también tienen extensiones premium que pueden comprar para extender más el AMP plugin. Algunos populares pueden ser las opciones Email, los botones CTA y soporte de tipos de posts personalizados.
Y aquí viene nuestra publicación mediante el uso de AMP for WP plugin.
Los mismos desarrolladores de AMP para WP también lanzaron recientemente un nuevo plugin, AMP WooCommerce, que le permite habilitar AMP en su tienda de comercio electrónico.
Validando Su Código Google AMP
Después de obtener la configuración de Google AMP en su sitio de WordPress, deberá asegurarse de que su código sea válido, si no Google no mostrará la versión de AMP en SERPs. Puede ejecutar su sitio WordPress a través de la herramienta Google AMP Validator. Se le mostrará en la parte inferior si el sitio es aprobado o no.
También puede descargar la extensión Chrome AMP gratuita que validará cada página. Si aparece en rojo, puede hacer clic en ella y ver rápidamente los errores o las advertencias en la página.
Si no pasa por la validación puede ver un error como este: «Página AMP no válida». En este ejemplo abajo este se debió al uso de etiquetas HTML viejas no soportadas <deltime> y <instime>. Se puede ver una lista completa de etiquetas HTML soportadas por AMP. Páginas AMP inválidas no tendrán características específicas de AMP en los resultados de Google.
También puede consultar su sitio en busca de problemas de AMP en Google Search Console en la sección «Buscar apariencia». Es importante tener en cuenta que muchos usuarios han informado de grandes retrasos con los informes de AMP en Google Search Console. Esto es más probable porque todavía es una plataforma bastante nueva y el rastreo no es tan frecuente.
Si tiene errores, Google le notificará por correo electrónico que debe agregar los datos estructurados necesarios a sus páginas de AMP.
Google AMP SEO
Otro aspecto que usted puede estar preguntando es el lado SEO de las cosas porque ahora usted tiene dos copias de la misma página o publicación. No es necesario preocuparse por el contenido duplicado porque ambos plugins anteriores usan etiquetas canónicas con AMP. Las etiquetas canónicas indican a Google que el contenido original es su versión de escritorio. Google detectará automáticamente las páginas de AMP en su sitio ya que se sirve a su página original con una etiqueta de encabezado que dirige Googlebot a su página de AMP.
Ejemplo en su página original:
<link rel=«amphtml« href=«https://domain.com/amp/»>
Ejemplo en su página AMP:
<link rel=«canonical« href=«https://domain.com/»>
El plugin AMP for WP mencionado antes trabaja bien con Yoast SEO con el fin de añadir etiquetas de meta y OG por objetivos de SEO y redes sociales. Vea el ejemplo a continuación.
Monitoreo New Relic con Google AMP
Los clientes que utilizan el monitoreo New Relic (se requiere licencia) – lo usamos en Kinsta también – deben tener en cuenta que el validador de Google AMP puede fallar debido a un error de script de terceros:
The tag ‘script’ is disallowed except in specific forms.
Esto se debe a que las páginas HTML formateadas para Google AMP no pueden contener ningún JavaScript de terceros. El plugin AMP para WP mencionado anteriormente soporta totalmente New Relic. Pero si necesita desactivar New Relic en páginas AMP, siga las instrucciones en desactivar monitoreo de navegador para páginas específicas. También hay un plugin gratuito de WordPress, Disabled NewRelic For AMP, el cual puede instalar.
Habilitar AMP para Enlaces Externos con CloudFlare
CloudFlare tiene una característica recién lanzada que permite habilitar enlaces móviles acelerados para enlaces externos que tienen AMP ejecutado. Uno de los beneficios para su sitio es que el contenido AMP es cargado en un visor directamente en el sitio que enlazó al contenido. Esto significa que después de que el lector termine el consumo del contenido cierran el visor y vuelven al sitio de usted. Así puede aumentar el tiempo pasado en su sitio globalmente. Se puede habilitar esto dentro de su CloudFlare dashboard.
Resumen
Así, como puede ver, existen maneras fáciles de poner en marcha Google AMP en su sitio WordPress. ¿Debería cambiar directamente a Google AMP? Realmente depende del tipo de sitio de WordPress que usted tenga. Si maneja una revista o un sitio de noticias, podría tener sentido implementar esto de inmediato y empezar a probar posiciones de AdSense. Si usted tiene un negocio de SaaS, Google AMP podría terminar perjudicando sus conversiones si no tiene cuidado. Google AMP sin duda es un cambio importante, especialmente si ya tiene una gran cantidad de tráfico móvil. Nuestro consejo es comenzar a probar, ya que es la única manera de saber si su empresa verá resultados positivos o negativos.
¿Tiene algún otro consejo sobre usar Google AMP con WordPress? ¡Si es así, nos encantaría escuchar sobre ellos a continuación en los comentarios! También asegúrese de comprobar el guía de AMP.
Brian tiene una gran pasión por WordPress, lo ha estado utilizando durante más de 10 años e incluso ha desarrollado un par de plugins premium. Brian disfruta de los blogs, las películas y el senderismo. Conéctese con Brian en Twitter.
La validación del AMP para este plugin parece que siempre falla. EL plugin es deficiente en eso, debería tener el marcado automátizo y optimizado para dejar 100% configurado el AMP.