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

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.

 

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

 

En un principio Google plantea las Amp para las entradas  aunque en un futuro probablemente las tendrá en cuanta para toda la web.

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

 

¿Todavía no has instalado las AMP?Haz click para twittear

 

¿Sobre que temática quieres que te hable?

Suscríbete y elige un GRUPO

Recibe los últimos artículos, trucos, tips de Seo, Marketing o Diseño Web

 

Instalación del plugin AMP en wordpress

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

instalacion de plugin amp en wordpress

 

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:

instalacion del plugin amp en wordpress

 

B) Versión Amp

instalacion del plugin amp en wordpress

 

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.

Las AMP darán mayor usabilidad a tus entradas en la versión movil' username='tuwebdeceroHaz click para twittear

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 (Ahmed 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.

 

instalación del plugin amp for Wp

 

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

empezando instalacion amp for wp

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

general instalacion amp for wp

 

  • 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

 

Analítica

analitica plugin amp for wp

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

Con el Plugin AMP for WP conseguirás un mejor diseño en tus entradasHaz click para twittear

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.

diseño plugin amp for wp

 

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

como personalizar el diseño con css

 


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 amp eran los siguientes

 

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

 

errores amp siguientes

 

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

 

errores generados amo

 

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

errores amp

 

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.

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

 

Este (Seo)

seo instalacion plugin amp for wp

 

Esta opción esta activa sólo si usas el plugin yoast seo.

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

 

Menú

menu instalacion amp for wp

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.

 

Anuncio

anuncios instalacion amp for wp

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

 

Soltero (single)

amplificador único para wp

 

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

 

Si te está pareciendo interesante el contenido, hazme un favor ¡Compártelo en las redes sociales! 

 

Compartir social

páginas móviles acelerados para wordpress

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

datos estructurados amp

 

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

 

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 Disqus

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.

Cómo instalar las Amp de Google en WordPress: Personalización
5 (100%) 5 votes

José M. Peña

Diseñador web especializado en WordPress y consultor de Marketing Digital | Trabajo como Freenlance realizando sitios web para clientes que desean hacer crecer su negocio a través de Internet | Además, enseño en mi Blog cómo crear un proyecto web absolutamente de cero |Me puedes encontrar en las redes sociales.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle PlusYouTube

27 comentarios en “Cómo instalar las Amp de Google en WordPress: Personalización

    • ¡Muchas gracias Miguel! me alegro que se entienda.

      Son temas que parecen complicados y la gente tiene miedo a usarlo, yo creo que cuanto antes nos adaptemos a lo que quiere Google mejor.

      Gracias a ti por pararte a comentar ;D

  1. Muy bueno.
    El tema de CSS con errores da un poco para atras.
    Hay una cosa que le lei a gastre que es sintomatica de cuando cambiar.
    Cuando blogger que es de google implemente el amp es cuando es la fecha. Si ni ellos lo hacen se puede esperar. 😉

    • No estoy de acuerdo y eso que Gastre es un fenómeno y conoce Blogger como nadie pero Google también debería dar más valor a Blogger para el posicionamiento y no lo hace, no es lógico pero es así.

      Google tiene el apartado AMP en Google Search console que es donde si hay que hacer caso.

      Yo no esperaría mucho, Google quiere que al usuario se le sirva la información en el móvil rápido y este es el camino.

      Saludos

  2. Hola José, un gran trabajo, grato leer contenidos tan dedicados y claros. Te hago la consulta, si tengo otro plugin SEO como el All in One SEO corro el riesgo de duplicar las url’s ante el buscador? Es necesario el Yoast por la compatibilidad entre ambos plugins para que esto no suceda o que otra solución puede haber? Te comento esto por que para mi Yoast, uno, es pesado y sus actualizaciones vienen con errores que luego uno debe bancarse ; dos, es muy engorroso y ; tres , me parece como sobremaquillar mucho el SEO. Pero bueno yendo al punto, donde puedo ver si se duplica la url.
    Un abrazo, saludos

    • Hola Jaime.

      No se me ha dado el caso de cambiar a All in one Seo. Si es verdad que es un poco más rápido y supera a Yoast según comentan en varios puntos. Maquillar el Seo puede ser, yo no le presto atención a las recomendaciones, para alguien que no entienda mucho le puede ayudar, pero poco más.

      No he usado All in one Seo pero debería de tener una opción de importar los datos de Yoast(al reves si la hay). Esto lo harías desactivando yoast y haciendo el proceso, una vez realizado ya podrías eliminar Yoast Seo.

      Para ver las duplicidades de url puedes usar una herramienta como Screaming Frog

      Gracias por el comentario sobre el post.

      Un abrazo

  3. Un buen artículo. Yo ya tenía el AMP implementado, pero no configurado el diseño y gracias a ti ya la tengo personalizada.
    No obstante, no puedo hacer lo del paso del css para eliminar algunos elementos. Me dice este mensaje, pero no sale la casilla para insertarlo:

    “Custom CSS”
    “You can customize the Stylesheet of the AMP version by using this option”.

    ¿Sabes porqué puede ser?

  4. Hola José,

    Ya he descubierto el problema. Es por la plantilla que utilizo de wordpress, cuando cambio de plantilla, se puede acceder al css desde el AMP (utilizo la “virtue”, me deja modificar el css, normal de la página web, pero en la versión AMP no).

    Lo bueno que si cambio de plantilla puedo acceder al css y los cambios quedan guardados para la plantilla que utilizo. Así que puedo cambiarla para solucionar esas cosas y luego volver a activar el theme que tengo. O bien plantearme cambiar el theme para siempre.

    Gracias

  5. Una dudilla tonta José.
    ¿Si AMP se carga los widgets, incluyendo formularios, cómo pasan estas funcionalidades a integrarse en una web o blog?
    Llevo siguiendo el proyecto AMP desde hace tiempo y todavía le veo luces y sombras.
    Así que será un placer escuchar otras opiniones
    Gracias y buen trabajo!!

    • Hola Ivo.

      Pues hasta ahora con las AMP se está produciendo cierta incertidumbre , pero parece que el proyecto va a continuar, va adaptando su algoritmo y los anuncios a esta nueva idea y creo que tarde o temprano se va a tener que implementar.

      En cuanto a los widgets, formularios etc… sólo lo hace en la versión móvil y para los artículos. La razón parece ser es por por ofrecer mayor usabilidad en un dispositivo cada vez más usado y por minimizar detalles y que alguien al navegar pueda hacerlo más rápido y de forma más clara para servirle información que es lo Google realmente quiere.

      Lo que no aún está en el aire es que con el tiempo quieren adaptarlo a todas las páginas e incluso al modo escritorio y esto es lo que no veo lógico el prescindir de ciertas aplicaciones. Veremos que pasa.

      No te conocía hasta que leí el otro día un artículo tuyo en Semrush, encantado de conocerte 😉

      Gracias por pararte a comentar.

  6. Un placer conocerte Jose. 🙂
    Ya sea con AMP u otro sistema, la usabilidad y adaptabilidad móvil seguirá avanzando sin duda. No obstante, mientras sigan cargándose los formularios de un blog en la versión móvil, estarán planteando una barrera de entrada crítica.
    Imagino que tú no tienes instalado AMP, ¿verdad?
    Este sistema fue concebido para publicaciones de prensa y demás -que monetizan con publicidad-, y todavía arrastra las limitaciones de ese punto de partida.
    Veremos cómo evoluciona.
    Un abrazo

    • Si lo tengo instalado Ivo, fue una decisión que tomé en beneficio del Seo, sabiendo que prescindiría de otros recursos pero también pensando que quien realmente acceda a mis contenido se preocuparía de buscar el boletín ya que lo menciono en cada post, aunque lógicamente, se pierden oportunidades de fidelización.

      No se entiende muy bien lo que quieren conseguir pero yo he caso a Google.

      Un abrazo.

  7. Yeah, al final lo he instalado y lo tengo pirulando en mi blog y en el de algunos clientes.

    En mi opinión, los señores de Google tienen que pulirlo un poquillo, que todos los blogs hasta ahora, que usamos AMP tenemos la misma fuente (no recuerdo ahora mismo el nombre, pero tipo Times).

    Bueno, supongo que esto es como cuando comenzó el HTML5.

    Lo que no creo que trague(mos) es con que AMP llegue a las versiones de escritorio. Mucha usabilidad sí, pero si nos quedamos solo con texto puro y duro, vamos a retrotraernos a la época de los PCs de fondo negro y letras en fosforito… arghhhh! 😉

    Un pedazo de post, que empaquetado en un ebook sería best seller.

    Un abrazo, José.

    • Hola Miguel.

      Yo espero que Google no nos pida que implementemos las AMP en las páginas ya que no tiene sentido por mucho que les interese servir información, de momento intentan mejorar las entradas y poco a poco van sacando extensiones de mejoras, añadidos para formularios etc… aunque tampoco podemos cargarnos de plugin o de saturar con código CSS.

      Ya veremos que pasa, si creo que hasta el momento hay que hacerle caso, seas Seo o no, es necesario.

      ¿Un Best Seller?ya será menos jaja

      ¡Un abrazo artista!

  8. Hola Jose Manuel. Gran trabajo.

    Acabo de implementar en mi web, guiado por tu tutorial, AMP en los artículos.

    Me surge una duda con este plugin.

    ¿Sabes como desactivar la home para que no se pueda mostrar con AMP?

    Por defecto, al instalar este plugin, activa AMP en la home, y no encuentro la forma de de desactivarlo.

    Yo no tengo activada la opción de que se muestren las páginas con AMP

    https://tuwebdecero.com/amp/

    • Hola Julián.

      No debería mostrarse, ni Google te lo va a mostrar en los resultados.

      Si añades /amp detras de la url, en este caso la home aparece en versión AMP pero eso no quiere decir que estén incluidas, en mi caso yo tampoco tengo activada esa opción pero te da la muestra

      Gracias por el comentario

  9. Me encanto tu post!! Leí varios tutoriales del tema pero este sin duda es el más completo!! Acabo de aplicar el primer plugin de AMP y la verdad no se ve nada mal. Ahora voy a trabajar algo en el diseño, aunque no mucho por que como te digo me gusto bastante como quedo. ☺

    • Buena decisión Luis. Aunque no sea determinante es un paso que Google invita a dar.

      El diseño resultante no es feo, es más simple pero mucho más navegable.

      Prueba el plugin de personalización que aunque tampoco vas a notar cambios significantes, algo hace y si estas contento con el resultado sin el pues perfecto.

    • ¿El resto de urls en AMP funcionan correctamente?

      Te recomiendo que veas si tienes algún widget, elemento o tipo de publicidad distinta en esa página que falla y, o bien lo deshabilites con código, de otra manera ya que veo que ese código falta sería incluirlo manuamente en html, no lo he usado pero en cada página hay una caja editable para AMP donde podrías insertar la linea de código que te indica que falta en html.

      No se si te doy alguna idea.

      Saludos

Deja un comentario

379 Compartir
Compartir161
Twittear166
+110
Compartir42
Email