Temuto da molti webdesigner, la SEO spesso sembra un mal di testa meglio lasciata ai programmatori o agli analisti di marketing, ma non c'è motivo di stare in disparte. In questo breve tutorial costruiremo un semplice modello HTML e al contempo stabiliremo alcune best practice che possono influenzare il SEO del tuo sito direttamente dalla parola partire.

---

introduzione

SEO o Search Engine Optimization è il modo in cui imposti il ​​tuo sito per essere classificato più in alto dai motori di ricerca e influire sul modo in cui le informazioni vengono visualizzate nei risultati di ricerca. Sono finiti i tempi in cui acquistare Google Adwords era il modo migliore per presentarsi in cima a una query di ricerca, soprattutto perché molti inserzionisti non sono rilevanti per i risultati di ricerca che ha portato gli utenti a diffidare sempre più dei link sponsorizzati. AdWords si riprenderà, ma ci sono modi per influenzare il tuo motore di ricerca in piedi oggi.

Prima di tutto, dobbiamo capire che i crawler dei motori di ricerca, in particolare lo spider di Google, leggono la fonte della pagina facendo ipotesi in base al contenuto e al markup. La gerarchia logica del codice HTML è fondamentale per determinare l'importanza dei contenuti, ma il buzz su Internet ci dice che Google sta iniziando a basare i risultati sulla tua presenza social e sulla tua pagina. È giusto, puoi dimenticarti di Facebook e Twitter come semplici strumenti di gioco, che potrebbero aiutarti a creare o distruggere il tuo sito web.

Ragno saltatore di Rundstedt B. Rovillos, su Flickr

---

Passaggio 1: Struttura HTML di base

Iniziamo guardando alcuni markup HTML fondamentali:

Questa struttura segue gli standard stabiliti in modo che i browser sappiano cosa fare della tua pagina. Nella parte superiore del nostro codice stabiliamo che tipo di documento è e in quale lingua è scritto. Tra i nostri i tag informano il browser che stiamo utilizzando il set di caratteri standard utf-8. Abbiamo quindi il titolo del nostro sito e abbiamo aggiunto una dichiarazione condizionale per caricare shiv HTML5 che compensa i problemi di compatibilità con IE 9. Il i tag, ovviamente, stabiliscono dove apparirà il contenuto della nostra pagina.

Semplice e diretto, vero? Ma in verità abbiamo già tralasciato informazioni importanti.

---

Passaggio 2: aggiunta di meta tag

Torniamo all'inizio del nostro codice e aggiungiamo la seguente riga di codice subito dopo l'apertura etichetta:

Questa riga indica ai motori di ricerca cosa visualizzare sui risultati di ricerca direttamente sotto il titolo della pagina. In questo caso i risultati su Google potrebbero essere presentati come tali:

Nota: Un punto che è molto importante ed è spesso trascurato è che si dovrebbe adattare entrambi titolo e meta tags di ogni pagina del tuo sito in particolare per i contenuti di ciascuna pagina. Per il titolo può essere semplice come .

Il codice all'interno del nostro i tag ora hanno il seguente aspetto:

Nota: Per informazioni sul motivo per cui abbiamo trascurato di includere meta keywords, controlla la discussione nei commenti.

---

Passaggio 3: collegamento ai nostri CSS e JS

Comuni in quasi tutte le pagine Web sono collegamenti a file CSS e codice Javascript o librerie. Se seguiremo i suggerimenti di codifica di Google, dovremmo cercare di mantenere le nostre query esterne (richieste HTTP) al minimo, quindi mirare a mantenere le risorse CSS e Javascript su un solo file ciascuna, se possibile. Aggiungiamo al nostro modello le richieste generiche per i nostri file esterni.

Innanzitutto collegheremo il nostro foglio di stile esterno aggiungendo il seguente codice appena prima del tag di chiusura:

Successivamente facciamo lo stesso per il nostro file Javascript aggiungendo la seguente riga:

Aggiungiamo il javascript alla fine della nostra pagina, appena prima del tag di chiusura in modo che il nostro codice finisca come segue:

Perché abbiamo aggiunto la query Javascript alla fine della pagina? Due ragioni:

• In questo modo è possibile caricare direttamente il contenuto della pagina, anziché attendere che venga elaborato Javascript.
• Aiuta anche i motori di ricerca nella lettura dei contenuti della tua pagina. Perché? Bene, se pensiamo logicamente, il crawler inizia nella parte superiore della pagina e scorre il codice. Se il Javascript viene aggiunto nella parte superiore della pagina, il motore di ricerca viene eseguito attraverso Javascript prima di raggiungere il contenuto della pagina. È ovvio che vogliamo che il motore di ricerca vada direttamente ai nostri contenuti per un'indicizzazione più efficace. Alla fine della pagina dovrebbe essere aggiunto qualsiasi Javascript referenziato, sia esterno che interno.

Un'altra regola da tenere a mente è che se hai più di un file CSS o Javascript, segui sempre le regole della gerarchia e metti prima il file più importante, aggiungendo il resto consecutivamente. Dopo tutto, non puoi usare un'incredibile funzione Javascript che usa la libreria jQuery, se non chiami prima la libreria jQuery.

---

Passaggio 4: Completare il nostro modello

Abbiamo quasi finito con il nostro modello, ma potremmo fare con l'aggiunta di alcuni contenuti. Con l'introduzione di HTML5 rendere il tuo sito SEO friendly è diventato molto più facile; la semantica corretta fornisce ai motori di ricerca istruzioni molto specifiche su cosa trovare e dove trovarlo. Aggiungiamo alcuni elementi comuni che probabilmente useremo nella maggior parte dei siti che progettiamo.

Proprio sotto il tag e prima del tag, aggiungiamo le seguenti righe di codice:

  
Nome del sito web
   
 
 
Intestazione articolo
 
Qualche testo semplice per aiutarci
 Leggi di più?  
 
  

Il nostro codice dovrebbe ora apparire come segue:

            
Nome del sito web
   
 
 
Intestazione articolo
 
Qualche testo semplice per aiutarci
 Leggi di più?  
 
     

Dove una volta avremmo usato i contenitori div, ora abbiamo implementato un markup più descrittivo. Il ,