Cómo mejorar el CLS de las migas de pan de Yoast SEO

Se explica cómo mejorar el cambio de diseño acumulativo (CLS) de las rutas de navegación de Yoast SEO, porque los títulos de las publicaciones eran largos, lo que provocaba que el CLS aumentaba en los dispositivos móviles.

Según Google el Cumulative Layout Shift (CLS): «es una medida del aumento de actividad más grande de las puntuaciones de cambio de diseño para cada cambio de diseño inesperado que ocurre durante toda la vida útil de una página».[1]

Resulta que, al medir el contenido del sitio web encontraba en los reportes de PageSpeed Insights que la métrica CLS me indicaba que, la miga de pan de Yoast SEO hacía un cambio en el diseño de la página.

La estructura de la URL de las migas de pan que muestra Yoast SEO es así: «home/categoría/nombre de la entrada».

Analizando el asunto, resulta que los nombre de los post son largos y en el caso de los dispositivos móviles, el título se desplaza una línea adicional, por lo que, es considerado como un cambio en el diseño.

Considerando la situación, deduje que la solución era reducir la ruta de las migas de pan que muestra Yoast SEO a: «home/categoría/», con lograría el objetivo de mejorar la puntuación del CLS de todas las páginas del sitio web y mejorar, por cierto, la experiencia de los usuarios.

En mi caso, tengo instalado Yoast SEO y dicho plugin no tiene la opción de hacer los ajustes deseados, ya que solo es posible realizarlo si uno tiene el plugin Yoast SEO Premium.

Sin embargo, Yoast SEO tiene un filtro llamado: «wpseo_breadcrumb_links», que permite hacer modificaciones a la forma de cómo se presenta la información de las migas de pan.

Con esa idea, realizando la búsqueda de información encontré un código en «Stackoverflow», [2] que en el banco de pruebas funciona muy bien:

add_filter("wpseo_breadcrumb_links", "wp_guide_wpseo_breadcrumb_links_filter");
    function wp_guide_wpseo_breadcrumb_links_filter($crumbs) {
        if (is_singular("post")) {
            unset($crumbs[2]);
        }
        return $crumbs;
}

El código hace lo siguiente:

  • add_filter: esta función registra un filtro que se aplicará al wpseo_breadcrumb_links. Este gancho o filtro permite modificar los enlaces de ruta de navegación antes de que se muestren.
  • wpseo_breadcrumb_links: este es el nombre del enlace en el que está registrando su filtro.
  • wp_guide_wpseo_breadcrumb_links_filter: este es el nombre de su función de filtro personalizada.
  • $crumbs : esta variable contiene la matriz de enlaces de ruta de navegación.
  • is_singular(«post»): esta condición verifica si la página actual es una publicación única.
  • unset($crumbs[2]): esta línea elimina el tercer elemento de la $crumbsmatriz. Este elemento normalmente corresponde al título de la publicación.
  • return $crumbs: esta línea devuelve la $crumbs matriz modificada.

El código funcional se lo mostré a Bard, la inteligencia artificial de Google, esta me presentó dos opciones de código optimizadas.

La primera utiliza la opción «array_splice» que resulta ser más eficiente que usar «unset».

La segunda usa la condición ternaria, siendo un código de menos líneas y su lógica es que si la condición «is_singular(«post»)» es verdadera, devuelve un nuevo array con los primeros dos elementos de «$crumbs», eliminando el título del post. De lo contrario, se devuelve el «array» original sin modificaciones.[3]

Opción 1: Utilizando array_splice

add_filter("wpseo_breadcrumb_links", "wp_guide_wpseo_breadcrumb_links_filter");
function wp_guide_wpseo_breadcrumb_links_filter($crumbs) {
    if (is_singular("post")) {
        array_splice($crumbs, 2, 1);
    }
    return $crumbs;
}

Opción 2: Utilizando la condición ternaria

add_filter("wpseo_breadcrumb_links", "wp_guide_wpseo_breadcrumb_links_filter");

function wp_guide_wpseo_breadcrumb_links_filter($crumbs) {

    return is_singular("post") ? array_slice($crumbs, 0, 2) : $crumbs;

}

En cualquiera de los tres ejemplos mostrados, solo uno de los códigos mostrados debe ser agregado en el archivo functions.php del tema activo, y listo.

[1] https://web.dev/articles/cls?hl=es-419#what_is_cls

[2] https://stackoverflow.com/questions/57490452/remove-yoast-breadcrumb-last-item-on-single-pages-only

[3] Puede verificar la respuesta de Bard en https://bard.google.com/share/9c9112054577

5/5 - 2 votos

Descubre más desde Politikaperu

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo