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:
- I paragrafi: h1, h2, h3, h4, h5
- Differenza tra b e strong
- Il tag more
- Le citazioni
- Come mettere i link in modo corretto
- Come creare elenchi puntati
- L’effetto barrato e l’effetto sottolineato
- Come ottimizzare le immagini
Per creare le ancore servono due stringhe di codice. La prima stringa è il collegamento ipertestuale.
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.
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.
Il risultato è questo.
I codici principali di WordPress
Il grassetto
Il grassetto corsivo
Il codice per definire i paragrafi è questo.
Quando hai bisogno dell’interruzione di linea, ossia di mandare il testo a capo “forzandolo”, puoi usare il codice break line:
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.
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.
Un esempio di tag more? Basta chiedere.
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.
Il risultato è questo.
Un buon design è evidente. Un grande design è trasparente. Joe Sparano blockquote>
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.
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.
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”.
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ì.
Il risultato è questo.
Sì, anche gli indirizzi email possono essere trattati come link.
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.
Gli elenchi puntati possono essere anche numerati. In questo caso il codice è diverso: non è più ul ma ol.
Elenchi puntati dentro elenchi puntati
Si può fare! E si fa così.
Effetto barrato
L’effetto
barattobarrato si ottiene con questo codice: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.
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!