Jump to content

Recommended Posts

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 :(

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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)

Share this post


Link to post
Share on other sites

Me falla la subida del modulo al descargarlo de la pagina que me pasaste, no hay forma de llegar a la pagina de prestashop para descargarlo?

Share this post


Link to post
Share on other sites

Captura.JPG

También puedes descomprimir el archivo descargado de github y subir la carpeta productcomments directamente dentro  del directorio /modules, luego si lo buscas en "selección" te tiene que aparecer.

Edited by Prestafan33 (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

Vale, acabo de ver que última versión de Github (4.0.0) sólo permite instalarse a partir de la versión 1.7.6 de PS. Hay una versión anterior (la 3.3.9) que a mí sí que me aparece disponible en versiones anteriores de Prestashop.

Edited by Prestafan33 (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

Yo intentaría, o bien actualizar Prestashop a la última versión (1.7.6.1), o bien trasladar los cambios que te he puesto arriba a la plantilla que use el módulo de comentarios que tienes instalado ahora.

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Mejor lo que me indicas, modificar el que tengo y así creo que será mejor pero no puedo dirigirme a donde me indicas, no existe la carpeta hook, llevo hasta templates, dentro de esa carpeta hay otras dos que son admin y front, te dejo el modulo en si para que le eches un vistazo

myprestacomments.zip

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Te refieres justo ahí no? adjunto imagen, por cierto que tengo que copiar y pegar justo lo que me has puesto? lo siento pero soy muy negado... Lamento estar molestando tanto :(

price.jpg

Share this post


Link to post
Share on other sites

He agregado las lineas así tal como te muestro en la imagen y me sigue soltando el mismo error, parece no haber cambiado nada

herramienta2.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

No sabía siquiera que el error provenía de el slider, el que uso es el Awesome Image Slider, tuve muchos problemas con el que traía de serie el prestashop y lo sustituí por ese que es gratuito.

¿Como podría ocultar esos botones para solucionar el problema?

Share this post


Link to post
Share on other sites
@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

  • Like 1

Share this post


Link to post
Share on other sites

Los errores en la usabilidad móvil de google siguen aumentando... que harto me tiene google, no se como solucionar este dichoso problema, adjunto imágenes, no se si no pasa nada y no debería hacer caso o en verdad hay un problema que debería corregir aquí.

usabilidad movil.jpg

usabilidad movil 2.jpg

Edited by ChuChuah_2017 (see edit history)

Share this post


Link to post
Share on other sites
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 :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More