Jump to content

Google error usabilidad móvil

ChuChuah_2017
 Share

Recommended Posts

ChuChuah_2017 Newbie

ChuChuah_2017

Posted
Posted

Buenas tardes, tengo un gran problema, no consigo saber como corregir esto, ojala alguien pueda ayudarme porque ya no se que hacer y los errores van en aumento.

Google me indica lo siguiente.

El texto es demasiado pequeño para leerlo

Los elementos en los que se puede hacer clic están demasiado cerca unos de otros

¿como puedo solucionar estos errores?

También me indica el siguiente error:

Debe especificarse "offers", "review" o "aggregateRating"

los errores van en aumento y no se como solucionarlo, he indagado, buscado y rebuscado y aunque se que pido mucho, no encuentro un sitio donde indiquen exactamente como solucionar estos errores, uso Prestashop 1.7.4.2 y la plantilla que utilizo es la Classic.

Por favor, que alguien me ayude :(

Link to comment
Share on other sites
Prestafan33 Newbie

Prestafan33

Posted
Posted (edited)

Son dos cosas diferentes:

El primero es problema de la plantilla. Indica que un texto en móvil tiene una fuente demasiado pequeña como para poder leerlo con facilidad, o que dos enlaces están demasiado cerca y es posible que al intentar pulsar uno se pulse el otro por accidente en la versión móvil. Eso depende del tema que tengas instalado y de las plantillas de la página donde te esté dando el error. También te digo que hay veces donde el robot de Google mete la pata hasta el fondo, a mí me ha dado un error de esos tipos porque en una página hay un popup que aparece superpuesto sobre el resto de la página (el aviso de cookies), que contiene un enlace que aparece encima de otro, pero que es así porque el aviso se puede cerrar, por lo que es un "falso positivo".

Lo otro, lo de "offers", "reviews" y "agrregateRating" tiene que ver con los datos estructurados. Tu tema no está especificando esos valores para el schema de la clase "Product", que está especificado así: https://schema.org/Product . Tendrías que modificar las plantillas de los productos para incluirlo.

 

Edited by Prestafan33 (see edit history)
  • Like 1
Link to comment
Share on other sites
ChuChuah_2017 Newbie

ChuChuah_2017

Posted
  • Author
Posted

Buenas tardes Prestafan33, muchas gracias por contestar y ayudarme con el problema.

El error de móvil de tener el texto demasiado pequeño y demasiado cerca me lo está dando en todos los productos y no productos, el caso es que en el móvil no hay problema alguno y todo parece funcionar de maravilla, la tienda es chuchuah.com, tejo captura de el error de google, sobre los problemas de offers, reviews y agrregaterating la verdad es que no tengo idea de como modificar y solucionar ese problema, no tengo muchos conocimientos la verdad :( pero ya podía haber solucionado ese problema Prestashop en verdad....

error movil.jpg

Link to comment
Share on other sites
Prestafan33 Newbie

Prestafan33

Posted
Posted (edited)

El problema no es de Prestashop en sí, es del tema que usas que no tiene implementados esos atributos en los datos estructurados. Hasta ahora a Google no le había dado por quejarse si no estaban, pero desde hace poco ha empezado a marcar las páginas sin ellos como incorrectas.

Solucionarlo y añadir esos atributos no es demasiado complicado, pero puede llevar un buen rato. Y, como digo, va a depender de cómo tenga estructuradas las plantillas tu tema y también los módulos, ya que "review" y "aggregateRating" se suelen sacar del módulo de comentarios (se refiere a los comentarios del producto y la puntuación que le hayan dado los usuarios). Lo bueno es que, al tratarse de un problema de las plantillas, cuando lo soluciones en una se va a aplicar la solución a todos los productos.

Edited by Prestafan33 (see edit history)
Link to comment
Share on other sites
Prestafan33 Newbie

Prestafan33

Posted
Posted

Te puedo echar una mano con la implementación de los atributos:

El atributo "offers" se refiere al precio, por lo que tendrás que implementarlo en la parte de la plantilla que muestra el precio. Normalmente se encuentra en el archivo /themes/nombre-de-tu-tema/templates/catalog/partials/product-prices.tpl.

Ahí debes buscar el bloque que se llama "product price", y añadir las etiquetas itemprop e itemscope del schema "offers". Te pongo cómo lo tengo yo: 

<div class="product-price h5 {if $product.has_discount}has-discount{/if}"
     itemprop="offers"
     itemscope
     itemtype="https://schema.org/Offer"
  >
  <link itemprop="availability" href="{$product.seo_availability}"/>
  <meta itemprop="priceCurrency" content="{$currency.iso_code}">
  <div class="current-price">
  	<span itemprop="price" content="{$product.price_amount}">{$product.price}</span>

Es decir, debes añadir la definición (itemprop "offers" - itemscope - itemtype) en el div que engloba el bloque de precios, luego tendrías que añadir las dos líneas siguientes para indicar los valores para "availability" y "priceCurrency", y finalmente tendrías que incluir el 'itemprop="price"' en el elemento que muestra el precio.

  • Like 1
Link to comment
Share on other sites
Prestafan33 Newbie

Prestafan33

Posted
Posted (edited)

Respecto a los otros dos "aggregateRating" y "review", tendrás que añadirlos en la plantilla del módulo de comentarios.

Acabo de ver que en el módulo de comentarios de Prestashop (productcomments) ya vienen incluidos. No sé si tu tema usa ese módulo, si es así es posible que tengas que sobreescribir las modificaciones de la plantilla.

Primero, si tienes el módulo instalado, actualízalo. Luego mira este archivo, donde está la plantilla del bloque de comentarios de la ficha de producto:

/modules/productcomments/views/templates/hook/product-list-reviews.tpl

Ahí, en ese archivo, al final tienes esto: 

{if $nb_comments != 0}
{* Rich snippet rating is displayed via php/smarty meaning it will be cached (for example on homepage) *}
<div itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating" itemscope>
  <meta itemprop="reviewCount" content="{$nb_comments}" />
  <meta itemprop="ratingValue" content="{$average_grade}" />
</div>
{/if}

Si tu tema lo tiene sobreescrito, busca el archivo:

/themes/nombre-de-tu-tema/modules/productcomments/views/templates/hook/product-list-reviews.tpl

Y haz los cambios necesarios para incluir los itemprop, itemtype e itemscope tal y como los ves ahí.

Edited by Prestafan33 (see edit history)
  • Like 1
Link to comment
Share on other sites
Prestafan33 Newbie

Prestafan33

Posted
Posted

Una última cosa: Si el error de texto demasiado cerca te lo da en todas las páginas, es muy posible que el problema esté en el footer o en el header, que es lo que es igual en todas las páginas (el resto va cambiando). Pero sin más datos no te puedo orientar mejor.

  • Like 1
Link to comment
Share on other sites
ChuChuah_2017 Newbie

ChuChuah_2017

Posted
  • Author
Posted

Muchísimas gracias Prestafan33, no se como agradecerte esta información, de verdad que muchísimas gracias, me pondré en un rato a ello a hacer esas modificaciones, el módulo de comentarios que utilizo es el que te muestro en la imagen, no conozco otro la verdad, ¿te refieres al mismo?

comentarios de productos.jpg

Link to comment
Share on other sites
Prestafan33 Newbie

Prestafan33

Posted
Posted

No, el módulo de comentarios al que me refiero es a éste, que es el "oficial" de Prestashop (creo que lo han actualizado hace poco para que funcione en la versión 1.7, antes no estaba disponible). Lo puedes encontrar buscando en el catálogo de módulos desde el menú "módulos" del backoffice.

El que tú usas creo que es adaptación que hicieron de la versión anterior que sólo funcionaba en la 1.6, adaptándolo para la 1.7.

Captura.JPG

  • Like 1
Link to comment
Share on other sites
ChuChuah_2017 Newbie

ChuChuah_2017

Posted
  • Author
Posted
hace 9 minutos, Prestafan33 dijo:

Una última cosa: Si el error de texto demasiado cerca te lo da en todas las páginas, es muy posible que el problema esté en el footer o en el header, que es lo que es igual en todas las páginas (el resto va cambiando). Pero sin más datos no te puedo orientar mejor.

Si me indicas que datos necesitas te los puedo facilitar

Link to comment
Share on other sites
Prestafan33 Newbie

Prestafan33

Posted
Posted
2 minutes ago, ChuChuah_2017 said:

Si me indicas que datos necesitas te los puedo facilitar

Me refiero a que el Analytics o el Search Console te especifique más dónde está el error.

Te doy otra alternativa: Puedes instalarte esta extensión para Chrome, que revisa varias aspectos de tu web, entre otros precisamente los problemas con la versión móvil, y te da información bastante detallada sobre ese tipo de problemas:

https://chrome.google.com/webstore/detail/seo-analysis-website-revi/hlngmmdolgbdnnimbmblfhhndibdipaf

  • Like 1
Link to comment
Share on other sites
ChuChuah_2017 Newbie

ChuChuah_2017

Posted
  • Author
Posted
hace 5 minutos, Prestafan33 dijo:

No, el módulo de comentarios al que me refiero es a éste, que es el "oficial" de Prestashop (creo que lo han actualizado hace poco para que funcione en la versión 1.7, antes no estaba disponible). Lo puedes encontrar buscando en el catálogo de módulos desde el menú "módulos" del backoffice.

El que tú usas creo que es adaptación que hicieron de la versión anterior que sólo funcionaba en la 1.6, adaptándolo para la 1.7.

Captura.JPG

No encuentro este modulo por ningún lado, puedes pasarme el enlace para obtenerlo?

Link to comment
Share on other sites
Prestafan33 Newbie

Prestafan33

Posted
Posted (edited)

No lo entiendo. Yo lo acabo de instalar desde ahí para probar en una instalación de pruebas. Y me ha salido en el buscador.

Ah, pero no es ahí. No lo busques en "prestashop addons", que no sale. Búscalo en Módulos y servicios - Selección (dependiendo de la versión de Prestashop que tengas esto te sale en un sitio diferente, a mí en la 1.7.6 me salía en donde te indiqué al principio, pero en la 1.7.4 sale en una pestaña de "módulos y servicios").

De todas formas te pongo en enlace de Github:

https://github.com/PrestaShop/productcomments

 

Edited by Prestafan33 (see edit history)
  • Like 1
Link to comment
Share on other sites
Prestafan33 Newbie

Prestafan33

Posted
Posted
3 minutes ago, ChuChuah_2017 said:

Voy a hacer Backup de todo y lo instalo, supongo que para descargarlo simplemente le doy donde pone Clone or Download

Sí, es correcto. También puedes buscarlo donde te indico en mi mensaje anterior, he puesto dónde encontrarlo en la versión 1.7.4 de PS.

  • Like 1
Link to comment
Share on other sites
ChuChuah_2017 Newbie

ChuChuah_2017

Posted
  • Author
Posted (edited)
hace 17 minutos, Prestafan33 dijo:

No lo entiendo. Yo lo acabo de instalar desde ahí para probar en una instalación de pruebas. Y me ha salido en el buscador.

Ah, pero no es ahí. No lo busques en "prestashop addons", que no sale. Búscalo en Módulos y servicios - Selección (dependiendo de la versión de Prestashop que tengas esto te sale en un sitio diferente, a mí en la 1.7.6 me salía en donde te indiqué al principio, pero en la 1.7.4 sale en una pestaña de "módulos y servicios").

De todas formas te pongo en enlace de Github:

https://github.com/PrestaShop/productcomments

 

Igualmente no me sale ahí, ya probé también, te adjunto imagen, el que me sale gratuito es el que ya tenía yo instalado

comments.jpg

Edited by ChuChuah_2017
Añadir mas información (see edit history)
Link to comment
Share on other sites
ChuChuah_2017 Newbie

ChuChuah_2017

Posted
  • Author
Posted

ya se porque no me sale, no me sale porque no lo tengo, cuando yo instalé el prestashop versión 1.7.4.2 no existía aún ese modulo, por eso no me sale ni buscándolo en el apartado sección, ahí salen los modulos que tengas en la carpeta modules del prestashop. he subido manualmente la carpeta del modulo de comentarios que me pasastes y así si sale en el apartado selección pero no me deja instalarlo "obviamente porque no es para su versión" necesitaría la carpeta del modulo de la misma versión del prestashop que uso.

Podrías conseguirla de una instalación del prestashop ¿? de la versión que comenté, la 1.7.4.2

Así probamos y salimos de dudas si es por eso o no.

Link to comment
Share on other sites
ChuChuah_2017 Newbie

ChuChuah_2017

Posted
  • Author
Posted

Lo tengo exactamente igual, te adjunto imagen.

He probado a deshabilitar el modulo de comentarios para ver si así me lanza la validación google y me sigue tirando el error.

hace 2 horas, Prestafan33 dijo:

Te puedo echar una mano con la implementación de los atributos:

El atributo "offers" se refiere al precio, por lo que tendrás que implementarlo en la parte de la plantilla que muestra el precio. Normalmente se encuentra en el archivo /themes/nombre-de-tu-tema/templates/catalog/partials/product-prices.tpl.

Ahí debes buscar el bloque que se llama "product price", y añadir las etiquetas itemprop e itemscope del schema "offers". Te pongo cómo lo tengo yo: 


<div class="product-price h5 {if $product.has_discount}has-discount{/if}"
     itemprop="offers"
     itemscope
     itemtype="https://schema.org/Offer"
  >
  <link itemprop="availability" href="{$product.seo_availability}"/>
  <meta itemprop="priceCurrency" content="{$currency.iso_code}">
  <div class="current-price">
  	<span itemprop="price" content="{$product.price_amount}">{$product.price}</span>

Es decir, debes añadir la definición (itemprop "offers" - itemscope - itemtype) en el div que engloba el bloque de precios, luego tendrías que añadir las dos líneas siguientes para indicar los valores para "availability" y "priceCurrency", y finalmente tendrías que incluir el 'itemprop="price"' en el elemento que muestra el precio.

 

Product price.jpg

Link to comment
Share on other sites
Prestafan33 Newbie

Prestafan33

Posted
Posted (edited)

Puedes utilizar esta página para comprobar si están bien o mal los datos estructurados de tu web, poniéndole la URL de la página donde el Search Console te indica que hay algún problema:

https://search.google.com/structured-data/testing-tool

Ten en cuenta que no todos los campos que te muestra como advertencia son obligatorios, algunos son sólo "recomendados". Pero si alguno es incorrecto, te lo detectará.

Edited by Prestafan33 (see edit history)
  • Like 1
Link to comment
Share on other sites
ChuChuah_2017 Newbie

ChuChuah_2017

Posted
  • Author
Posted
hace 2 horas, Prestafan33 dijo:

Puedes utilizar esta página para comprobar si están bien o mal los datos estructurados de tu web, poniéndole la URL de la página donde el Search Console te indica que hay algún problema:

https://search.google.com/structured-data/testing-tool

Ten en cuenta que no todos los campos que te muestra como advertencia son obligatorios, algunos son sólo "recomendados". Pero si alguno es incorrecto, te lo detectará.

Lamento haber tardado en contestar, esto es lo que me sale al poner uno de los enlaces que me detecta con errores de offers, review o aggregaterating

herramienta.jpg

Link to comment
Share on other sites
Prestafan33 Newbie

Prestafan33

Posted
Posted (edited)

Según eso el problema no está en la ficha de producto, sino en las miniaturas:

/theme/nombre-de-tu-tema/catalog/_partials/miniatures/product.tpl

Debes buscar donde se muestra el precio, y agregar el "offers",  los itemprop y los valores de este modo: 

<div class="product-price-and-shipping" itemprop="offers" itemscope itemtype="https://schema.org/Offer"> // Añadir itemprop, itemscope e itemtype
	<link itemprop="availability" href="{$product.seo_availability}"/> // Añadir línea completa
  	<meta itemprop="priceCurrency" content="{$currency.iso_code}">	// Añadir línea completa
....
  	<span itemprop="price" class="price" content="{$product.price_amount}">{$product.price}</span>	// Añadir itemprop y content
</div>

Ojo, si no lo tienes debes añadir también la parte del "content" en el itemprop "price".

Edited by Prestafan33 (see edit history)
  • Like 1
  • Thanks 1
Link to comment
Share on other sites
Prestafan33 Newbie

Prestafan33

Posted
Posted

No, no está bien. El span itemprop="price" ya lo tienes, hacia el final del trozo que has puesto, y no debes duplicarlo. Sólo añádele lo que falta, la propiedad content y su valor. Te lo he puesto en los comentarios de cada línea. Y el </div> que has puesto debajo de las 3 líneas que has añadido, también sobra, también lo tenías ya en tu código.

Asegúrate de borrar la caché tras las modificaciones o el comprobador de datos estructurados no se dará por enterado de los cambios.

  • Like 1
Link to comment
Share on other sites
ChuChuah_2017 Newbie

ChuChuah_2017

Posted
  • Author
Posted (edited)

Aaaaaa, conseguido, es la primera vez que veo que google empieza a validar el problema.... dios, se me han saltado hasta las lagrimas de la emoción :D 

Te adjunto imagen de como se muestra ahora en la herramienta.

De verdad te lo digo y no me quedo corto Prestafan33, ERES UN CRACK

Solo queda la parte de la usabilidad movil

herramienta 5.jpg

Edited by ChuChuah_2017 (see edit history)
Link to comment
Share on other sites
ChuChuah_2017 Newbie

ChuChuah_2017

Posted
  • Author
Posted (edited)

Este es uno de los errores y creo que el más importante, dejo una imagen, no se como solucionar eso sin estropear la tienda, no quiero que se desfasen los botones o algo... ando de hacer nada prefiero preguntar y ver que opciones tengo

usabilidad movil botones.jpg

También me aparece el siguiente error, bueno, es una advertencia pero creo que sería sencillo de solucionar pero no se donde tengo que hacerlo, si me lo pueden indicar genial.

1104281592_usabilidadmovilventanagrafica.jpg.912f3e9e99d4ca01facdf93bcb5b31cf.jpg

Edited by ChuChuah_2017
mas información (see edit history)
Link to comment
Share on other sites
Prestafan33 Newbie

Prestafan33

Posted
Posted (edited)

En cuanto a los errores a los que te refieres en primer lugar, tienen que ver con el slider de imágenes de la parte superior de la tienda. Concretamente, las flechas que apuntan a izquierda y derecha dice que están demasiado cerca de los enlaces de la propia diapositiva. Pero es que además, los botones en la versión móvil ni siquiera se ven correctamente, ya que están desplazados 35px respecto al borde del slider, con lo cual quedan fuera de la pantalla y sólo se ve parcialmente una línea en cada uno de ellos que no se sabe lo que es. Sinceramente, yo cambiaría esos botones o los ocultaría con CSS y me olvidaría de ellos, en realidad en móvil si alguien desplaza los sliders lo normal es que lo haga arrastrando y soltando o pulsando encima de los tres círculos de debajo de la imagen, no pulsando en unos botones que son muy pequeños y ni siquiera se ve que son unas flechas.

La otra advertencia que comentas creo que tiene que ver con lo mismo, que esos botones "se salen" fuera de la ventana gráfica por los laterales, porque el "viewport", que es la propiedad de la que habla en la explicación sí que está bien configurado, tal y como te lo recomiendan,  por lo que me da la impresión de que problema que te está indicando es precisamente el mismo que en el otro lado, que los botones se están saliendo por los laterales fuera de la pantalla en la versión móvil.

Edited by Prestafan33 (see edit history)
  • Like 1
Link to comment
Share on other sites
  • 2 weeks later...
ChuChuah_2017 Newbie

ChuChuah_2017

Posted
  • Author
Posted
En 13/10/2019 a las 9:16 PM, Prestafan33 dijo: 

@media(max-width:767px) {
	button.slick-prev.slick-arrow,
	button.slick-next.slick-arrow {
		display: none!important;
	}
}

A añadir en /themes/nombre-del-tema/assets/css/custom.css

Buenos días,

Se que comento bastante tiempo después pero no podía dejar como finalizado esta publicación sin agradecerte todo el esfuerzo en mostrarme e indicarme como solucionar muchos de los errores de los cuales me he ido dando cuenta después de que ya me estabas dando las pautas para solucionarlo, es lo que tiene no saber del tema pero machacarse por solucionarlos :D.

Quiero indicar que gracias a Prestafan33 he podido solucionar casi todos por no decir todo los errores y problemas que estaba teniendo en Prestashop 1.7.4.2 el cual a mi modo de ver, es un Prestashop aun por desarrollar y de ahí los errores que tiene, también hay que ser consciente que todo avanza y si no se actualizan las cosas se quedan, pues eso, desactualizadas y de ahí los errores luego, "aparte quiero dejar claro que quedar todo perfecto, es imposible de cara a Google, el siempre pedirá lo imposible XD"

Lo único que no he podido solucionar son los errores de usabilidad móvil pero tampoco le he dado mucha importancia porque aparte de tener el modulo AMP que precisamente lo que hace "en cierto modo" es crear plantillas de los productos en las búsquedas de Google mediante los móviles y así evitar muchos errores, también he comprobado con el plugins que Prestafan33 me indico que, en el tema de usabilidad móvil mi tienda está perfecta, gracias a este maravilloso plugins he podido solucionar muchos pero que muchos errores dejándolo todo casi perfecto. adjunto la dirección al plugins.

https://chrome.google.com/webstore/detail/seo-analysis-website-revi/hlngmmdolgbdnnimbmblfhhndibdipaf

 

Muchas gracias por todo Prestafan33 y por mi parte se puede dar como solucionado este tema :)

Link to comment
Share on other sites
  • 6 months later...
Miguel Angel74 Newbie

Miguel Angel74

Posted
Posted

Hola a todos a mi me aparece """El texto es demasiado pequeño para leerlo""" y "Los elementos en los que se puede hacer clic están demasiado cerca unos de otros"

solo en una pagina me da el error y todas las página las hago de la misma forma ¿, como puede solo afectar a una ? esto se ve en la pantalla navegando por esa página o debo entrar dentro de la plantilla.

saludos

Link to comment
Share on other sites
  • 2 years later...
dataleim Enthusiast

dataleim

Posted
Posted

Buenas,

A mi me está volviendo loco desde hace una semana este tema también de la usabilidad móvil.

De repente Google me da el pack completo de error: texto demasiado pequeño, elementos clicables demasiado cerca, y contenido mas ancho que la pantalla.

En móvil se ve perfecto, pero en la previa del validador de Google se ve roto. 

¿alguna idea de cómo proceder? Ahora mismo tengo la plantilla classic, y sigue pasando. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...