Astro trailing slash e i canonical

Cosa sono i trailing slash

Sviluppando applicativi web spesso dobbiamo gestire il formato degli URL. Una delle caratteristiche più discusse in ambito SEO è se vanno messi o meno i trailing slash ovvero le barre a fine indirizzo.

Per intenderci capita di dover valutare e impostare gli indirizzi nel formato

https://www.domain.tld/path

o nel formato con gli slash finali

https://www.domain.tld/path/

La differenza può sembrare minima ma non è così. Vediamo di capire perché e poi capiamo come possiamo impostare Astro per utilizzare o meno i trailing slash.

Problematiche dei trailing slash: doppi indirizzi e cosa sono i canonical

Vediamo alcune problematiche che una gestione errara dei trailing slash possono comportare.

Se il sito internet accetta sia gli indirizzi con gli slash finali sia indirizzi senza gli slash finali noi possiamo accedere ad una stessa pagina da due indirizzi diversi. Solitamente è buona prassi impostare un redirect da una versione all’altra. Se non lo facciamo la Google Search Console può mostrarci che alcune pagine presentano un problema “Pagina alternativa con tag canonical appropriato”.

Google cerca di eleggere a parità di contenuti una pagina come quella “ufficiale”. Trovando erroneamente due pagine uguali ma con indirizzi diversi cerca di eliminare dagli indici le pagine che hanno un canonical non valido.

In HTML è un tag nel HEAD che indica l’indirizzo ufficiale di quel contenuto, ad esempio

<link rel="canonical" href="https://diegobetto.com/astro-trailing-slash">

è il canonical della pagina che stai leggendo.

Le situazioni che posso avere solitamente sono:

• due pagine con url diversi con due canonical diversi e stessi contenuti
• due pagine con url diversi con due canonical identici e stessi contenuti
• pagine con canonical diverso rispetto all’indirizzo effettivo (nel canonical c’è il trailing slash ma l’indirizzo è senza o viceversa)

Queste situazioni creano confusione e Google o i motori di ricerca in generale decidono chi escludere.

Come risolvere il problema con Astro

Se state sviluppando un applicazione con Astro ci sono un paio di punti dove potete gestire gli indirizzi generati e le rotte. In astro.config.(ts|js) avete un’opzione per i trailing slash

export default defineConfig({
    trailingSlash: 'never',
    // il resto della configurazione...
});

Le opzioni disponibili sono:

• ‘always’ - Solo agli URL che includono una barra finale (ad esempio: “/foo/”)
• ‘never’ - URL che non includono mai una barra finale (ad esempio: “/foo”)
• ‘ignore’ - Corrispondenza URL indipendentemente dal fatto che esista o meno un ”/” finale

Maggiori informazioni sul sito ufficiale di Astro.build

In caso di necessità ricordate che potete anche utilizzare le opzioni di redirect

{
  redirects: {
    '/old': '/new',
    '/blog/[...slug]': '/articles/[...slug]',
  }
}

Informazioni sui redirect sempre sui doc di Astro

Bonus: impostazione dei trailing slash su Vercel

Se usate Vercel una cosa in più che potete fare è creare, se già non c’è, un file vercel.json e inserire all’interno questa configurazione, eventualmente adattandola alle vostre necessità.

{
    "trailingSlash": false
}

Così facendo impostate su Vercel la gestione degli indirizzi con o senza trailing slash

Bonus tipo: controllate il codice

Sembra banale ma controllate anche gli indirizzi che nel codice impostate tramite componenti come <Link /> oppure i tag <a>. Devono corrispondere alla logica di indirizzi che avete scelto per il vostro sito. Stessa cosa per gli indirizzi presenti dentro le sitemap del vostro sito, verificate corrispondano.

Buon coding! 😄