Formattazione (e ottimizzazione) dei TITOLI nei post #1

Questo è il primo di una serie di 4 post con cui vorrei provare a trattare la formattazione e l'ottimizzazione dei titoli dei post.

Per evitare confusioni tra il significato del termine “titolo” e del termine “TITLE” riferiti ad una pagina web, è necessario sin da subito definirne le differenze, soprattutto nel caso particolare dei blog:

1. Il titolo di un post e il tag <title> dello stesso sono due cose ben diverse
2. Il titolo viene scritto all’interno di un tag <H1>…</H1> ed è visibile all’inizio del post
3. Il TITLE viene scritto all’interno del tag <title>…</title> e non è visibile nel post ma solo nel nome delle scheda browser
4. Il titolo è scritto per i lettori “umani”, il TITLE per i motori di ricerca e altri servizi/applicazioni web
5. Spesso titolo e TITLE hanno lo stesso contenuto di testo pur rimanendo due righe di codice HTML tra loro separate con diverse funzionalità e significati.

Definiti questi 5 punti, possiamo iniziare con questo primo post:

Come formattare in modo diverso ogni singola parola del titolo di un post

Aggiornamento del 05/05/2014:
ATTENZIONE questa particolare formattazione funziona solo se non è stato modificato il tag <title> nel template. Si consiglia di considerare il contenuto di questo post solo a titolo informativo.

Il titolo di un post ricopre sempre più un enorme importanza:
perché non formattarlo adeguatamente in modo da dargli un aspetto più accattivante?
Con Blogger si può fare.
(In verità anche su WordPress.com è possibile formattare un titolo ma limitatamente all'utilizzo del grassetto e del corsivo.)

La formattazione dei titoli nei post di un blog è una cosa che normalmente si fa attraverso un po' di CSS all'interno del template; si decide la formattazione una volta e poi non ci si pensa più. In questo modo tutti i titoli avranno l'aspetto impostato; tutti i titoli e tutte le parole nei titoli inserite.
E se volessimo in un determinato titolo dare enfasi (formattare) SOLO una specifica parola?

Senza star lì a menarla troppo per le lunghe, guardate il titolo di questo post, non notate qualcosa di strano, di diverso? E si: c'è un'immagine iniziale, una parola in grassetto, una in corsivo, una di colore diverso e tre sottolineate; in più, il titolo è scritto su 3 righe diverse.
Come è stato possibile formattare il titolo in quel modo?
Semplice: HTML e CSS inline.

Ed ecco la bella notizia: 

all'interno del form reputato ad ospitare il titolo del post, oltre al semplice testo, si possono inserire anche specifici tag HTML. 

Non lo sapevate?

Questo ad esempio è quello che ho scritto all'interno del form del titolo:

<img border="0" src="https://www.blogger.com/img/blogger-logo-small.png" /><br /><b>Formattazione</b> (e <i>ottimizzazione</i>)&nbsp;<br>dei <u><span style="color: orange;"><b>TITOLI</b></span> nei post</u>


Ok, ok, non vi spaventate!
Potete farlo molto semplicemente anche voi senza conoscere per forza l'HTML.
Ecco come:

1. Scrivete l'ipotetico titolo all'interno del form adibito al contenuto del post
2. Fate tutte le formattazioni che vi servono usando i pulsanti dell'editor
3. Cliccate sul pulsante "HTML" e andate a copiare la porzione di codice che vi interessa
4. Incollate il codice all'interno del form adibito al titolo
5. Cliccate sul pulsante "Scrivi" per tornare alla modalità visuale

Praticamente la formattazione del titolo la fate attraverso i pulsanti dell'editor e dovete solo preoccuparvi di fare un copia/incolla del pezzo di codice che poi diventerà il vostro titolo.

Opportune verifiche "tecniche" che ho già fatto io e che voi potete tranquillamente risparmiarvi:

Su Blogger (ma anche nella stragrande maggioranza dei CMS per blog), il titolo di un post viene scritto all'interno di un tag di intestazione  e poi "specchiato" automaticamente all'interno del tag <title> che è il titolo della pagina web preso in considerazione dai motori di ricerca e da numerosi altri servizi come ad esempio i social network.
In pratica, il testo all'interno del tag di intestazione è quello visibile dai lettori, mentre quello presente nel tag <title> è utilizzato dai diversi servizi web e non è visibile se non leggendo il codice HTML.
(ricordiamo i 5 punti iniziali)

Normalmente il contenuto di questi due tag è identico.
Cosa succede però nel caso in cui formattiamo il titolo come abbiamo appena visto, ovvero inserendo non solo testo ma anche specifici tag HTML?

Niente paura, il tag <title> è "salvo" (contiene solo testo); pensa a tutto Blogger in automatico.
Ecco i due tag a confronto:

tag di intestazione
<h1 class='post-title entry-title'>
<img border="0" src="https://www.blogger.com/img/blogger-logo-small.png" /><br /><b>Formattazione</b> (e <i>ottimizzazione</i>)&nbsp;<br>dei <u><span style="color: orange;"><b>TITOLI</b></span> nei post</u>
</h1>

tag <title>
<title>Test commenti: Formattazione (e ottimizzazione)&nbsp;dei TITOLI nei post</title>

Come potete vedere, Blogger, nello specchiare i due contenuti, "ripulisce" il tag <title> lasciando solo puro testo.
Perfetto, così deve essere. Possiamo tranquillamente usare la nostra formattazione parola per parola dei titoli.

PS:
&nbsp; corrisponde al carattere "spazio", è quindi comunque testo puro.

---

Nel prossimo post vedremo come Blogger tratta i titoli dei post tenendo presente il dominio e come noi possiamo eventualmente decidere "la presentazione" del titolo che reputiamo migliore.

+MarcoCameriero