L’elemento HTML link

L’elemento HTML <link> viene principalmente utilizzato per definire le relazioni tra una pagina web e le risorse esterne, come fogli di stile CSS, icone e altro. È inoltre utilizzato, nel caso di pagine aventi URL diversi, per indicare ai motori di ricerca quella da indicizzare.

È un elemento autoconclusivo, ovvero non ha il tag di chiusura.

Principali utilizzi dell’elemento HTML link

• rel=”stylesheet” (collegamento ai fogli di stile CSS): l’uso più comune è per collegare un file CSS esterno,
  <link rel="stylesheet" href="style.css">
• rel=”icon” (definizione della icona del sito): permette di specificare l’icona che appare nella scheda del browser (favicon).
  <link rel="icon" href="favicon.ico" type="image/x-icon">
• rel=”preload” (precaricamento di risorse): migliora le prestazioni del sito caricando in anticipo risorse critiche.
  <link rel="preload" href="script.js" as="script">
• rel=”alternate” (definizione di versioni alternative di una pagina): può essere usato per specificare versioni tradotte o alternative di un documento.
  <link rel="alternate" hreflang="en" href="https://example.com/en">

rel=”canonical”: l’elemento HTML link canonico

Premessa

Gli URL SEO friendly esprimono l’organizzazione gerarchica dei contenuti di un sito.
In WordPress questo risultato si ottiene inserendo nell’URL la gerarchia delle categorie a cui è associato ciascun post.

Ad esempio, il presente articolo è contenuto in una gerarchia formata da tre categorie:
sviluppo-siti-web > linguaggi-di-front-end > html, l’URL è quindi:

https://serviziweb.padova.it/sviluppo-siti-web/linguaggi-di-front-end/html/elemento-html-link/

A scopo dimostrativo, poiché si parla anche del plugin WordPress Yoast SEO, l’articolo è associato anche alla gerarchia di categorie: predisposizione-degli-ambienti > cms > wordpress > wp-plugin ed è quindi accessibile anche dall’URL:

https://serviziweb.padova.it/predisposizione-degli-ambienti/cms/wordpress/wp-plugin/elemento-html-link

Il medesimo articolo è dunque accessibile da due diversi URL. Per i motori di ricerca e per Google in particolare, siamo di fronte a contenuti duplicati, con una conseguente penalizzazione nella indicizzazione della pagina web.

In questi casi, l’elemento HTML <link rel="canonical"> viene utilizzato per indicare ai motori di ricerca quale URL di una pagina web deve essere considerato come originale.

L’elemento HTML <link rel="canonical"> è definito link canonico o tag canonical.

Quando usare il link canonico

• Gestione dei contenuti duplicati: se hai più URL che mostrano lo stesso contenuto (come nell’esempio più sopra riportato), il link canonico permette di evitare penalizzazioni dai motori di ricerca per duplicazione dei contenuti.
• Versioni multiple di una pagina: se una pagina esiste in diverse versioni (ad esempio, con ordinamenti diversi in un e-commerce), il link canonico indica quale versione deve essere indicizzata.
• HTTP vs HTTPS e www vs non-www: se il tuo sito è accessibile sia con HTTP che con HTTPS, o con e senza www, il link canonico aiuta a consolidare il ranking su un’unica versione.

Vincoli e best practices per l’uso del link canonico

• Posiziona il link canonico all’interno della sezione <head> della pagina.
• Assicurati che punti a un URL valido e accessibile.
• Usa URL assoluti (https://example.com/page) anziché relativi (/page).
• Evita di impostare più link canonici in una stessa pagina.

Specificare il link canonico in WordPress, usando il plugin Yoast SEO

Se utilizzi WordPress e il plugin Yoast SEO, esiste un metodo veloce e pratico per specificare il link canonico:

• Apri in modifica il post o la pagina che vuoi pubblicare;
• scorri in basso la pagina fino alla sezione “Yoast SEO”;
• apri la sezione “Avanzate”;
• compila il campo “URL canonico” (vedi immagine);
• pubblica o aggiorna il post.

Per verificare il buon esito dell’operazione:

• apri il post o la pagina con Google Chrome;
• apri gli strumenti per gli sviluppatori (click sui tre puntini in alto a destra per aprire le impostazioni di Chrome, poi scegli Altri strumenti > Strumenti per sviluppatori);
• seleziona il tab Elementi ;
• premi i tasti Control+F (find) e ricerca la stringa “canonical”. La ricerca dovrebbe posizionarsi sulla stringa indicata in figura.

Se l’esito della verifica è che WordPress non ha generato l’elemento <link> atteso, probabilmente è perché il plug-in Yoast SEO ha rilevato che il post non deve essere indicizzato. Prova a effettuare questi due controlli:

1. Posizionati nella sezione Avanzate di Yoast SEO (come fatto in precedenza per impostare l’URL canonico) e verifica che l’opzione I motori di ricerca dovrebbero seguire i link su questo articolo sia impostata su Yes.
2. Vai sulle impostazioni di Lettura di WordPress e controlla che l’opzione Scoraggia i motori di ricerca dall'effettuare l'indicizzazione di questo sito NON abbia la spunta, come nell’immagine sotto riportata.
   Se la spunta è presente, devi toglierla per controllare che il link canonico venga generato, ma poi devi rimetterla, perché se l’opzione è stata impostata così c’è un motivo, a tal proposito, vedi le attività 3.1.1 e 3.5.1 della fase di realizzazione di un sito web.

Risorse online

• Google: Come specificare un URL canonico con rel=”canonical” e altri metodi
• Yoast SEO: How to change the canonical URL in Yoast SEO for WordPress