10 articoli per scoprire se il vostro progetto WordPress è di valore – 5. Titoli ed immagini

La qualità di un progetto WordPress è verificabile attraverso l’analisi di alcuni elementi come titoli e immagini

Uno dei modi più semplici per indagare se il vostro progetto sia di qualità, pur non avendo competenze tecniche, è quello di andare ad ispezionare alcuni elementi del vostro sito mentre lo navigate.
Gli elementi più semplici da ispezionare sono i titoli e le immagini. Si tratta di due tipologie di elementi estremamente facili da comprendere e da verificare, e le potete farlo con l’aiuto di una persona che abbia pratica del linguaggio HTML allora sarete ancora più certi del risultato.

Nozioni di base per l’ispezione HTML di un progetto WordPress utilizzando un browser come Google Chrome

Per poter continuare questo piccolo viaggio attraverso i codici di titoli ed immagini è doveroso mettervi nella condizione di comprendere, anche senza essere professionisti, quello di cui parliamo e quello che quindi andrete ad osservare.

Ogni cosa, ogni elemento sul vostro schermo, che è parte del vostro sito Internet viene costruito attraverso l’uso di un linguaggio unico ed universale, un linguaggio che fin dagli albori compone il web e che non è mai stato cambiato: HTML.

Titoli, paragrafi, immagini, video, elementi grafici come riquadri, linee e blocchi di testo sono tutti rappresentati da codice html. Ogni elemento, prendiamo come esempio il titolo di pagina, è definito entro due elementi di codice che ne definiscono l’inizio e la fine, per questo, se il nostro titolo di pagina che vediamo a video fosse: “La storia della nostra società” questo, tecnicamente, nel linguaggio HTML dovrebbe essere rappresentato in questo modo:

<h1>La storia della nostra società</h1>

Come vedere questo codice?

E’ molto semplice. Utilizzate il vostro mouse per posizionarvi sopra ad una qualunque lettera di questo titolo che vedete a schermo all’inizio della vostra pagina, cliccate con il tasto destro del mouse e da menù contestuale che si apre, scegliete la voce: ispeziona.
Si aprirà quindi una finestra che vi permetterà di vedere tutto il codice HTML della pagina che state visualizzando con focus sull’elemento che state ispezionando, per l’appunto il titolo di pagina. A questo punto sarete in grado di verificare che sia (per lo meno) come mostrato sopra.

GLi H- in una pagina web HTML

Una pagina web può essere più o meno complessa ma è improbabile che non abbia un titolo. Detto questo, la pagina, può limitarsi ad avere un titolo ed un corpo del testo oppure, come ad esempio accade spesso con gli articoli di un blog, avere un titolo e vari paragrafi con loro propri titoli che introducono i significati e i contenuti di ogni singolo paragrafo.
Per verificare la qualità del vostro codice, e quindi del vostro progetto, in questo caso vi basterà, nel caso di una pagina semplice, verificare che il titolo sia un H1. In una pagina complessa dovrete verificare che la pagina abbia un H1, titolo di pagina, e che non ce ne siano altri, ovvero, tutti gli altri titoli, che sono titoli di sezione, di capitolo o di paragrafo, siano a cascata degli:

  • H2 (specificazione di un H1, ce ne possono essere quanti ne servono)
  • H3 (specificazione di un H2, ce ne possono essere quanti ne servono)
  • H4 (specificazione di un H3, ce ne possono essere quanti ne servono)
  • H5 (specificazione di un H4, ce ne possono essere quanti ne servono)
  • H6 (specificazione di un H5, ce ne possono essere quanti ne servono)

Questo vi fa capire che i titoli sono un percorso a cascata dall’1 al 6. L’ipotetica visualizzazione dei soli titoli di una pagina deve creare una mappa di contenuto.

Le immagini

Passiamo alle immagini: vi diamo qui un’indicazione che vi dia immediatamente la possibilità di verificare la bontà del vostro codice e quindi del vostro progetto WordPress.
Come detto poco sopra, ogni elemento della vostra pagina è rappresentato da un certo tipo di codice HTML quindi lo sono anche le immagini.
Il codice minimo che rappresenta un’immagine sul web è il seguente:

<img src="/my-pictures/test.jpg" />

Questo codice ci dice due cose: l’immagine è rappresentata dal codice “<img …” e l’immagine visualizzata è l’immagine di nome “test.jpg” che risiede nella cartella “my-pictures”.
Quando ispezionate una immagine il codice che la rappresenta deve sempre iniziare con “<img …” che può essere seguito da molti parametri che ovviamente non dovete per forza comprendere ma è importante che l’immagine nel vostro codice sia un’immagine fisica e tangibile e questo è garantito dall’inizio del suo codice: <img …
Vi starete quindi chiedendo in quali casi un’immagine non sia fisica o non sia tangibile, bene, fino a qualche tempo fa era pratica comune, per una gestione semplificata dello spazio web, inserire le immagini come “fondo” di un contenitore. Pensate di avere una parete di una vostra stanza da completare e state pensando di appendere un quadro, fino a poco tempo fa era pratica disegnare il quadro sulla parete piuttosto che comprare e appendere un vero quadro.
Quando nel vostro codice un’immagine non è reale ma fittizia, e quindi rende il vostro codice di bassa qualità, questa è più o meno rappresentata cosi (useremo la stessa immagine dell’esempio precedente):

<div style="background-image:url('/my-pictures/test.jpg');"></div>

Ovviamente esistono un’infinità di modi di inserire un’immagine in modo sporco nel codice, vi basti ricordare come deve essere, e non come NON deve essere: l’immagine è rappresentata da un codice che inizia con <img …

Verificare un valore aggiunto dell’immagine significa andare ad indagare il codice <img e scoprire che a seguire troviamo due elementi all’interno del codice <img che sono alt=”un-testo-descrittivo-qui” e title=”il-titolo-dell-immagine-qui” dove i testi contenuti sono la descrizione dell’immagine ed il titolo dell’immagine e così il nostro codice finale potrebbe essere:

<img alt="un-testo-descrittivo-qui" title="il-titolo-dell-immagine-qui" />

Un progetto WordPress che abbia immagini reali, che significa indicizzabili dal motore di ricerca, con attributi quali il titolo e la descrizione è un progetto sicuramente curato e per il quale è stata fatta attenzione alle caratteristiche indicate come importanti da parte della SEO.

Menu
Find out more