Google AMP – Cómo Implementarlo en WordPress

Actualizado July 17, 2017

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.

Correlación entre velocidad y tasas de conversión en móviles

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.

google amp example

Ejemplo de Google AMP

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.

google amp single page example

Otro ejemplo de Google AMP

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.

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.

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

google amp wordpress plugin

Google AMP WordPress plugin oficial

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.

wordpress amp customize appearance

Estilos de WordPress AMP

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.

wordpress amp post

Vista previa de WordPress AMP

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.

amp for wp plugin

AMP para WP WordPress plugin

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.

Ejemlo de Kinsta AMP en SERPs

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

Opciones de páginas para móviles aceleradas

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

Página principal AMP

Page Builder

En Page Builder puede habilitar que AMP widgets puedan ser usados.

AMP Page Builder

Diseño

Bajo la pantalla diseño puede lanzar post builder o seleccionar un esquema prediseñada. Para búsqueda de HTTPS puede añadir 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;}

Diseño AMP

Singular

Bajo la pantalla de Singular, puede habilitar iconos sociales, deshabilitar enlaces, mostar el autor bio y cambiar las opciones de publicaciones relacionadas.

Publicaciones singulares de AMP

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.

Publicidad – AMP

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.

AMP menu

AMP menú

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.

AMP social

AMP social

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

AMP seo options yoast

AMP opciones de SEO

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.

AMP analytics

AMP analíticas

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.

AMP structured data

AMP datos estructurados

Formulario de Contacto

La pantalla de formulario de contacto le permite habilitar el soporte de Contact Form 7.

AMP contact form

AMP formulario de contacto

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.

AMP notifications

AMP notificaciones

Cometarios

En esta pantalla puede habilitar el soporte de sistemas de comentarios de terceros tales como Disqus y Facebook.

AMP comments

AMP comentarios

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.

AMP advanced settings

AMP ajustes avanzadas

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.

AMP extensions

AMP extensiones

Y aquí viene nuestra publicación mediante el uso de AMP for WP plugin.

Ejemplo de AMP for WP

 

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.

amp woocommerce

AMP WooCommerce plugin

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.

google amp validator

Validador de Google AMP

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.

amp validator chrome extension

Errores de Google AMP

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.

Not a valid AMP page

Página AMP no válida

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.

google search console amp

Reporte de Páginas Móviles Acelerados en GSC

Si tiene errores, Google le notificará por correo electrónico que debe agregar los datos estructurados necesarios a sus páginas de AMP.

amp errors google search console

Errores de AMP en GSC

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.

seo amp

Monitoreo New Relic con Google AMP

Los clientes que utilizan el monitoreo New Relic – 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.

cloudflare accelerated mobile links

Cloudflare Accelerated Mobile Links

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.

Este artículo fue escrito por Brian Jackson

Brian enfoca en nuestros esfuerzos de marketing a través de las redes sociales: desde el desarrollo de la nueva estrategia de crecimiento online, creación de contenido, optimización técnica de buscadores hasta nuestra expansión en la comunidad WordPress. Es apasionado por Wordpress lleva usándolo desde hace más de 8 años e incluso está desarrollando su propio plugin exclusivo. A Brian le encanta el blogueo, películas, montar en bici y trabajar con sitios web.

Artículos relacionados

  1. Gravatar for this comment's author
    Sergio Daza Ortega mayo 19, 2017 at 7:12 am

    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.

Deja un comentario

kinsta newsletter

¿Utilizas WordPress?

¡Únete a más de 20.000 lectores que ya reciben nuestro newsletter semanal GRATUITO con consejos de WordPress sobre cómo generar más tráfico e ingresos para tu negocio!

You have Successfully Subscribed!

Send this to a friend