Evitare la navigazione JavaScript senza link reali.

Perché i pulsanti o i gestori di clic non dovrebbero sostituire i normali link di contenuto?

La navigazione tra gli indirizzi dei contenuti utilizza link con href. JavaScript può velocizzare la transizione a condizione che vengano mantenuti il ​​comportamento predefinito, il focus, la cronologia e l'indirizzo di destinazione; i pulsanti rimangono riservati alle azioni all'interno della vista corrente.

Destinazione completa

1. Tutti gli elementi cliccabili vengono inventariati in base alla navigazione dei contenuti, all'azione locale e al controllo composito.

2. Le destinazioni di navigazione ricevono link reali e URL accessibili lato server; JavaScript aggiunge solo velocità e transizioni di stato.

3. Test senza script, tramite tastiera, con funzione nuova scheda e indietro, verifica della semantica, chiamata diretta e focus dopo ogni cambio.

Esempio funzionante: "Div cliccabile"

Un componente mappa attualmente apre i dettagli tramite un gestore di eventi click sull'intero contenitore. Il titolo e l'area di azione "Cancella" diventano normali link; la mappa rimane utilizzabile, mentre l'accesso diretto, le nuove schede e l'accelerazione client utilizzano lo stesso target.

Comportamento mantenuto

• Il contenuto cambia tramite pulsanti, ancore vuote o aree cliccabili generiche senza un indirizzo di destinazione direttamente accessibile.

• Percorsi di navigazione che non forniscono lo stesso contenuto senza JavaScript, utilizzando la tastiera, una nuova scheda o il pulsante Indietro.

Div cliccabile

• Div cliccabile – Un contenitore generico risponde ai clic del puntatore ma non è utilizzabile tramite la navigazione da tastiera o come destinazione per crawler e menu contestuali.

• href vuoto – Un anchor appare semanticamente corretto ma non ha una destinazione reale e rimane completamente dipendente dal gestore in esecuzione.

• Interruzione della cronologia – Il client modifica il contenuto senza aggiornare correttamente l'URL e il focus, con conseguente errore nella navigazione all'indietro e nell'orientamento.

Elemento semantico

• Elemento semantico – Il passaggio a un URL diverso è implementato come un link, mentre un'azione che modifica lo stato all'interno della vista è implementata come un pulsante.

• Destinazione completa – L'indirizzo href funziona direttamente, in una nuova scheda e senza esecuzione di script, con contenuti e stato appropriati.

• Comportamento mantenuto – La navigazione lato client rispetta i tasti modificatori, la cronologia, il focus e il pulsante Annulla, e non ignora inutilmente le convenzioni del browser.

Come la "Navigazione JavaScript con link reali" si collega ad altri argomenti

Una domanda approfondita con relativa risposta Quando l'HTML renderizzato lato server è cruciale per la SEOPer quali pagine la reperibilità giustifica lo sforzo del rendering lato server?

Vengono offerti ulteriori punti di vista Problemi con il file robots. txt che si presentano solo in combinazione con i meta tag robots.

Se desideri implementare concretamente la "Navigazione JavaScript con link reali", puoi fare riferimento a Sistemi web robusti Questo articolo si concentra su "Routing, link e metadati" ed "Elementi semantici".

Conclusione: Navigazione JavaScript con link reali

I link reali supportano la navigazione anche al di fuori dell'esecuzione dell'applicazione. JavaScript ne migliora l'esecuzione, ma non dovrebbe sostituire l'indirizzo e la semantica del browser.

Fonti e ulteriori informazioni

La seguente documentazione e gli standard ufficiali forniscono la classificazione tecnica.

• Comprendere le basi della SEO per JavaScript – Google Search CentralLa documentazione definisce i requisiti relativi a URL, cronologia, link, canonicalità e stato per le applicazioni JavaScript.

• Correzione del caricamento differito dei contenuti web – Google Search CentralGoogle descrive metodi di caricamento differito e scorrimento infinito indicizzabili che non dipendono dall'interazione dell'utente.