Elementi Web utilizzati correttamente per SEO
Pubblicato: 2019-01-12Ultimo aggiornamento il 16 gennaio 2019
La maggior parte delle pagine Web è composta da 3 elementi di base, HTML, CSS e JavaScript. Questi elementi costitutivi costituiscono tutte le pagine Web, indipendentemente da ciò che usano per renderle. Ogni elemento web ha il suo posto giusto. Anche se possono esserci delle sovrapposizioni, il loro utilizzo intenzionale aiuta a creare una pagina ottimizzata per il SEO. Quindi, come dovrebbero essere utilizzati questi elementi e quali sono i modi in cui possono essere utilizzati in modo improprio?
Le funzioni di base dell'elemento web
Confrontiamo una pagina web con una casa. Una casa ha diverse parti, ognuna al suo posto e che serve al suo scopo. Nella nostra webpage house, l'HTML ricorda gli elementi strutturali del web, le capriate, i muri, le fondamenta. L'HTML fornisce un importante layout del contenuto della pagina, delineandone l'ordine e quali elementi appaiono dove.
I CSS dovrebbero essere usati per lo stile. Se ci atteniamo all'illustrazione della casa, questo sarebbe il colore delle tue pareti, dei tuoi armadi, del tipo di pavimento che hai, ecc. I colori della tua pagina, le dimensioni dei caratteri, il layout effettivo della pagina possono anche essere definiti nel CSS. Ma aspetta, il layout non dovrebbe essere nell'HTML? Buona domanda. Mentre l'HTML dovrebbe disporre gli elementi che saranno sulla tua pagina, CSS dovrebbe controllare come tali elementi verranno visualizzati su quella pagina. I CSS sono responsabili di gran parte della reattività del web.
In qualità di fornitore di white label leader a livello mondiale per le agenzie di tutto il mondo, possiamo aiutarti a fornire risultati SEO eccezionali per i tuoi clienti. Possiamo aiutarti? Scopri di più sui nostri servizi SEO White Label e scopri come ti aiutiamo a raggiungere i risultati che stai cercando.
Ora che la tua casa è stata costruita, è tempo di alcune utenze, come l'elettricità e l'acqua corrente. JavaScript dovrebbe essere utilizzato per gli elementi interattivi della tua pagina, come modificare gli elementi quando si fa clic, visualizzare dati e così via. JavaScript può essere utilizzato per modificare l'intero aspetto della tua pagina, il che funziona bene se la stai adattando a un determinato pubblico o caso d'uso.
Perché separarli?
Quindi, se puoi usare HTML e CSS sia per il layout, sia JavaScript e CSS per lo stile, perché separarli? Quando Google indicizza la tua pagina, cerca indicatori chiave su cosa tratta la tua pagina e come funziona. Se usi uno degli elementi in modo inappropriato, puoi inviare segnali sbagliati e danneggiare le tue classifiche. Questo può accadere spesso quando si lavora con editor CMS che utilizzano gli stili predefiniti per gli elementi o che eseguono JavaScript non necessario che rallenta le pagine per fare cose che potrebbero essere fatte in CSS.
Quindi, esaminiamo alcuni degli usi impropri comuni.
Uso improprio dei tag di intestazione
Uno degli usi impropri più comuni è l'utilizzo di tag di intestazione per lo stile degli elementi web. I tag delle intestazioni delineano gli argomenti principali di una pagina, dal tag H1 più importante (ogni pagina dovrebbe avere) a H6. Quando sei abituato a dare uno stile agli elementi, stai dicendo a Google che quelle parole sono ciò di cui parla la tua pagina. Oppure potresti usare il tag di intestazione sbagliato (come usare un h3 invece di un h2 perché ti piace di più la dimensione del carattere). In entrambi i casi, stai inviando il messaggio sbagliato. Invece, dovresti usare CSS per dare uno stile agli elementi alla dimensione o al carattere appropriato che desideri.
Tag H1 doppi
Un altro problema comune è avere 2 o più tag H1 su una pagina. Il tuo tag H1 dovrebbe essere l'idea principale della pagina; dovrebbe dire a tutti (e a tutti i bot di scansione) che visitano la pagina di cosa si tratta e, in quanto tale, dovresti averne solo uno. Avere due tag H1 è come inviare due segnali diversi sulla pagina. Alcune persone e persino i temi professionali tendono a mettere il loro logo in un tag H1. Quindi stai attento per assicurarti che ce ne sia solo uno per pagina.
Tutte le immagini sono immagini di sfondo.
Non c'è niente di sbagliato nell'avere uno sfondo dell'immagine. Le immagini sono accattivanti e possono aggiungere molto valore al tuo sito e indurre gli utenti ad acquistare prodotti o servizi. Ma tutte le tue immagini non dovrebbero essere immagini di sfondo. Di recente, lavorando su un sito, ho scoperto che il CMS trasforma tutte le immagini in immagini di sfondo. L'intenzione qui è di modellarli e ridimensionarli più facilmente. Anche se può far sembrare migliore, perdi una parte vitale del vantaggio delle immagini sulla tua pagina: testo alternativo. Il testo alternativo descrive cosa c'è nell'immagine e viene utilizzato dagli screen reader per identificare cosa c'è in un'immagine. Creando immagini di sfondo di tutte le tue immagini riduci l'accessibilità della pagina rendendola più difficile per le persone con disabilità e puoi prendere un colpo da Google nelle tue classifiche.
Rendering CSS con JavaScript
La pubblicazione inutilmente di CSS tramite JavaScript aumenta i tempi di caricamento delle pagine. È molto meglio collegare il file CSS nell'intestazione invece di sottoporlo a quel passaggio aggiuntivo. Inoltre, l'utilizzo di JavaScript per semplici animazioni o effetti al passaggio del mouse aumenta il tempo di caricamento quando può essere eseguito molto più velocemente tramite CSS. Anche l'aggiunta di framework JavaScript quando non necessari può aumentare i tempi di caricamento. Come caricare jQuery per animare un pulsante. Invece di scrivere il JavaScript vanilla, o ancora meglio, usare gli elementi di animazione in CSS o anche un foglio di stile di animazione CSS, carica molto più velocemente.
Styling degli elementi web in HTML
Lo stile degli elementi direttamente nel file HTML è un argomento controverso. Molti temi e plug-in in WordPress e altri CMS si basano continuamente sulla sovrascrittura di fogli di stile e altri plug-in. Questo è generalmente visto come una cattiva pratica. Alcuni creatori di contenuti scrivono stili direttamente nei loro contenuti perché vogliono cambiare gli stili dei temi. Qual è il problema con questo? Spesso causa problemi CSS quando gli stili scritti direttamente negli elementi HTML sovrascrivono gli stili nel file CSS. Per evitare ciò, invece di scriverlo direttamente nell'HTML, assegna agli elementi web una classe e aggiungi un nuovo foglio di stile a cui aggiungi gli stili. Ciò può evitare problemi con fogli in conflitto che possono rompere o modellare il tuo sito in modo errato.
Utilizzo dell'HTML per lo stile dei layout
Questo è un po' complicato perché i temi spesso accoppiano i selettori CSS con la struttura HTML. Ciò rende più difficile per una persona apportare modifiche alla struttura HTML senza interrompere gli stili vitali che rendono la pagina leggibile e funzionale. Per esempio:
Nell'esempio, se si modifica la struttura dell'HTML del primo, si perderebbero tutti gli stili per quell'elemento perché dipendeva dalla struttura. Invece, disaccoppiare lo stile dalla struttura, come nelle classi successive, ti permetterà di riutilizzare il tuo CSS anche se cambi la struttura HTML.
Una pagina formattata correttamente è una pagina ben ottimizzata.
Il contenuto della tua pagina è un fattore enorme nelle classifiche. Così sta utilizzando correttamente gli elementi della pagina web. In particolare, HTML, CSS e JavaScript svolgono un ruolo altrettanto importante nel rendere la tua pagina ottimizzata SEO. Conoscendo il ruolo di ogni elemento web e utilizzandolo in modo appropriato, puoi aumentare il tuo posizionamento. Costruisci semplicemente una pagina che sia funzionale e attraente. Se stai pensando di cambiare tema per un CMS o di aggiungere CSS o JavaScript personalizzati alle tue pagine, dai una seconda occhiata e assicurati di utilizzare correttamente i tuoi elementi web.