Codici html e css utili per impaginare le pagine web di un sito

Copyright immagine: https://it.freepik.com

Per aumentare il posizionamento del tuo sito web è necessario lavorare su due fronti:

  1. dare al tuo cliente ideale i contenuti che sta cercando

  2. far capire al motore di ricerca quello che stai comunicando

In questo articolo trovi dei "pezzi di codice" utili per incrementare l'incisività delle keyword nelle tue pagine web e un paio di consigli tra le righe per impaginare gli elementi nei contenuti, migliorando quindi la user experience del tuo sito.

PERCHE' E' IMPORTANTE CONOSCERE IL NOSTRO TEMPLATE

Forse lo sai, forse non lo sai, in ogni caso il tuo sito web è stato costruito utilizzando un template, ovvero un insieme di file che si occupano di far visualizzare i contenuti del tuo sito in un certo modo.

Tecnicamente un template è un insieme di codice HTML e CSS. (Ci sono anche altri linguaggi in un template come Javascript, ma ai fini di questo articolo ci soffermeremo al semplice uso di html e css)

L'HTML si occupa di inserire gli elementi nella pagina, per esempio se volessimo inserire un testo in una pagina web scriveremmo la seguente linea:

<p>Buongiorno Mondo!</p>

Per inserire un'immagine invece:

<img src="/immagine.jpg" >

Il CSS invece si occupa di stilizzare gli elementi, quindi per esempio di colorare in rosso il testo di prima:

<p style="color: red">Buongiorno Mondo!</p>

Oppure di allineare l'immagine a sinistra:

<img src="/immagine.jpg" style="float: left">

I template nascono per definire delle regole generali che valgono per tutte le pagine del nostro sito.

Supponiamo per esempio di voler usare un particolare tipo di grigio scuro per tutti i testi del nostro sito. Scriviamo in tutti i paragrafi del nostro sito che quella linea deve essere grigia scura? NO, perchè il giorno che cambi idea e vuoi il testo blu immagina quanto tempo ci vorrebbe per modificare tutte le linee di tutte le pagine di un sito con anche solo una decina di pagine web!

La soluzione sta nel creare delle regole generali valide per tutti gli elementi di tutte le pagine.

Il CSS ci permette di creare un file esterno che viene richiamato ogni volta che la pagina web viene caricata. Di seguito un esempio:

<link href="/ilmiofiledistile.css" rel="stylesheet" type="text/css"/> <p class="coloretesto">Buongiorno Mondo!</p>

Dove il file ilmiofiledistile.css contiene la seguente regola:

.coloretesto {color: red}

Quindi ogni paragrafo in ogni pagina web che contiene la regola "coloretesto" colorerà il testo del colore che abbiamo impostato, e se un indomani ci prende l'idea di cambiare colore, cambieremo solo quell'impostazione e per tutte le nostre centinaia di pagine web il colore magicamente cambierà.

Fortunatamente la maggior parte dei template creati per WordPress e Joomla (o altri CMS) hanno un'interfaccia intuitiva che ti permette di gestire le opzioni del template come colori, allineamenti, posizioni e molto altro.

Prima di scegliere un template è bene capire come è stato costruito e se offre tutte le funzionalità di cui abbiamo bisogno.

Di seguito gli strumenti più famosi e consigliabili per gestire i template di WordPress:

  • Genesis
  • Elementor
  • Divi
  • Themify

Di seguito gli strumenti più famosi e raccomandabili per gestire i template di Joomla:

  • Helix
  • Gantry
  • T3
  • Vertex


SE CI SONO I TEMPLATE PERCHE' CI SERVE CONOSCERE L'HTML?

Il template si occupa di dettare le regole generali del template, ma per ottimizzare minuziosamente i contenuti di un sito web è necessario conoscere i seguenti codici html:


Il TAG H1

Il tag h1 è molto importante perchè rappresenta il titolo della nostra pagina web e i motori di ricerca lo prenderanno seriamente in considerazione. Se il nostro sito web è il sito di una Carpenteria a Bergamo, è consigliabile inserire da qualche parte il seguente codice:

<h1>Carpenteria Bergamo</h1>

Puoi inserirlo in homepage oppure puoi creare una landing page dedicata per cercare di attrarre il traffico dalla keyword "carpenteria bergamo".


Il TAG H2

E' il sottotitolo della pagina e anch'esso viene considerato molto dallo spider del motore di ricerca. Per esempio se vendi attrezzatura da pesca puoi creare una landing page con H1 "Vendita attrezzatura da pesca" e 3 sottotitoli H2 come segue:

<h2>Canne da Pesca</h2> <h2>Mulinelli</h2> <h2>Abbigliamento da Pesca</h2>

Il TAG STRONG

Per sottolineare l'importanza di una parola chiave all'interno di un testo la puoi racchiudere all'interno del tag strong e il motore di ricerca capirà che quella locuzione avrà un valore più importante nel testo. Di seguito un esempio che si riferisce a un paragrafo di un testo all'interno di un sito web di un sito di vendita vestiti da sposa:

<p>Gli <strong>abiti da sposa</strong> della nostra collezione hanno un design raffinato e moderno.</p>

L'ATTRIBUTO ALT

Per dire al motore di ricerca il significato di un'immagine è importante inserire l'attributo alt alle immagini per una maggiore probabilità di comparire nella ricerca per immagini del motore di ricerca.

<img src="/immagine.jpg" alt="Immagine di una scarpa rossa Nike sportiva modello xyz" >

ALLINEARE UN'IMMAGINE E DARLE UN MARGINE

Per allineare un'immagine a sinistra o a destra del testo è possibile utilizzare il seguente codice html:

<img src="/immagine.jpg" style="float: left; margin-right: 15px">

Ovviamente per allinearla a destra basta sostituire left con right e inserire il margine a sinistra invece che a destra.

Allineare un'immagine con CSS

METATAG TITLE E METATAG DESCRIPTION

Il metatag TITLE viene usato dai motori di ricerca per mostrare il titolo di una pagina web. E' un elemento fondamentale per il tuo posizionamento nel motore di ricerca. Il metatag DESCRIPTION è una frase che spiega in modo più dettagliato di cosa si parla in quella pagina web. Di seguito puoi vedere dove compaiono nella ricerca e facilmente dedurre la loro importanza.



Questi due metatag vengono inseriti in ogni pagina web del tuo sito. In base allo strumento che usi per creare e gestire il tuo sito web vengono inseriti in modalità diverse.

QUANTO POSSONO FARE LA DIFFERENZA QUESTI ACCORGIMENTI?

Scolpire e rifinire le nostre pagine web con l'uso di questi codici può risultare in un enorme incremento di visibilità nelle ricerche di Google. Il king rimane comunque il contenuto e quanto esso sia interessante, coinvolgente e pertinente al tuo pubblico target.

Per alcuni clienti, il semplice aggiustamento di questi elementi ha prodotto la comparsa del sito nella prima pagina e al primo posto.

E cosa significa essere al primo posto in Google con la parola chiave giusta? Lascio a te la risposta.

Per approfondire le tecniche di ottimizzazione di un sito web ti consiglio di leggere questa guida SEO.

Davide Masserini