Un blog con sesenta artículos, doce por página, tiene cinco páginas. La página uno muestra doce artículos; a los otros cuarenta y ocho se llega por la paginación. Si el rastreador de un buscador no puede seguirla, tus artículos antiguos solo son accesibles desde el sitemap y desde lo que los enlace en otros sitios, y un buscador tiene pocos motivos para posicionar un artículo al que nada enlaza.
La mayoría de las paginaciones de blog están hechas de una forma que los rastreadores no pueden seguir, o les dicen que no se molesten. Encontré uno de estos errores en mi propio blog mientras lo rehacía este mes. Estos son los cuatro más habituales, qué hacer en su lugar y, al final, una lista de comprobación.
Error 1: «Cargar más» sin URL
Un botón de «Cargar más» o un scroll infinito que trae la página siguiente con JavaScript es cómodo para quien lo usa e invisible para los rastreadores. La documentación de Google dice que, en general, solo rastrea las URL del href de los elementos <a>, que sus rastreadores no hacen clic en botones y que la Búsqueda de Google no hace scroll ni interactúa con la página de ningún otro modo.
Si la única forma de llegar al artículo 13 es hacer clic en «Cargar más», para un rastreador el artículo 13 no está enlazado desde tu blog en absoluto.
Qué hacer: dale a cada página una URL, /blog?page=2 o /blog/page/2, y enlázala con un <a href> de verdad. El botón de «Cargar más» puede seguir existiendo encima: renderiza los enlaces de paginación en el HTML y deja que JavaScript intercepte el clic y añada la página siguiente en el mismo sitio. Los rastreadores siguen el enlace; las personas tienen su botón.
Error 2: paginación con botones
El mismo problema con otra forma:
<button onClick={() => setPage(page + 1)}>Next</button>Cambia lo que muestra la página sin cambiar la URL. Los rastreadores no pueden seguirlo, un visitante no puede compartir la página tres ni volver a ella, y el botón Atrás se la salta sin más.
Qué hacer: la paginación es navegación, así que hazla con enlaces. En un framework con renderizado en servidor, eso también significa que la página de ?page=2 se renderiza en el servidor, con los artículos en el HTML, que es lo que lee un rastreador.
Error 3: la canonical de todas las páginas apunta a la página uno
Este parece una buena práctica, y por eso está en todas partes:
<!-- en /blog?page=2, /blog?page=3, ... -->
<link rel="canonical" href="https://example.com/blog" />Una etiqueta canonical dice «esta página es un duplicado; la buena está allí». La página dos no es un duplicado de la página uno: muestra otros artículos. Si le dices lo contrario a un buscador, lo invitas a sacar la página dos de su índice, y con ella los únicos enlaces a esos artículos.
Las directrices de Google sobre paginación dicen exactamente esto: no uses la primera página de una secuencia como página canónica; dale a cada página su propia URL canónica.
Este error lo tenía yo. Hasta esta versión, todas las páginas del blog de kookee.dev, ?page=2 incluida, declaraban /blog como canonical. Ahora cada página sin filtros es canónica de sí misma: la página uno apunta a /blog, la página dos a /blog?page=2.
Qué hacer: una canonical autorreferencial en cada página de la secuencia.
Error 4: noindex en las páginas a partir de la segunda
La versión antigua del mismo instinto: dejar fuera del índice las páginas de listado «pobres» con noindex, follow, para que se indexen los artículos y no las listas.
El problema está en el follow. John Mueller, de Google, ha dicho que una página que pasa suficiente tiempo en noindex acaba eliminada del todo y sus enlaces dejan de seguirse, así que noindex, follow termina funcionando como noindex, nofollow. Esos enlaces son el camino hacia tus artículos antiguos.
Qué hacer: deja que las páginas se indexen. Una página de listado con doce títulos de artículo y sus extractos no es contenido pobre, y quien busca el tema de un artículo tiene muchas más probabilidades de llegar al artículo que a la lista que lo enlaza. La documentación de Google también dice que las páginas de una secuencia pueden compartir título y descripción, así que no hay ningún problema de títulos duplicados que resolver.
¿Y los filtros?
Las etiquetas, las categorías, la búsqueda y los criterios de orden multiplican tus URL: /blog?tag=react&page=3&q=hooks también es una página. No hace falta que todas estén en un índice, y un rastreador que recorre cada combinación gasta su tiempo en tu sitio de la forma menos útil.
Dos opciones razonables:
Vistas filtradas con la canonical en la lista sin filtrar. Es lo que hago yo:
/blog?tag=reacty/blog?tag=react&page=2declaran/blogcomo canonical, mientras que las páginas sin filtrar son canónicas de sí mismas. Todos los artículos siguen siendo accesibles desde la secuencia sin filtrar, y las combinaciones no estorban.Una ruta propia para los filtros que quieras posicionar. Si una página de etiqueta funciona por sí sola como página de aterrizaje, trátala como tal: ponla en
/blog/tag/react, con una canonical autorreferencial y su propia paginación, y deja los filtros por parámetros de URL para todo lo demás.
Las directrices de Google también permiten noindex en las vistas filtradas y reordenadas. Elijas lo que elijas, aplícalo a los filtros, no a la paginación de la lista principal.
rel="next" y rel="prev"
Google anunció en 2019 que ya no los usa. Su documentación indica que otros buscadores podrían seguir usándolos, pero no sustituyen a los enlaces en la página.
Qué páginas enlazar
Una barra de paginación con todos los números de página no escala, y una con solo «Anterior» y «Siguiente» convierte la página cuarenta en un paseo de cuarenta clics. El término medio habitual: la primera página, la última y una a cada lado de la actual, con puntos suspensivos en cada hueco.
‹ Anterior 1 … 6 [7] 8 … 15 Siguiente ›Con un enlace a la última página, personas y rastreadores saltan directamente a tus artículos más antiguos, y la secuencia se recorre desde cualquiera de los dos extremos. Aun así, la paginación no garantiza que un rastreador llegue a todo, y para eso está el sitemap: incluye en él todos los artículos, con un lastmod que indique la última vez que el artículo cambió de forma significativa.
Dos detalles de accesibilidad van en el mismo componente:
Envuélvelo en un
<nav>con una etiqueta accesible como «Paginación», y marca la página actual conaria-current="page".En los extremos, muestra «Anterior» y «Siguiente» como texto desactivado, no como enlaces a ninguna parte o a la página en la que ya estás.
Lista de comprobación
Cada página de la lista tiene su propia URL, y sus artículos están en el HTML renderizado en el servidor.
La paginación está hecha de enlaces
<a href>. Si tienes un botón de «Cargar más», mejora esos enlaces en lugar de sustituirlos.Cada página de la lista sin filtrar tiene una canonical autorreferencial. La canonical de la página dos no apunta a la página uno.
Nada de
noindexen las páginas de la lista principal.Las vistas filtradas y ordenadas tienen la canonical en la lista sin filtrar, o llevan noindex, o pasan a ser rutas propias si quieres que posicionen.
El sitemap incluye todos los artículos.
El componente Pagination de Kookee para React renderiza este patrón con enlaces: la primera y la última página, una a cada lado de la actual, puntos suspensivos, navegación con etiqueta accesible y extremos desactivados. Funciona desde un Server Component y antes de que cargue JavaScript, y getPaginationItems te da la misma ventana de páginas para tu propio marcado. En Crea un blog con los componentes de React tienes una página de listado completa con filtros por etiqueta y búsqueda.