Le Relazioni tra le Risorse: l’Attributo rel="alternate"

L’attributo rel stabilisce la relazione tra il documento corrente e un documento collegato e incide su diversi ambiti della gestione di un sito web: sicurezza, prestazioni, indicizzazione, informazioni di vario tipo e molto altro. In pratica, l’attributo rel si presta a numerosi impieghi e per questo motivo può assumere un numero considerevole di valori.

Quello che segue è l’elenco delle keyword più utilizzate tra quelle disponibili al momento (fonte W3C):

• alternate: indica che il link punta ad una rappresentazione alternativa del documento
• author: indica che il link collega ad una pagina dell’autore del documento
• bookmark: URL permanente da utilizzare come bookmark
• external: indica che il documento cui si riferisce il link non fa parte dello stesso sito del documento corrente
• help: indica che il link si riferisce ad un documento di aiuto
• license: indica che il link si collega ad un documento in cui sono indicate informazioni di copyright del documento corrente
• next: indica che il link si riferisce ad un documento successivo nella stessa serie di cui fa parte il documento corrente
• nofollow: indica che il link punta ad un documento non supportato, cioè che non deve essere seguito dallo spider di Google
• noreferrer: stabilisce che il browser non deve inviare un header HTTP referer se l’utente segue il collegamento
• noopener: stabilisce che ogni contesto di navigazione creato seguendo il collegamento non deve avere un contesto di navigazione opener
• prev: indica che il link si riferisce ad un documento precedente nella stessa serie di cui fa parte il documento corrente
• search: indica che il link punta ad uno strumento di ricerca per il documento corrente
• tag: una keyword per il documento corrente

Data la versatilità di questo attributo e i numerosi ambiti di applicazione, ho pensato di dedicargli una serie di articoli teorici e pratici.
In questo primo articolo della serie dedicata all’attributo rel, approfondirò la keyword alternate, la quale svolge funzioni diverse a seconda della presenza di altri attributi nello stesso elemento HTML.

Subito dopo l’analisi teorica, proporrò un esempio pratico e mostrerò come aggiungere uno foglio di stile alternativo in WordPress.

rel=”alternate”

L’attributo rel="alternate" può essere utilizzato negli elementi link, a e area e la sua funzione dipende dalla presenza di uno degli attributi media, hreflang, title e type. In base alla presenza e ai valori assegnati a questi attributi, rel="alternate" può individuare (tra l’altro):

Ambiti di utilizzo di rel=”alternate”

1. Fogli di stile alternativi
2. Il feed di syndication predefinito
3. Varianti linguistiche e geografiche del documento
4. Varianti del MIME type del documento

1. Fogli di stile alternativi

Il primo ambito di utilizzo della keyword alternate riguarda la definizione di fogli di stile alternativi. A questo scopo va utilizzata come valore dell’attributo rel insieme alla keyword stylesheet all’interno dell’elemento link. In questo ambito di applicazione deve essere specificato anche l’attributo title. Ecco un esempio:

<link rel="alternate stylesheet" href="vertical.css" class="vertical" title="Vertical Theme" />

In base al tipo di relazione che intercorre con il documento, i fogli di stile possono essere distinti in tre categorie:

• Persistent (no rel="alternate", no title="..."): si applica sempre al documento;
• Preferred (no rel="alternate", si title="..."): si applica di default, ma viene disabilitato quando viene selezionato il foglio di stile alternativo;
• Alternate (si rel="stylesheet alternate", si title="..."): disabilitato di default, può essere selezionato dall’utente.

Facciamo un esempio pratico:

<link rel="stylesheet" href="horizontal.css" class="horizontal" title="Default Theme" />
<link rel="alternate stylesheet" href="vertical.css" class="vertical" title="Vertical Theme" />

Il primo elemento link dell’esempio ricade nella tipologia preferred, mentre il secondo link è un alternate. Il foglio di stile alternativo non viene caricato fino a quando non viene selezionato dall’utente. La specifica del W3C afferma:

If the resource is an alternative stylesheet then the user agent may defer obtaining the resource until it is part of the preferred style sheet set.

In pratica, la possibilità di selezionare un diverso foglio di stile, se disponibile, deve essere offerta dal browser e, in alternativa o in aggiunta, dallo sviluppatore via JavaScript, come ben illustrato in questo articolo di A List Apart.

In Firefox è possibile passare da un foglio di stile all’altro dal menu View → Page Style, mentre non è disponibile una funzionalità predefinita per Chrome e Safari. Gli utenti di Chrome potranno, però, abilitare lo switcher con un’estensione come Alt CSS.

2. Il feed di syndication predefinito

Il secondo ambito di applicazione dell’attributo rel="alternate" riguarda la syndication. In questo caso rel="alternate" si abbina all’attributo type e ad uno dei suoi due valori application/rss+xml e application/atom+xml. In pratica in questo modo viene impostato il feed predefinito.

<!-- RSS Feed -->
<link rel="alternate" type="application/rss+xml"  href=".rss">

<!-- Atom Feed -->
<link rel="alternate" type="application/atom+xml"  href=".atom">

3. Varianti linguistiche

Se una pagina web ha diverse versioni dello stesso contenuto, come nel caso dei siti multilingua, è bene informare i motori di ricerca delle versioni alternative di queste pagine, assegnando il valore alternate all’attributo rel del tag link.

In questo modo Google Search potrà indirizzare gli utenti alla versione della pagina più appropriata in base alla lingua o all’area geografica.

A proposito delle alternative legate alla lingua, la Guida di Search Console elenca alcuni scenari in cui è consigliabile indicare una versione alternativa del documento:

• Se i contenuti principali rimangono nella stessa lingua e viene tradotto solo il template, ad esempio la barra di navigazione o il footer.
• Se i contenuti presentano piccole varianti locali.
• Se i contenuti sono ionteramente tradotti in un’altra lingua.

Ecco un esempio:

<link rel="alternate" hreflang="codice_lingua"... href="url_pagina" > 

L’elemento link nell’intestazione della pagina informa Google dell’esistenza di tutte le varianti disponibili, in questo caso in base alla lingua/località geografica. Ogni variante della pagina dovrebbe contenere nell’intestazione lo stesso set di elementi link, come nell’esempio che segue:

<link rel="alternate" href="https://example.com/" hreflang="x-default"/>
<link rel="alternate" href="https://example.com/" hreflang="en"/>
<link rel="alternate" href="https://example.com/it/" hreflang="it"/>
<link rel="alternate" href="https://example.com/es/" hreflang="es"/>
<link rel="alternate" href="https://example.com/fr/" hreflang="fr"/>
<link rel="alternate" href="https://example.com/de/" hreflang="de"/>
<link rel="alternate" href="https://example.com/pt/" hreflang="pt"/>
<link rel="alternate" href="https://example.com/nl/" hreflang="nl"/>
<link rel="alternate" href="https://example.com/se/" hreflang="sv"/>
<link rel="alternate" href="https://example.com/jp/" hreflang="ja"/>
<link rel="alternate" href="https://example.com/no/" hreflang="nb"/>

Questo set va riportato identico nelle intestazioni di tutte le pagine collegate.

L’elemento hreflang identifica la lingua e, opzionalmente, l’area geografica della risorsa alternativa. Per le lingue senza corrispondenza, si utilizza hreflang="x-default", il cui utilizzo è raccomandato per stabilire la pagina di riferimento in mancanza di lingue corrispondenti.

Nota: Se una pagina rimanda ad una diversa variante linguistica, anche la variante deve rimandare alla pagina principale, altrimenti le annotazioni potrebbero essere ignorate o male interpretate.

Maggiori informazioni sulle varianti linguistiche sono disponibili nella Guida di Search Console e in questa ottima guida di Yoast all’attributo hreflang.

4. Varianti MIME type del documento

Usato con gli attributi media e type, rel="alternate" permette di specificare un MIME type alternativo del documento corrente:

<link rel="alternate" type="application/pdf" hreflang="it" href="manuale-it.pdf">

Per chi volesse approfondire, Il riferimento ufficiale per l’attributo rel="alternate" è il Draft del W3C. Altre importanti risorse di riferimento sono il blog e la specifica del WHATWG.

Aggiungere uno foglio di stile alternativo in WordPress

Aggiungere un alternate stylesheet in WordPress non è proprio semplice e richiede competenze da sviluppatori. Ma in WordPress niente è impossibile, e con poco impegno è possibile creare un numero arbitrario di fogli di stile alternativi. Procederemo per fasi.

Step 1: Creare un child theme

Per prima cosa occorre creare un child theme con i seguenti file:

• alternate-style.css
• functions.php
• style.css

Step 2. Il file style.css

Il file style.css contiene le dichiarazioni del child theme:

/*
Theme Name: Frammenti Theme
Theme URI: https://frammentidicodice.com/
Description: Un Child Theme sviluppato per il sito Fremmenti di Codice
Author: Carlo Daniele
Author URI: https://carlodaniele.it/
Template: twentynineteen
Version: 0.1
*/

Per questo esempio ho creato un child theme del tema predefinito Twenty Nineteen, di cui ho parlato approfonditamente su Kinsta. Cambiate i valori delle definizioni in base alle vostre esigenze.

3. Il file functions.php e il foglio di stile alternativo

Dovremo, poi, predisporre il foglio di stile alternativo (in questo esempio lo chiameremo alternate-style.css) e un file functions.php, all’interno del quale inseriamo il codice che segue:

<?php
add_action( 'wp_enqueue_scripts', function(){
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'preferred-style', get_stylesheet_directory_uri() . '/preferred-style.css' );
	wp_style_add_data( 'preferred-style', 'title', 'Preferred Stylesheet' );
	wp_enqueue_style( 'alternate-style', get_stylesheet_directory_uri() . '/alternate-style.css' );
	wp_style_add_data( 'alternate-style', 'title', 'Alternate Stylesheet' );
	wp_style_add_data( 'alternate-style', 'alt', true );
} );

Abbiamo agganciato una funzione anonima all’azione wp_enqueue_scripts (leggi il Codex al riguardo), che è l’azione attraverso cui possiamo aggiungere script e fogli di stile alle pagine di WordPress.

Il primo script accodato è lo script del tema genitore, ossia Twenty Nineteen. Questo è anche il foglio di stile principale del nostro child theme e sarà il foglio di stile predefinito e persistente. Subito dopo accodiamo altri due fogli di stile, i quali, a differenza del primo, risiedono nella directory del child theme.

La funzione wp_style_add_data ci permette di modificare l’elemento link del foglio di stile. Questa funzione assume la seguente struttura:

wp_style_add_data( string $handle, string $key, mixed $value )

• $handle: (string) (richiesto) Nome del foglio di stile.
• $key: (string) (richiesto) Nome of data point per il quale stiamo memorizzando i dati. Valori ammessi sono 'conditional', 'rtl' e 'suffix', 'alt' e 'title'.
• $value: (mixed) (richiesto) Stringa con i dati CSS da aggiungere.

Nel codice riportato sopra abbiamo, quindi, aggiunto prima la chiave 'title', con la quale abbiamo assegnato un titolo ai fogli di stile aggiuntivi, poi la chiave 'alt' ad uno solo dei fogli di stile. Questo parametro, se impostato a true, genera l’attributo rel="alternate stylesheet". Il risultato è riportato nell’immagine che segue.

L’immagine che segue mostra il menu di selezione degli stili di Firefox.

Per gli sviluppatori più avanzati, ricordo che la funzione wp_style_add_data() è ben documentata nel file /wp-includes/functions.wp-styles.php.