No se han encontrado resultados. ¿Intentar de nuevo con otras palabras?

La búsqueda debe tener al menos 3 caracteres.

Solucionar problemas de usabilidad móvil en Astra

Por lo general, Google Search Console informa de uno o todos los problemas siguientes:

  • Elementos clicables demasiado juntos
  • Texto demasiado pequeño para leerlo
  • Contenido más ancho que la pantalla

¿Cuál es la causa del problema?

El origen de la cuestión es doble:

  1. A veces Googlebot tiene prisa y no obtiene todos los recursos de la página cuando la carga para indexarla.
  2. Uno o varios elementos HTML de la página son más anchos que el viewport móvil, pero sólo lo son cuando su CSS no se carga.

Las cosas se salen de madre cuando Googlebot se salta tu archivo CSS en una página en la que algún contenido obliga a escalar o desplazar la ventana gráfica si no recibe un estilo CSS.

¿Cómo solucionar el problema?

El uso de un pequeño conjunto de estilos CSS solucionará este problema. Puedes añadir el código personalizado utilizando la configuración del personalizador o accediendo directamente al archivo style.css del tema hijo Astra.

    :where(body, iframe, pre, img, svg, video, canvas, select) {
        max-width: 100%;
        overflow: auto;
        word-break: break-word;
    }

Usando style.css:

Tienes que añadir el código al archivo style.css del tema hijo Astra, preferiblemente justo antes del elemento que hace referencia a nuestra hoja de estilos.

Eche un vistazo a la captura de pantalla adjunta para comprenderlo mejor.

Uso de la configuración del personalizador:

Desde el panel de control de WordPress, vaya a Apariencia > Personalizar > CSS adicional y coloque el código.

Este fragmento garantiza que cuando Googlebot ignore los recursos de su página, al menos aplique estos estilos a los elementos de la lista del selector : where().

  • max-width: 100% impide que los elementos sean más anchos que la ventana gráfica.
  • overflow: auto asegura que el contenido dentro de un elemento no sobrepase su límite de anchura.
  • word-break: break-word garantiza que las palabras largas pasen a la línea siguiente cuando sobrepasan el ancho de la ventana gráfica.

¿Le ha resultado útil este artículo?
¿No ha encontrado una solución? Estamos aquí para ayudarle a conseguirlo.

Documentos relacionados

Astra es gratis. Ahora y siempre.

Creemos que crear sitios web atractivos no debería ser caro. Por eso Astra es gratis para todos. Empieza gratis y amplía con paquetes asequibles.

REWIND

RESUMEN DEL AÑO

La descarga está a un solo clic

Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

Descargar gratis Astra Theme - Modal Popup Form
Scroll al inicio
Ahora elija la opción que prefiera
page builder addon
Elija su complemento de creación de páginas preferido

La descarga está a un solo clic

Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

Descargar gratis Astra Theme - Modal Popup Form