Cómo instalar las Amp de Google en Wordpress: Personalización

¿Ya has pasado tu web a https? Google no sólo busca la seguridad, también está valorando la rapidez y quiere que tu web en versión móvil vaya más rápida, para ello te “exige” que tengas que instalar las AMP de Google en Wordpress.

No le vale con que sea segura y que tu plantilla sea responsive, ahora Google también te pide que se adapte a la versión AMP.

Puedes esperar a que los temas de worpdress se vayan adaptando a la versión AMP pero he decirte que cometes un error si esperas.

Google lleva tiempo avisando y ya es el momento, Google search console ya analiza estos datos hace meses.

Es un rollo,pero si quieres tener una web de éxito debes que ir puliendo cada pequeño detalle y para eso siempre hay que hacer caso a lo que diga Google.

Si tu plantilla es responsive, genial , pero el que sea responsive no hace que una web sea más rápida, existen plantillas aparentemente responsive pero el código es muy malo o está sobrecargado de elementos o script que perjudican la velocidad de carga. En ese caso, lo mejor es optar por una plantilla limpia, responsive y rápida como Generatepress.

Con AMP, no tendrás este problema ya que ofrecerás al usuario un diseño limpio y en esta ocasión sí acelera la carga de tu web.

Un poco más abajo vas a poder ver un video explicativo sobre cómo instalar esta nueva tecnología y una comparativa de velocidad de las dos versiones (con y sin AMP)

Lee el artículo:

• Cómo mejorar la velocidad de tu web
• Diseño Responsive VS AMP

¿Qué es AMP?

Amp (Accelerated Mobile Pages) se encarga de mostrar la versión html de tu sitio web, de ahí la velocidad a la hora de mostrar datos, ya que simplifica el peso de las páginas

Estos cambios te pueden chocar al principio ya que esa web la cual te has preocupado de mostrar hasta el último detalle para que quede bonita, no lo será tanto cuando lo veas en la versión AMP del movíl.

Tranquilo, no pienses que el diseño al pasar a la versión reducida queda feo,  ya verás un poco más abajo que no es así.

Lo que sí tienes que pensar es que en un futuro muy cercano, todas las webs sufrirán este cambio y aunque este en «fase de pruebas», te recomiendo que te adelantes a la competencia por los siguientes motivos:

• Tu web al hacer el cambio será más rápida desde el móvil.

• Google le dará mayor valor a tu sitio web al contar con la versión AMP

• Ganarás posicionamiento respecto a tu competencia ya que a nivel de Seo será importante.

Cómo funciona AMP para Google

Google dice que las páginas AMP cargan de un 15% a un 85% más rápido, todo este depende de muchos factores, si tu web no esta bien optimizada y pesa mucho, no pretendas que vaya a la velocidad del rayo sólo por tener instaladas esta nueva versión.

La versión AMP elimina todo lo que es JavaScript, formularios, widgets etc, es decir, todo lo que hace que vaya mas lenta; tu web seguirá usando sus código html pero con una versión Amp html.

Todo esto es lo que produce ese efecto de diseño minimalista  al blog, con la inclusión de las AMP se pretende que el usuario se centre en el contenido que es lo que Google considera información de valor.

Si te estás preguntando si provoca contenido duplicado, no te preocupes porque las páginas Amp llevan el correspondiente link rel=”canonical» para indicarle a Google cual es la página Html de la cual proceden.

Una cosa muy importante es que AMP se comporta como una CDN, es decir es el mismo Google quien actúa como servidor de tus páginas AMP, google será el hosting para este tipo de páginas con lo cual ahorrarás en el uso de ancho de banda de tu servidor.

Además Google también pre cacheará tu sitio para estas páginas sirviéndolo más rápido.

En un principio Google plantea las Amp para las entradas  aunque en un futuro probablemente las tendrá en cuanta para toda la web, aunque no sabemos todavía que hará Google.

¿Como se instalan las Amp, eso debe de ser complicado?

Nada de eso, verás que es muy fácil ya que sólo necesitas instalar dos plugins en tu wordpress.

¿Dos plugins, eso incluirá mucho peso al servidor no?

No, ten en cuenta que son plugins orientados a la velocidad lo cual compensa.

¿Por qué usar AMP?

Usar las AMP es una tarea indispensable y aunque Google aún no le de el valor que tienen, es un sistema que tarde o temprano tendrá que usar y si al final decide cambiar de opinión vas a poder beneficiarte de una subida de velocidad importante en tu web mientras lo uses.

• En esta gráfica vas a poder ver un test de velocidad de página que carga sin AMP:

Una página de un artículo normalmente tiene muchas imágenes, videos, css y en este caso plugins como kkstar (para aumentar el CTR) o una caja de autor, hacen que esta página del artículo no sea muy rápida, estos son añadidos que aunque en ciertos casos necesarios, ralentizan la web.

5,3 segundos y 126 peticiones reflejan el retardo sin la nueva técnología.

• En este test te enseño el análisis de la misma página con versión AMP:

La diferencia es asombrosa, sólo tarda en cargar 1,2 segundos y las peticiones han bajado a 15

Con estos datos, ¿No crees que merece la pena instalarlas ya?

Vamos a ello.

Instalación del plugin AMP en wordpress

Para que las páginas se muestren en Amp hay que instalar necesariamente el siguiente plugin:

Accede a tu wordpress y en añadir plugin, instala y activa el plugin AMP.

Una vez instalado no tienes que hacer ningún tipo de configuración, este plugin automáticamente preparará tu web en versión móvil de tal forma que al final de cada url de cada post áñadira el termino «amp».

En unos días cuando Google indexe tus nuevas urls, podrás ver el icono del rayo que indica que esta todo correcto y ya estas corriendo en versión rápida, pero si quieres, ya puedes ver cómo quedarán tus nuevas entradas en la versión móvil.

Para comprobarlo, puedes coger una URL cualquiera de tu web y añadirle al final /amp o ?amp=1, en función del tipo de estructura de los permalinks.

El resultado es el siguiente:

A) Versión normal:

B) Versión Amp

Cómo veis en las imágenes,  no aparece ni el logo, ni las redes sociales, ni los widgets, tampoco(aunque se ve en la imagen) muestra correctamente los artículos relacionados , ni las estrellas de los rich snippets se ven reflejadas, formularios etc…

No pretendas que el blog sea igual que en la versión normal, lo realmente importante y que tienes que valorar es que con la nueva función tu sitio será más rápido.

Cómo ya te he comentado en otras ocasiones el diseño web ya no son 4 colores y efectos llamativos, influyen otros factores determinantes como la usabilidad y esta la ofrece las Amp wordpress.

Además, aunque estéticamente no cuenta con el mejor diseño, si puedes mejorarlo como ahora veremos.

Es normal que te cueste dejar de ver el diseño que tanto te ha costado y no poder visualizarlo en la versión móvil, pero te voy a mostrar un plugin para wordpress con el que podrás editar un poco más tus entradas AMP.

Instalación del Plugin AMP for WP-Accelerated mobile pages (Kaludi)

Para editar las nuevas urls creada,  tienes que instalar este plugin, he probado varios y este es el que a mi parecer mejor funciona.

Desde el panel de control de wordpress instala el plugin Amp for wp-Accelerate mobile pages.

Una vez instalado en el panel de control de wordpress podrás usar todas sus opciones en el apartado AMP (icono rueda) o desde la parte superior de wordpress también tienes acceso.

Vamos a verlo:

Haz clic en el botón derecho del ratón y traduce el texto al español.

〉〉 Empezando

Esta opción, te muestra información de soporte y ayuda asi como información de futuras mejoras del plugin

Te recomiendo que abras una nueva pantalla en el navegador y añadas un post como muestra añadiendo amp al final de la url para que puedes ir viendo en tiempo real los diferentes cambios que irás realizando con el plugin.

〉〉 General

• Logo: Sube un logo, la recomendación del tamaño es 190×36.

• Logotipo de encargo de tamaño: puedes modificar el tamaño del logo manualmente.

• Primera plana: en ella podrás personalizar la pagína que desees con amp,al seleccionarla se abrirá un desplegable para que elijas la que quieras y otra opción para que elijas si quieres o no seleccionar un titulo estático.

• Amp en las páginas: Al estar seleccionada aplicará los cambios a todas las páginas

Te interesa leer:

Programas gratuitos para crear un logo

〉〉 Analítica

En esta opción puedes insertar tu id de analytics para que muestre los resultados de tus amp

〉〉 Diseño

Esta es la parte más importante del plugin ya que es la parte donde definirás en gran parte el diseño de tus entradas en formato AMP.

• Launch page builder: usa el sistema de diseño en la plantilla para ver los cambios en tiempo real.

Es posible añadir o eliminar elementos, cambiar los colores del texto y el fondo de la cabecera; y elegir entre un esquema de color claro u oscuro.

Es posible que al eliminar elementos que no quieres que se muestren no se eliminen del todo teniendo que usar código CSS, luego lo vemos.

• Design selector: Elige el tipo de diseño para la página, cuentas con tres tipos a elegir

El diseño tres es personalizable en colores, cabecera, buscar etc.. incluso puedes insertar código CSS para dar un diseño más personalizable.

Los otros dós vienen ya predefinidos.

•⇒ Como personalizar el diseño con CSS

En el segundo video(al principio del post) has podido ver en modo práctico los errores generados en tuwebdecero.com y que se han podido arreglar con código CSS.

Para este ejemplo, trataremos (como puedes ver en la imagen) los errores que se han dado en otra página web en la que he estado trabajando.

En la imagen puedes ver el código CSS que he utilizado para subsanarlos.

Has de saber que tocar código CSS no perjudicará en nada a tu web, puedes borrar o añadir sin producirse errores de ningún tipo en tus páginas.

Los errores que aparecían en la web Maison-plus eran los siguientes:

• Errores sociales: es muy normal tener plugins de enlaces sociales, estos se colocan al final o a principio de un post normalmente.

En el ejemplo de paso a AMP html, el aspecto era el siguiente (no quedaba bien).

• Errores plugin de rich snippets: había que eliminar esas dos filas que no decían nada.

• Error en artículos relacionados: El plugin ya inserta su propio acceso a artículos relacionados, los creados en la versión normal mostraban descuadres en AMP, si bien podían modificarse, lo mejor es eliminarlos.

• Eliminar unos restos inservibles: esas tres frases que ves en la imagen había que quitarlas.

Como ves el proceso es fácil, sólo tienes que hacer clic en el botón de la derecho del ratón e inspeccionar los elementos (como ves en la parte izquierda)que luego tendrás que insertar en la caja CSS del apartado diseño para realizar los cambios.

Igualmente dentro del menú puedes querer eliminar páginas que no deseas que se muestren como la política de privacidad, o alguna página de servicios; lo normal es crear un menú específico para AMP como explico más arribo pero también puede desactivar elementos con CSS y se hace de la misma manera (inspeccionando elementos y añadiendo el código CSS)

Si quieres ver un poco más acerca de los códigos CSS que puedes usar echa un vistazo aquí.

〉〉 Seo

Esta opción esta activa sólo si usas el plugin yoast seo o Rank Math

Este está configurado de tal forma que evitarás el contenido duplicado y asociado para usar sus funciones amp seo.

〉〉 Menú

Si haces clic en el enlace podrás seleccionar cualquier otro menú que tuvieras creado o si lo prefieres puedes crear uno nuevo para la versión AMP con los elementos que quieres mostrar.

Accede a Apariencia>menú de WordPress y crear uno nuevo llamado por ejemplo Menu AMP

Luego, sólo tienes que elegir en la opción del plugin (como ves en la foto de arriba) el menú AMP.

En el puedes insertar las categorías o páginas que necesites incluir para este formato.

〉〉 Anuncio

En este apartado podrás configurar donde colocar los anuncios para Amp Google Adsense por ejemplo y seleccionar el tamaño de los banners.

〉〉  Single

• Iconos sociales pegajosos: puedes elegir el modo de ver los enlaces sociales pudiendo elegir entre verlos si con desplazamiento mientras haces  scroll o por el contrario mantenerlos fijos quedándose al final del artículo.

• Enlaces próxima anteriores: muestra si marcas la opción, enlaces próximos y anteriores del post.

• Número de post relacionados:Del mismo modo puedes elegir el número de post relacionados que quieres que se muestren.

En la parte de arriba selecionando «haz clic aquí», puedes realizar los cambios en tiempo real de la misma forma que en la opción de diseño.

〉〉 Compartir social

Selecciona los iconos que quieres que se muestren en la nueva pagina para poder compartir tus artículos por las redes sociales

Simplemente selecciona cuales quieres y automáticamente harán su función.

Facebook: es la única opción a configurar y requiere que rellenes un campo.

Si no sabes cuál es tu Facebook App ID o no tienes uno, tan sencillo como entrar en Facebook for developers para pedirlo.

Introduce tus datos de acceso a Facebook y anota despues en el campo del plugin, la Id que te facilitan.

〉〉 Datos estructurados

Sube el logo y define el tamaño para los datos estructurados si quieres que se muestre, puedes determinar el tamaño que desees.

Los datos estructurados son muy interesantes para tu estrategia de posicionamiento del negocio en tu ciudad.

Te va a encantar leer:

Guía sobre Seo Local

〉〉 Notificaciones

Marca esta pestaña si quieres que las nuevas páginas que estamos viendo, muestren la ley de política de cookies.

Esta opción te permite incluir el texto que tu quieras.

〉〉 Panel de traducción

Esta sección te indica los distintos campos que aparecen en la «nueva web» y que puedes modificar sustituyendo por el idioma que quieras.

〉〉 Comentarios

Si usas este método de comentarios, es muy sencillo de implementar sin tener que usar código, ya que simplemente, tienes que activar esta función y podrás ver los comentarios de Disqus para las nuevas páginas AMP.

Si optas por usar este plugin de comentarios, puedes leer este fantástico artículo de Gastre sobre Cómo instalar Disqus en tu wordpress.

〉〉 Cofiguraciones avanzadas

Esta opción muestra más opciones de configuración como si quieres que al hacer clic en logo muestre la home sin amp…

AMP en Google Search Console

Para asegurarte de que Google está reconociendo las páginas con formato AMP de tu web, debes acceder a Google Search Console y abrir la pestaña Accelerated Mobile Pages. Aquí verás la cantidad de páginas que tienes indexadas con este formato, además de las páginas con errores.

Es normal que Google tarde un poco en indexar y también es normal ver ciertos errores al principio.

Google puede marcarte algunas de tus páginas AMP cómo  no validas en Search console, tendrías que solucionarlo.

Para hacer un test y poder ver si están creadas correctamente puedes introducir la que Search console marca con errores en el validador AMP.

Si da fallos te marcará cuales son.

En el caso de estar todo correcto te lo indicará de la siguiente manera:

Si todo es correcto tus post en la versión móvil aparecerán con el signo del rayo al lado, esto será muy bueno de cara al Seo ya que además de recibir la importancia por parte de Google, el usuario hará más clics en tu resultado al ser una entrada que llame la atención.

Conclusión

¿Debemos habilitar las páginas AMP en nuestro blog?

Mi opinión es que sí y que lo hagas cuanto antes.

AMP es un proyecto especialmente enfocado al contenido, a lograr que las páginas cargue más rápido y que estas sean usables.

Es muy fácil con los dos plugins que acabamos de ver.

A qué esperas ¿Lo vas a instalar y no le vas a hacer caso a Google? Déjame un comentario en la parte de abajo y cuéntame que te parece.

¡Compártelo y dame tu puntuación!