Qual è il modo migliore per strutturare un documento HTML per SEO e accessibilità?

Qual è il modo consigliato di strutturare html che include la navigazione in modo che sia ancora SEOable e accessibile.

Ad esempio, la struttura dovrebbe essere più simile a quella di un documento:

  1. Vai al contenuto (link, nascosto da CSS)
  2. Navigazione
  3. Soddisfare
  4. Altri contenuti (riquadri sulla destra, ecc.)

o:

  1. Vai alla navigazione (link, nascosto da CSS)
  2. Soddisfare
  3. Navigazione
  4. Altri contenuti (riquadri sulla destra, ecc.)

Ovviamente il CSS è usato per controllare il layout, ma i bot e gli screen-reader ignorano il CSS.

Mi è stato chiesto di spostare la navigazione dopo il contenuto da un client in precedenza, ma non penso che li abbia aiutati molto. In genere seguo la prima struttura menzionata sopra.

Alcuni suggerimenti casuali:

  • Mantieni i tuoi standard di markup conformi, validi e semplici.
  • Non aggiungere parole chiave o altro.
  • Tratta le intestazioni come dovrebbero essere trattate. Assicurati che ci sia solo un tag h1. Utilizzare le intestazioni con parsimonia sulla pagina ( Google – nel download PDF).
  • Usa gli attributi del titolo sugli ancoraggi e gli attributi alt sulle immagini (ma solo se l’immagine ha bisogno di un testo equivalente per alcuni utenti).
  • Usa rel = “nofollow” per indirizzare il succo di PR alle pagine che vuoi davvero che vadano.
  • Mantieni i contenuti unici per ogni pagina.
  • Utilizza gli strumenti per i webmaster di Google e l’equivalente di MSN e Yahoo !.
  • Costruisci, invia e mantieni i file sitemap.xml.

Qualsiasi pagina che non ha il suo contenuto nascosto in Flash o simile è SEO’able. I web crawler tendono a spogliare tutto e leggere la pagina come un stream di testo. Alcuni prestano attenzione alle tue parole chiave, al loro uso nel corpo del testo, ai tag H1 e H2, al titolo della pagina e persino al nome di dominio, ma non credo che siano influenzati dall’ordine della struttura della pagina.

Come utente di uno screen reader non mi interessa dove la navigazione è sulla pagina. La cosa che aiuta di più è avere i contenuti elencati per titolo, per esempio questa domanda è a livello h2 e le risposte iniziano al prossimo livello h2. I lettori di schermo offrono tasti che consentono di saltare per titolo, quindi trovo che la navigazione di direzione è più veloce, quindi trovare il collegamento di navigazione salta e premere Invio su di esso.

Riduci tutto il resto tranne il contenuto nel modo più semplice ansible.

Navigazione molto breve, aggiungi un link alla pagina di navigazione completa / / caricalo da AJAX.

No “Altri contenuti”. Se metti qualcosa nella pagina, devono essere correlati. Inoltre, dovrebbero essere ordinati in base alla loro relazione.

In genere è considerato “il migliore” per avere il contenuto il più vicino ansible alla parte superiore della pagina. Quindi, tecnicamente, il tuo secondo esempio è il migliore. Il collegamento salta al contenuto è un bel touch per gli screen reader, e dato che lo stato dei layout CSS è quello che sono, nessuno rimpiangerebbe il fatto di mettere un po ‘di navigazione semplice nella parte superiore del documento. Certamente non penso che danneggerebbe il tuo PageRank di Google.

La cosa migliore che puoi fare è spostare il contenuto il più vicino ansible alla parte superiore della pagina. Suggerirei questa struttura:

  1. Salta collegamenti
  2. Soddisfare
  3. Altro contenuto (riquadri a destra e simili)
  4. Navigazione