WordPress 5.3 cambiará el modo para evitar el indexado de los buscadores

Hace mucho que WordPress dispone de una funcionalidad para indicar a los buscadores que no indexen su contenido, por ejemplo mientras el sitio está aún en fase de desarrollo o creación de contenidos.

Es tán sencillo activarlo como ir a los

Ajustes > Lectura

  y activar la casilla que dice eso de «Disuade a los motores de búsqueda de indexar este sitio».

Cuando marcas esa casilla y guardas los cambios, WordPress crea un archivo robots.txt virtual con lo siguiente:

User-agent: *
Disallow: /

Que, según la sintaxis del propio Google, indica a todos los bots de los buscadores (

User-agent: *

) que no indexen todo el contenido (

Disallow: /

 )

Pues bien, ese no es el mejor modo de no indexar contenidos de una web, y por ese motivo WordPress, en la versión 5.3, cambiará su modo de indicarle a los motores de búsqueda que no quieres que indexen tu web.

¿Por qué es mala idea usar el ‘disallow’ de robots.txt?

Pues para que se entienda bien vamos a ponernos un poco gramáticos, que no dramáticos

Porque una cosa es que te indexe un buscador y otra que te liste, en sus páginas de resultados, las famosas SERP.

Te lo resumo:

  • Indexado / Indexar
    El proceso de descargar el contenido de un sitio o una página al servidor del motor de búsqueda, añadiéndolo así a su «índice».
  • Catalogar / Listar / Mostrar
    Mostrar un sitio en las páginas de resultados de búsqueda (las SERPs).

Por lo tanto, aunque el proceso más habitual es que se pase de la indexación a la catalogación, un sitio no tiene que ser indexado para ser catalogado/listado en las SERP.

Si un enlace apunta a una página, a un dominio o a cualquier otro lugar, Google lo sigue, y si el archivo robots.txt de ese dominio impide la indexación de esa página por parte de un motor de búsqueda, seguirá mostrando la URL en los resultados si puede recopilar de otras variables que valga la pena examinar.

Si tienes motivos para evitar la indexación de tu web, añadir esa petición a la página específica que quieres bloquear, sigue siendo la forma correcta de hacerlo. Pero tendrás que informar a Google sobre esa etiqueta de meta robot.

Por lo tanto, si quieres ocultar eficazmente las páginas de los motores de búsqueda, necesitas indexar esas páginas, aunque pueda parecer contradictorio. Hay dos maneras de hacerlo…

Añade una etiqueta meta robots

La primera opción para evitar que tu página aparezca en la lista es utilizar las etiquetas meta para robots. Básicamente se reduce a añadir esta etiqueta a tu página:

Y no hace falta que andes modificando el código de cada página que no quieras indexar, con plugins SEO como Yoast es super fácil.

Si es una entrada o página completa lo tienes en la caja del plugin del editor, en la pestaña «Avanzado»:

Y si lo que quieres es no indexar un tipo de contenido completo, lo tienes en los ajustes de Yoast, en

SEO > Apariencia en el buscador > Tipos de contenido

:

En el ejemplo de la captura anterior hemos indicado que el tipo de contenido «Respuestas» no se indexe. Y puedes hacer lo mismo con las taxonomías.

El único «problema» con esta etiqueta meta es que tienes que añadirla a cada entrada/página/taxonomía que no quieras indexar, o a todo el tipo de contenido completo.

Añade una cabecera HTTP X-Robots-Tag

Para que el proceso de añadir la etiqueta meta robots en todas las páginas sea de un modo mucho más sencillo, los motores de búsqueda contemplan la posibilidad de que añadas una cabecera HTTP X-Robots-Tag.

Esto te permite especificar una cabecera HTTP llamada

X-Robots-Tag

  y establecer el valor de cómo te gustaría que se aplique la etiqueta meta robots.

Lo mejor de todo es que puedes hacerlo para todo el sitio. El único requisito es usar el servidor Apache y que su módulo

mod_headers

  esté activo (y casi siempre lo está).

Si cumples con esto simplemente añade lo siguiente a tu archivo .htaccess:

Header set X-Robots-Tag "noindex, nofollow"

Y esto conseguirá que todo tu sitio pueda indexarse, pero que no se muestre en los resultados de búsqueda.

¿Qué va a hacer WordPress entonces?

Pues sencillo, a partir de la versión 5.3, cuando marques la casilla para disuadir a los motores de búsqueda, en vez de crear ese robots.txt virtual con el

Disallow: /

 , añadirá la cabecera HTTP X-Robots-Tag que te he comentado antes.

Y lo hará añadiendo a tu archivo .htaccess algo así:

### START WordPress Robots

    Header set X-Robots-Tag "no-index, no-follow"

### END WordPress Robots

Nota final

Un pequeño pero importante recordatorio.

Al igual que con el robots.txt, acuérdate de que cuando tu sitio esté listo para su indexado y catalogación en las SERP, quitar la casilla de disuadir a los motores de búsqueda, que me lo encuentro más de lo razonable en webs de clientes y amigos.

 

La entrada WordPress 5.3 cambiará el modo para evitar el indexado de los buscadores la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Cómo excluir y añadir tipos de contenido en el buscador interno de enlaces de WordPress

Casi no sabía cómo explicar de lo que va este artículo, así que empezamos por el principio…

El sistema de enlazado interno del editor de WordPress

Por si no lo sabes, en el editor de WordPress, en el icono de insertar enlace a un texto que tengas seleccionado, o sin texto, te sale una cajita en la que puedes pegar un enlace, pero esa cajita también sirve de buscador ¿me sigues?

Mira, te lo explico en un vídeo cortito:

El problema con el enlazado interno del editor

Pues bien, resulta que ese buscador de enlazado interno del editor de WordPress, busca en todos los tipos de contenido que estén registrados en tu sitio.

Así, si en tu web tienes entradas, páginas, foros, productos, el sistema buscará en todos esos tipos de contenido y te mostrará resultados en todos ellos en los que aparezca tu palabra clave, como en la siguiente captura, en la que puedes ver que aparecen entradas, pero también debates y respuestas de foros bbPress.

Pues bien, este comportamiento por defecto en ocasiones es un engorro, sobre todo si tienes claro que solo quieres enlazar, por ejemplo, a entradas y páginas.

La solución

Así que si queremos que solo salgan ciertos tipos de contenido algo tendremos que hacer ¿no?

Pues la solución pasa por crear una

query

que cambie el comportamiento por defecto del buscador integrado en el sistema de enlaces del editor, para que solo busque en los tipos de contenido que nosotros queramos.

Para ello tienes que crear una función como la siguiente:

//Definir en qué CPTs buscará el enlazador interno del editor de WP
function buscador_interno_enlaces_personalizado( $query ){
    // cambia los tipos de contenido poniendo el slug correspondiente:
    $query['post_type'] = array( 'post', 'page','product' );  // Edita esto a lo que necesites
    return $query; 
}
add_filter( 'wp_link_query_args', 'buscador_interno_enlaces_personalizado' );

Aunque es bastante auto explicativo, en el código anterior creamos una función que añade un filtro a wp_link_query_args para que solo haga la consulta en los tipos de contenido (

$query['post_type']

) que le indiquemos en el

array

, que en el ejemplo son

post

  (entradas),

page

  (páginas) y

product

  (productos de WooCommerce).

El código anterior puedes añadirlo al archivo functions.php del tema activo o a tu plugin de personalizaciones varias.

El resultado es que ya no se mostrarán en el buscador de enlazado interno otros tipos de contenido…

¿No se puede hacer al revés, quitando tipos de contenido?

Pues sí, el código cambiaría a algo así:

//Quitar CPT del enlazado interno del editor de WP
function buscador_interno_enlaces_personalizado( $query ){
    // tipo de contenido a quitar
    $cpt_to_remove = 'product';      // Edita esto a lo que necesites
    $key = array_search( $cpt_to_remove, $query['post_type'] ); 
    if( $key )
        unset( $query['post_type'][$key] );
    return $query; 
}
add_filter( 'wp_link_query_args', 'buscador_interno_enlaces_personalizado' );

En este ejemplo simplemente quito del buscador el tipo de contenido

product

  de WooCommerce. Todos los demás se mostrarán como resultados, si es que hay.

¿Es bueno hacer esta personalización en el buscador del enlazado interno del editor?

Sin ningún tipo de duda.

No solo vas a encontrar antes contenido propio al que enlazar, quitando de enmedio tipos de contenido que no quieres enlazar, también la experiencia será más fluida, porque el buscador cargará más rápido, al tener que hacer la consulta en menos tipos de contenido.

La entrada Cómo excluir y añadir tipos de contenido en el buscador interno de enlaces de WordPress la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Cómo arreglar problemas con anclajes HTML en menús fijos

Las cabeceras fijas son un patrón de diseño común que mantiene los elementos esenciales de los menús de navegación al alcance de la mano a medida que los usuarios se desplazan por una página.

Mantener una cabecera fijo mientras el usuario se desplaza puede liberar espacio horizontal para dispositivos más pequeños evitando las barras laterales, y mantiene visible tu marca.

Los anclajes HTML son otra herramienta de navegación importante, ya que enlazan no a una página sino a una ubicación específica de la misma.

Ya sea para un artículo largo, varias partes de la entrada o la navegación dentro de una página dividida en secciones, los anclajes pueden ayudar a los usuarios a navegar directamente a la parte de una página que desean ver.

Los enlaces dentro de una página son un caso habitual a la hora de usar una cabecera fija.

Los usuarios que siguen los enlaces de otras webs y aterrizan directamente en un anclaje de tu web no pueden ver tu marca, la navegación de tu sitio, o incluso a qué sitio han llegado.

Incluir una cabecera fija les ayudará a ver hasta dónde han navegado, sin importar a dónde lleguen en la página de destino.

Desafortunadamente, el enlazado interno y una cabecera fija plantean un problema cuando se utilizan juntos.

El problema con los anclajes y las cabeceras fijas

Y es que cuando coinciden un anclaje a un punto concreto de la página y una cabecera fija, que sigue la navegación del usuario, ocurren problemas de usabilidad.

El más común es que la cabecera quede justo encima del anclaje, impidiendo ver parte del texto enlazado, o incluso todo el contenido.

Solución a problemas de usabilidad con anclajes HTML y cabeceras fijas

La solución es sencilla, bueno, las soluciones, pues te propongo 2.

Añadir clase CSS al anclaje

Si estás utilizando el editor de bloques es muy fácil añadir una clase CSS al anclaje, solo tienes que ponerle un nombre, como ya vimos en el artículo sobre anclajes HTML en el editor de bloques, y añadirle una clase CSS adicional, con el nombre que quieras.

En el ejemplo le he puesto de nombre «ancla», para no complicar la cosa.

Si, por el contrario, utilizas el editor clásico, lo único que tienes que hacer a la hora de añadir el anclaje HTML es incluirle directamente la clase CSS, así:

Esto es un encabezado

¡Y ahora la magia!

Ya solo queda configurar la clase CSS. Para ello ve al personalizador de WordPress, por ejemplo desde «Apariencia > Personalizar».

Una vez en el personalizador ve a la sección llamada «CSS adicional» y añade lo siguiente:

.ancla { padding-top: 90px; }

Esto hará que al navegar hasta tu anclaje HTML se añada un

padding

de 90 píxeles para que nunca se sobreponga la cabecera fija sobre el contenido del mismo.

Por supuesto, puedes adaptar el margen a más o menos píxeles, hasta que el ajuste sea perfecto, pues depende del tamaño en altura de tu cabecera, algo que cambia según el tema que tengas instalado.

Añadir CSS que solucione el problema en todos los anclajes

La otra manera sería simplemente añadir algo de CSS adicional que evite que ocurran estos problemas de usabilidad con las cabeceras fijas.

Así que si eliges este método, de nuevo, abre el personalizador de WordPress y añade lo siguiente en la sección de «CSS adicional»:

:target::before {
  content: "";
  display: block;
  height: 90px; /* aquí la altura de la cabecera fija*/
  margin: -90px 0 0; /* altura negativa de la cabecera fija */
}

Como siempre, juega con los valores de altura positiva y negativa de la cabecera fija, hasta que se adapte a la perfección.

Otra posibilidad, que funciona en todos los navegadores, sería así:

a[name] {
    display: block;
    padding-top: 90px;
    margin-top: -90px;
}

Más soluciones

Como cada web es un mundo, en este enlace tienes un montón de otros posibles códigos (CSS, jQuery, JS) para dar solución a este problema con los anclajes HTML y las cabeceras fijas, según cada situación.

 

La entrada Cómo arreglar problemas con anclajes HTML en menús fijos la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.