Configurar Google AMP en tu blog o site de WordPress es OFENSIVAMENTE fácil

Seguro te pasa lo que nos pasó a nosotros.

Tu site podría mejorar el tiempo de carga en móvil y, a pesar de que ya es responsive, no parece haber mucho más por optimizar.

Y como cada vez más site se suben a la ola de Google AMP, no quieres quedarte atrás.

Sea o no tu caso, si quieres aprender a implementar Google AMP en WordPress, este plugin es la mejor opción.

Es tan fácil de configurar y ponerlo en marcha que te vas a sorprender.

Nosotros lo hemos hecho dos o tres veces ya, y la verdad es que a lo mejor la primera vez tardes un poco más, pero puedes tenerlo en solo 15 minutos.

Sigue leyendo y verás.

Índice

• ¿Qué significa AMP en Google?
• Qué necesitas saber
• Paso 1: Instala el plugin AMP wordpress
• Paso 2: Te hemos mentido. Son DOS plugins de AMP
• Paso 3: A configurar AMP en tu WordPress
• AMP for WordPress->General
• AMP for WordPress->Homepage
• AMP for WordPress->Design
• AMP for WordPress->Single
• AMP for WordPress->Advertisement
• AMP for WordPress->Menu
• AMP for WordPress->Social
• AMP for WordPress->SEO
• AMP for WordPress->Analytics
• AMP for WordPress->Structured Data
• AMP for WordPress->Notifications
• AMP for WordPress -> Comments
• AMP for WordPress->Translation Panel
• AMP for WordPress->Advanced Settings
• Extensions
• Fix AMP Errors
• Paso 4: Validar la correcta instalación de AMP en tu sitio o blog
• 1. AMP Validator
• 2. Google Search Console (Google Webmaster Tools)
• 3. Resultados de Búsquedas
• Paso 5: Optimización o nivel de mejora de tus páginas con AMP

Primero: ¿Qué significa AMP en Google?

 

Imaginamos que si estás leyendo este post ya lo sabrás, pero preferimos partir desde lo más básico:

El Proyecto AMP de Google es una iniciativa open source impulsada por Google que busca hacer de la Web “un lugar mejor para todos”. La idea es tener un código para tener páginas y anuncios simples, de carga rápida y atractivos que se puedan reproducir sin mayores problemas independientemente del dispositivo.

Entonces, realmente es una especie de markup derivado del HTML, que se basa esencialmente en un etiquetado similar pero más simple y básico pero que siga permitiendo tener todo lo que una página necesita para mostrarse de manera bonita y eficiente en todos los dispositivos.

Puedes leer más sobre esto en AMP Project.

AMP para WordPress: Qué necesitas saber

 

Pues muy poco. Si tienes un sitio Web o blog con WordPress, has instalado y configurado plugins alguna vez y sigues los pasos que te detallaremos aquí, debería ser más que suficiente.

Y claro, si tienes dudas, déjanos un comentario o contáctanos y te ayudaremos, o al menos lo intentaremos.

NOTA IMPORTANTE:
Implementar AMP en tu sitio de WordPress implica cambios a nivel de estructura del sitio, URLs y Permalinks (enlaces permanentes), de modo que es indispensable en primer lugar hacer un respaldo de tu sitio por si surgiera algún inconveniente.
Además, cambios en URLs implican cambios en la indexación, que en caso de no ir bien, pueden suponer errores 404 en tus páginas indexadas, fluctuaciones en la indexación o posicionamiento, etc. Si decides ir adelante, debes tener claras las implicaciones y riesgos que conlleva.

Paso 1: Instala el plugin AMP wordpress

 

Antes de poder hacer esto, estuvimos investigando un poco las opciones y herramientas para implementar AMP en nuestro blog.

Tras analizar y tantear posibilidades, creemos que el mejor plugin AMP para WordPress es éste, llamado AMP for WP – Accelerated Mobile Pages, desarrollado por Ahmed y Mohammed Kaludi.

Simplemente empecemos por este paso.

Instala este plugin en tu blog (no te detallaremos cómo instalar un plugin de WordPress, ya que a este punto asumimos que lo sabes. Si no lo sabes, lee este artículo.

Paso 2: Te hemos mentido. Son DOS plugins de AMP

 

Sí, el primer plugin lo que hará es facilitarte el proceso, pero la “tecnolgía” del AMP Project de Google está en este otro plugin, llamado AMP, desarrollado por Automatic.

No te preocupes, al instalar el primero, te pedirá directamente instalar el segundo.

Así que vamos allá.

Tras instalarlo, actívalo, claro está.

Paso 3: A configurar AMP en tu WordPress

 

Tras instalar y activar ambos plugins, te aparecerá la opción de ir al panel de AMP para mirar las opciones.

AMP for WordPress->General

 

Aquí verás opciones básicas como la de incluir un logo con las dimensiones que deseas en tus páginas AMP.

Pero el punto importante es decidir si quieres implementar AMP en todas las páginas.

¿Qué significa esto?

Que si no lo haces, las páginas de tu sitio (páginas, no entradas) no tendrán al final el subdirectorio /amp/ y en los resultados de búsquedas seguirán llevando a la misma página que lleva ahora.

En nuestro caso, también queremos que nuestras páginas sean AMP.

Esto puede requerir que vuelvas a actualizar tus Permalinks. Es muy simple, pero te dejan un enlace por si no supieras hacerlo.

Luego, tienes la opción “Individual AMP Page (Bulk Edit)”, que te permite decidir si quieres que tus páginas sean AMP por defecto o no.

Si eliges la opción “Show by Default”, las páginas actuales serán cambiadas y las que crees nuevas serán AMP por defecto.

Si eliges “Hide on Default”, significa que tendrás que modificar una a una las que quieras que sí sean AMP, y al crear nuevas, no serán AMP por defecto y si quieres que lo sea, tendrás que cambiarlo manualmente.

Como ves en la imagen, nosotros queremos que sean AMP por defecto.

AMP for WordPress->Homepage

 

Explicamos cada punto de esta sección:

Homepage Support: “On” hará que tu página principal sea AMP, “Off” mantendrá tu home en móvil como esté actualmente.

Front Page: “On” habilitará una opción para elegir una página distinta a la actual como portada. Esto es importante porque AMP no soporta widgets o secciones especiales, de modo que si tu home está hecha a base de widgets o elementos “menos comunes”, tal vez quieras hacer una página especial para tu Home AMP.

Title on Static Front Page: “On” mostrará el título de la página.

Override Homepage Thumbnail Size: “On” te permite elegir un tamaño especial para las imágenes miniatura de tu portada. “Off” mostrará el tamaño por defecto. Aquí puedes dejarlo en “off”, probar e ir ajustando si no te gusta como queda.

Non-AMP HomePage link in Header and Logo: Si un usuario hiciera click en el logo para ir a la portada, ¿quieres que lo lleve a tu portada AMP o a tu portada normal? Tú decides.

AMP for WordPress->Design

 

Drag & Drop Post Builder: Es un botón que te lleva a la personalización de la estructura de los posts. Puedes decidir qué quieres que se muestre y qué no y el orden.

Design Selector: Puedes elegir entre tres opciones de plantillas o diseño de tus páginas AMP. Puedes elegir cada una de las opciones y quedarte con la que te parezca más apropiada para tu sitio web.

Search: OJO, esta es una de las opciones más “delicadas”. El buscador es una gran funcionalidad para que los usuarios puedan encontrar posts o temas en tu site, pero solo lo debes activar si tienes un certificado SSL en tu sitio web, o sea, si tu página es https. De lo contrario, Google Search Console te mostrará constantemente errores quue pueden suponer luego problemas de indexación, entre otros.

Call Now Button: Esta es una opción que te permite mostrar un botón asociado al número de teléfono que introduzcas, para que tus visitantes tengan la opción de llamarte. Si eliges esta opción, se despliegan dos más; una para poner el número de teléfono y otra para elegir el color del botón.

Custom CSS: Si se te da bien el diseño Web y sabes algo de CSS, puedes personalizar el diseño de tus páginas AMP para que se vea justo como quieres.

AMP for WordPress->Single

 

Sticky Social Icons: Si quieres que se muestren iconos sociales para que tu audiencia pueda compartir tu contenido, pon esta opción en ON.

Excerpt in single: Activa esta opción si quieres que se muestre el extracto inicial de tu post en la parte superior de cada post. Yo no lo recomiendo por como se ve, así que si lo activas, asegúrate de probar bien cómo queda.

Next-Previous Links: Si quieres que los usuarios puedan seleccionar ir al post anterior o siguiente, activa esta opción.

Show Post Modified Date: Activa esta opción si quieres que los lectores puedan ver la fecha de última edición del post en el que están.

Author Bio in Single: Esto muestra la información del autor que escribió la entrada en la que está el lector.

Show Related Post from: Puedes elegir si quieres que los posts relacionados sean en función de las categorías o de las etiquetas

Number of Related Posts: Puedes elegir cuántos posts relacionados quieres que se muestren dentro de cada artículo.

AMP for WordPress->Advertisement

 

En esta sección simplemente tienes unas cuantas “cajas” o espacios para poner anunciosde Google AdSense en tus artículos.

AMP for WordPress->Menu

 

Teniendo en cuenta que esta implementación de AMP modificará las URLs de todo tu sitio agregando /amp/ a quienes naveguen desde móviles, esta opción simplemente agrega esta terminación a los elementos de los menús que tengas en tu sitio, para que quienes te visiten siempre mantengan una navegación AMP. De no poner esta opción en ON, cualquier click en un enlace de menú los sacará de la versión AMP de tu sitio.

AMP for WordPress->Social

 

Esta opción te permite elegir qué perfiles de redes sociales quieres activar para que se muestren en tu sitio Web. Desde los comunes Facebook o Twitter hasta Line.

AMP for WordPress->SEO

 

Meta Description: Si quieres que se vea tu meta descripción al inicio de tu post, pon esta opción en ON.

Additional tags for Head section AMP page: Si tienes que introducir algún código entre las etiquetasdel código de tu página, este es el sitio.

Yoast SEO Options: Si usas el popular plugin de SEO de Yoast, puedes traer las configuraciones que tengas allí a tus páginas AMP.

Advanced Index & No Index Options: Aquí puedes elegir si hay algunas URLs o secciones del site que quieres que por defecto no sean indexadas en tu versión AMP del sitio Web.

AMP for WordPress->Analytics

 

Cualquier tipo de tracking que hagas a tu sitio, al implementar Google AMP, es tan fácil como activar aquí la opción que desees. Por un lado, tienes la opción de elegir el tipo de rastreo, yendo desde Google Analytics, pasando por comScore o Piwix.

Por otro lado, si tienes todo centralizado en Google Tag Manager, puedes elegir esta opción e introducir allí la información de tu contenedor. Muy simple.

AMP for WordPress->Structured Data

 

Si quieres establecer un mejor etiquetado y tener datos estructurados en tu sitio Web AMP, tienes aquí unas opciones simples para introducir imágenes con tamaños por defecto para el logo y la imagen principal del post.

AMP for WordPress->Notifications

 

Cualquier tipo de notificación que quieras mostrar a tus usuarios al entrar a tu sitio Web, como por ejemplo un aviso de uso de cookies, lo puedes hacer aquí.

AMP for WordPress->Comments

 

Aquí puedes configurar cómo quieres que se muestren los comentarios en tu nuevo sitio AMP. Puedes determinar desde el número de comentarios que quieres que se muestren hasta configurar si quieres usar plataformas como Facebook o Disqus.

AMP for WordPress->Translation Panel

 

Como te habrás dado cuenta ya, todo en este plugin viene en inglés por defecto. Aquí es donde puede traducir todos los textos y mensajes al idioma de tu sitio.

AMP for WordPress->Advanced Settings

 

Archive page Support: Si quieres que la sección de archivo del sitio esté adaptada para AMP, pon esta opcion en ON.

Mobile Redirection: Esta es LA CLAVE de todo. Si seleccionas esta opción, quienes te visiten desde el móvil verán finalmente tu sitio Web en su versión AMP.

RTL Suppport: En caso de que tengas un sitio en árabe o en algún alfabeto que se lea de derecha a iziquierda, aquí puedes cambiar esta configuración.

Link to Non-AMP page in Footer: En caso de que quieras darle la opción a tus usuarios de ir a la versión normal de tu página Web, es decir, sin Google AMP, esto activa un link en el footer para esto.

Enter HTML in Header: Aquí puedes introducir HTML adicional en la cabecera de tu sitio, siempre y cuando sea HTML válido para el protocolo AMP.

Enter HTML in Footer: Lo mismo, pero para el footer.

Extensions

 

Se trata de una serie de plugins adicionales o complementarios al plugin de AMP para WordPress, que permite añadir mejores CTAs (Call to Action), optimización de anuncios, formularios de captación de leads, etc. Pero no entraremos en profundidad al respecto en este post. Si tienes alguna duda, déjanos un comentario.

Fix AMP Errors

 

Esta sección es útil para descubrir errores que puedas tener en la implementación. Por ejemplo, como comentamos anteriormente, si cometes el error que comentamos antes de seleccionar la opción de incluir buscador sin tener HTTPS, verás errores.

Esto está conectado (o deberías conectar) a tu Consola de Webmasters de Google, con lo cual simplemente te mostrará los errores que se hayan detectado por esa vía. Si no lo has conectado, no podrás ver errores aquí.

De más está decir que es indispensable corregir estos errores para una implementación exitosa.

Si tienes problemas que no logras solucionar, puedes dejarnos un comentario al final del post.

Paso 4: Validar la correcta instalación de AMP en tu sitio o blog

 

Lo primero es ver el HTML de AMP o simplemente recurrir a un validador que te diga que todo va correctamente. Hay tres métodos, que te contamos de más importante e inmediato a menos:

1. AMP Validator

 

AMP Validator es una herramienta propia de Google que prueba tus URLs de AMP y te dice si considera que la implementación es correcta o no.

Es el método más directo y fiable, por un lado, porque no necesitas esperar a que las arañas de Google pasen a indexar tu sitio, sino que puedes ir activamente a hacer la prueba.

Por otro lado, más allá de la evidencia de que al ser Google AMP una herramienta propia y sabrán decirte bien si lo has hecho bien o no, está el hecho de que finalmente será Google quien te lea y decida cómo indexarte, con lo cual si Google no lo ve bien, debes asegurarte de que sí lo haga porque si no no lo tendrá en cuenta a la hora de mostrarte en los resultados de búsqueda.

2. Google Search Console (Google Webmaster Tools)

 

Una vez implementado el AMP en tu WordPress, puedes ir a la herramienta “Fetch as Googlebot” o “Explorar como Googlebot” para asegurarte de que tenga al menos una URL leída a la espera de indexar.

Luego, puedes ir a la sección “Search Appearance” o “Aspectos de la Búsqueda” y luego a “Accelerated Mobile Pages“, donde podrás ver si hay errores en la forma de rastreo de Google

Como decíamos, esto puede tardar más tiempo en aparecer, ya que no está controlado por usuario sino que depende a que Googlebot pase por tu site y reconozca si todo va bien o no.

3. Resultados de Búsquedas

 

Una vez Google haya pasado por tu site y haya notado que tu página cuenta con AMP, podrás ver en el resultado algo como esto:

Ya es esa tu última prueba y garantía.

Pero además, es importante saber esto:

Paso 5: Optimización o nivel de mejora de tus páginas con AMP

 

Como esto no lo hacemos por que sí, sino que queremos obtener una mejora significativa en el nivel de optimización en la carga del sitio cuando se accede desde móviles, te damos aquí ejemplo de cuánto puede mejorar, utilizando la herramienta PageSpeed Insights de Google…porque de nuevo repetimos, lo que importa es cómo esté tu site a los ojos de Google.

En una futura actualización probablemente podamos incluir aquí cómo quitar Google AMP de tu sitio si dejas de quererlo, o cómo desactivarlo.

Si te interesa alguno de los siguientes términos, este post es para ti:

• plugin amp wordpress
• amp google
• amp html
• amp analytics
• amp que significa
• amp accelerated mobile pages

Pero si no contestamos a todas tus preguntas aquí, puedes contactarnos y te ayudaremos con gusto.