Questo è un h1

Questo è un h1

Quali sono i codici HTML che un copy deve conoscere?
Quelli che trovi in questo articolo in cui ti mostro come usare i codici, usando i codici. Tu chiamali se vuoi metacodici…

Le ancore

Le ancore sono dei link che puntano a un punto preciso del testo. Servono a creare dei menu on page interattivi. Sono molto utili soprattutto nei testi lunghi perché permettono all’utente di saltare da un paragrafo all’altro senza fare continui scroll sulla pagina.

Ecco un esempio di link interni.

In questo articolo vedremo insieme:

Per creare le ancore servono due stringhe di codice. La prima stringa è il collegamento ipertestuale.

codice per creare ancora html

La seconda stringa di codice è la nostra ancora, ossia il punto del testo in cui atterrerà l’utente. Il codice è questo che vedi in basso.

codice per creare ancore

I paragrafi: h1, h2, h3, h4, h5


No, no, no al testo muro di cemento. I contenuti vanno organizzati in modo gerarchico, sia a livello contenutistico che visivo.

Sì, si, sì ai paragrafi interni (heading tag).
I codici degli heading tag sono molto semplici.

Heading tag WordPress

Il risultato è questo.

I codici principali di WordPress

Il grassetto

Il grassetto corsivo

Il codice per definire i paragrafi è questo.

p codice paragrafi

Quando hai bisogno dell’interruzione di linea, ossia di mandare il testo a capo “forzandolo”, puoi usare il codice break line:

Codice br HTML

Il codice break line, a differenza degli altri codici, è un tag a vuoto, ossia non ha bisogno di essere chiuso.

Il codice break line non va confuso con il codice per aumentare l’interlinea.

Codice per aumentare l'interlinea

Il risultato:
Testo, testo, testo, testo, testo.


Testo, testo, testo, testo.

b e strong

Questa è una frase in strong.
Questa è una frase scritta in b

Tu non noti la differenza tra le due frasi, ma il motore di ricerca sì.
Le parole in strong hanno valenza semantica, strizzano l’occhio al motore di ricerca. Lo strong va usato in ottica SEO.

Il tag b, invece, non ha valore semantico. Puoi usarlo per evidenziare un’informazione, per attirare l’attenzione su una frase, ma la parola in b non sarà letta come una keyword dai motori di ricerca. Almeno per ora…

Il tag more


Il tag more permette di far vedere nell’homepage o nella pagina principale del blog un’anteprima dell’articolo. È molto utile perché fa entrare il lettore piano piano all’interno del testo. Questo è il codice.

Codice tag more

Un esempio di tag more? Basta chiedere.

esempio tag more Pennamontata

Citazioni


Le citazioni arricchiscono i testi, li rendono poetici e poi ammettiamolo… piacciono tanto sia a noi copy che ai lettori. Quindi perché non sfruttarle anche dal punto di vista grafico? Segnati questo codice.

Codice citazioni HML block quote

Il risultato è questo.

Un buon design è evidente. Un grande design è trasparente. Joe Sparano

Come creare e usare i link in modo corretto


I link sono importantissimi all’interno di un testo, se e solo se:

  • sono pertinenti;
  • migliorano l’esperienza del lettore;
  • approfondiscono l’argomento.

Sono vie-ta-ti i link creati ad hoc che puntano al proprio sito.

Questo è il codice che permette a una parola di trasformarsi in un collegamento ipertestuale.

Codice HTML link

Quando l’utente clicca sul link si ritrova in maniera automatica in un’altra pagina web. Per non far “perdere” al lettore la fonte del link, basta inserire il target blank, codice che fa aprire il link in una nuova finestra.

Codice target blank

Cos’è il rel nofollow e quando usarlo

“Bisogna inserirlo sempre”, “Io non lo uso mai”, “Dipende dai casi”.
Sul rel nofollow ogni giorno se ne sente una diversa.

Il rel nofollow è un codice che dice a Google: “Non seguire questo link”.
Schermata 2017-06-06 alle 11.15.04

Quando inserire il rel nofollow? Principalmente quando non siamo certi dell’autorevolezza della fonte.

Ecco le parole di Google a proposito del rel nofollow

Il posizionamento di un sito nei risultati di ricerca di Google si basa in parte anche sull’analisi dei siti che contengono link che rimandano al sito. Per impedire che i link a pagamento influenzino i risultati di ricerca e abbiano un impatto negativo sugli utenti, invitiamo i webmaster a utilizzare l’attributo nofollow su tali link…. Il modo migliore per incoraggiare l’inserimento in altri siti di link di qualità e pertinenti al tuo è creare contenuti univoci e peculiari, in grado di acquisire naturalmente popolarità nella comunità di Internet. La creazione di validi contenuti paga: i link sono solitamente voti redazionali dati per scelta e maggiore è l’utilità dei tuoi contenuti, maggiori saranno le probabilità che un altro utente li ritenga validi per i propri lettori e inserisca un link a essi.

I link possono essere inseriti all’interno di un’immagine? Sì, e si fa così.

Codice link dentro l'immagine

Il risultato è questo.

Il copy definitivo

Sì, anche gli indirizzi email possono essere trattati come link.

Schermata 2017-06-06 alle 11.19.16

Come creare elenchi puntati

Gli elenchi puntati sono la salvezza del copywriter, perché:

  • aiutano a organizzare le informazioni;
  • migliorano l’esperienza dell’utente;
  • aiutano a semplificare concetti complessi.

Per creare gli elenchi puntati hai bisogno di due codici ul e li.

Il primo codice dice a WordPress che quello che segue è un elenco puntato, il secondo, invece, definisce gli elementi all’interno dell’elenco.

È più difficile a dirsi che a farsi. Guarda qui.

codice elenco puntato

Gli elenchi puntati possono essere anche numerati. In questo caso il codice è diverso: non è più ul ma ol.

codice elenco numerato

Elenchi puntati dentro elenchi puntati

Si può fare! E si fa così.

Codice HTML per elenco puntato dentro elenco puntato


Effetto barrato

L’effetto baratto barrato si ottiene con questo codice:

Codice HTML effetto barrato

Le immagini

Come avete visto nella lezione di Francesca, le immagini possono avere una funzione:

  • “spezza muro”;
  • riassuntiva (grafici, infografiche);
  • esplicativa (screenshot).


Il tag alt delle immagini

Il tag alt è importantissimo perché permette a Google di “leggere” le immagini e di conseguenza ottimizzarle. È un modo alternativo per farci trovare dagli utenti.

Inoltre:

  • il testo alternativo viene mostrato quando l’immagine non si carica correttamente.
  • Gli ipovedenti o i non vedenti, attraverso dei software specifici, “ascoltano” la descrizione dell’immagine. Ecco perché il testo alternativo non dovrebbe contenere solo la keyword, ma deve, in maniera sintetica, descrivere l’immagine.

Un esempio concreto. In un articolo dal titolo: “Quinoa: le ricette più gustose”, ecco come non, e come usare, il testo alternativo.

Esempi uso tag alt

Click to tweet

I tweet non devono essere commerciali.
[Tweet “I codici somigliano a una matrioska. Possono stare l’uno dentro l’altro.”]

Ricorda:

  • I tag devono stare vicini vicini alle parole.
  • Chiudi i tag. Tranne nei casi di tag a vuoto.
  • Dividi il testo in paragrafi.
  • Non abusare dello strong.
  • Personalizza l’url.
  • Spunta la categoria corretta.
  • Metti il tag more.
  • Salva spesso la bozza.
  • Imposta l’immagine in evidenza.
  • Comprimi le immagini.
  • Cura il tag alt delle immagini.
  • Apri i link in una nuova finestra.
  • Inserisci il nofollow se necessario.
  • Controlla title e meta description.
  • Non pubblicare prima di aver controllato l’anteprima.
  • Pubblica (Che soddisfazione!)
  • Prima di condividere il post su Facebook fai il debug.

È tutto!

Take A Bow Thank You GIF by Iliza - Find & Share on GIPHY