Parte 3: Attributi di <a>

Ecco una lezione completa sui vari attributi che possono essere utilizzati in un tag <a> in HTML con particolare attenzione agli attributi rel="follow" e rel="nofollow".

Benvenuti in questa lezione dedicata alla comprensione degli attributi di collegamento in HTML, focalizzandoci particolarmente su follow e nofollow, ma esplorando anche altri attributi utili. Questi attributi giocano un ruolo fondamentale nella definizione del comportamento dei link in termini di SEO e di interazione utente.

Cosa sono follow e nofollow?

In HTML, l'attributo rel nel tag <a> specifica la relazione tra la pagina corrente e l'URL linkato. Gli attributi follow e nofollow influenzano come i motori di ricerca interagiscono con questi link:

• follow: Non è un valore effettivamente utilizzato o necessario. In assenza di un nofollow, si presume che il link sia di tipo follow, che indica ai motori di ricerca di seguire il link e di considerarlo nel ranking del SEO.

• nofollow: Questo valore viene usato per dire ai motori di ricerca di non seguire il link a fini di ranking. È utile per linkare siti ai quali non si vuole passare autorità da parte del proprio sito, come nei commenti degli utenti o in link sponsorizzati.

Altri Attributi Importanti del Tag <a>

Oltre a follow e nofollow, ci sono diversi altri attributi che possono essere utilizzati con il tag <a> per controllare comportamenti specifici:

• href: L'URL della pagina verso la quale il link deve puntare.

• target:

  • _blank: Apre il link in una nuova finestra o tab.

  • _self: Apre il link nella stessa finestra o tab (comportamento predefinito).

  • _parent: Apre il link nel frame genitore.

  • _top: Apre il link nel topmost frame.

• title: Fornisce informazioni aggiuntive su dove il link porterà. Questo testo appare generalmente come un tooltip quando l'utente posiziona il mouse sul link.

• download: Questo attributo suggerisce che il link è destinato al download di un file. Quando usato, il browser scaricherà il file anziché navigare verso l'URL.

• rel (valori aggiuntivi):

  • noopener: Impedisce che la nuova pagina aperta possa controllare quella originaria.

  • noreferrer: Impedisce il passaggio dell'HTTP referrer header alla nuova pagina.

  • external: Indica che il link porta a un sito esterno. Non ha effetti funzionali, ma può essere utilizzato per definire stili CSS specifici.

Esempi di Utilizzo

Ecco come potresti utilizzare questi attributi in un link HTML:

<a href="https://www.example.com" rel="nofollow" target="_blank" title="Visita Example.com!">Visita Example</a>

In questo esempio, il link porta a "example.com", dice ai motori di ricerca di non seguire il link, si apre in una nuova scheda, e mostra un tooltip quando l'utente passa il mouse sopra.

Conclusione

Capire come e quando usare gli attributi di <a> può migliorare notevolmente l'usabilità del tuo sito, la sicurezza e la performance SEO. Sperimenta con questi attributi per vedere come influenzano l'interazione degli utenti e dei motori di ricerca con il tuo sito.