E anche se può sembrare un argomento superato nell’attuale scenario SEO, credo che sia sempre utile fare una ripassata delle principali regole sull’HTML Headings (anche fonte immagine). Ideale quando decidi di fare un po’ di manutenzione al tuo blog!

H1, unico e solo

Quanti titoli ha l’ultimo libro che hai comprato? Ovviamente uno, e questo vale anche per una pagina web: deve esserci solo un <h1> che, ovviamente, indica ai motori di ricerca e agli utenti l’elemento più importante del testo. Questa non è una regola assoluta perché lo stesso Matt Cutts suggerisce che non è un problema articolare una pagina con due <h1>, a patto che ci sia una reale necessità e che non esageri pensando che questo possa avere dei vantaggi in termini SEO.

Consequenzialità

La regola vuole che non si dovrebbero mescolare gli head che dovrebbero susseguirsi in ordine decrescente e coerente con le sei possibilità offerte. Ciò significa che non è consigliabile saltare un head intermedio e, ad esempio, passare direttamente dall’<h1> all’<h3>. Inutile sottolineare che in una pagina web l’<h1> deve essere il primo head.

Utilità

Un head è un titolo a tutti gli effetti e, in quanto tale, deve servire a descrivere senza tanti giri di parole il testo che introduce. Non farti prendere dalla smania di inserire keyword a go-go e pensa piuttosto al piacere che proveranno i lettori nel trovarsi di fronte un testo ben organizzato. Allo stesso modo, l’inserimento di head inutili in un testo può avere l’effetto opposto.

Formattazione

Sicuramente è giusto piegare la formattazione degli header ai caratteri estetici di un blog/sito con i Css ma non dimenticare mai di differenziare coerentemente i vari titoli. L’<h1> è l’head più importante della pagina e quindi deve avere un carattere maggiore, leggermente superiore all’<h2> e così via fino agli <h6>(lo dice anche il W3School: <h1> defines the largest heading and <h6> defines the smallest heading). E cerca di mantenere lo stesso font per tutti!

Controllo

Sei terrorizzato dall’idea di dover spulciare ogni angolo del tuo codice HTML per verificare gli header? Niente paura, ci sono diversi strumenti che ti possono aiutare: io preferisco Wave – Web Accessibility Evaluation Tool e la funzione XRay della classica SEO ToolBar per Firefox.

Extra tips: Header e HTML5

Novità sull’argomento heeader con l’arrivo dell’HTML5 (attualmente ancora in fase draft)? Sì, qualcosa si muove come nel caso del nuovo elemento <header> descritto dall’ottimo articolo di Extrowebsite. Da tenere sott’occhio!

Ciao! 5 semplici regole per ottimizzare gli header e' un post scritto da Riccardo Esposito, signore e padrone di My Social Web, che ti consiglia di dare uno sguardo anche alle Guide per Blogger.

Vuoi leggere ancora qualcosa?

• Come creare un’efficace firma HTMl per email
• Come utilizzare al meglio il target=”_blank”
• 10 layout non convenzionali

Quindi non vedo perchè non dovresti perdere cinque minuti del tuo prezioso tempo per creare una buona firma HTML per le tue email. Sono delle operazioni molto semplici che ti permettono di guadagnare punti agli occhi di chi ti conosce solo tramite rapporto epistolare!

Wisestamp

In giro per il web esistono tante soluzioni e template per organizzare una firma in HTML per email ma, a meno che tu non abbia intenzione di dedicarti a un servizio newsletter professionale, lo strumento che fa al caso tuo si chiama WiseStamp. Grazie a questo plugin Firefox puoi inserire facilmente in email gestite con Gmail ,Yahoo Mail, AOL e Hotmail tutti i tuoi link e profili social.

Un dettaglio non da poco: il collegamento con il feed del tuo blog (o quello di qualsiasi altra risorsa) per aggiornare puntualmente i link con i tuoi ultimi articoli. Unico problema: non appare se non ti trovi sul tuo computer con plugin installato e firma personale attivata.

Black Canvans Email Signature

Un altro plugin firefox molto utile per creare una firma HTML per Gmail è sicuramente Black Canvans. Tra le sue qualità ricordo la possibilità di usare immagini e link, gestire più firme per diversi indirizzi email e di vedere l’anteprima della tua creazione in una finestra parallera.

Giuste informazioni

Stai scrivendo una firma per email e non il tuo curriculum. Per questo è meglio evitare un numero eccessivo di informazioni riguardo alla tua esistenza. Basteranno il nome e cognome, specializzazione, compagnia per cui lavori, numero di telefono dell’ufficio e i link di approfondimento.

In casi straordinari puoi valutare la possibilità di inserire informazioni relative ad eventi speciali e/o iniziative che vuoi promuovere ma cerca di non approfittarne. Da evitare (almeno secondo il mio parere) eccessi di formattazione, caratteri particolari e soprannomi da naia.

Quanti link?

A tal proposito riprendo il paragrafo precedente e porto avanti la mia idea di una generale austerità dei collegamenti ipertestuali. Sì, è facile farsi prendere la mano quando puoi inserire link a iosa: “ok, il sito l’ho messo ma ora ci metto anche il blog. Twitter è il social network di quelli in gamba ma tutti ti seguono con le Facebook Fan Page… e poi se vogliono sapere i miei gusti musicali? Ce lo metto l’account Last.fm?”. Fai un buon esame delle tue risorse e valuta la possibilità di inserire massimo 2-3 link. Io, ad esempio, mi sono limitato ai miei due blog principali e al feed rss sempre aggiornato.

Attenzione alle immagini

Anche se uso WiseStamp che permette di inserire numerose immagini e icone social ho preferito non cadere nella tentazione (lo consiglia anche Seth Godin). Questo perchè non è remota la possibilità che le immagini vengano preventivamente bloccate dal client di posta elettronica, ognuno con un proprio settaggio.

E francamente non penso che i tuoi lettori si prendano lo scomodo di sbloccare le immagini solo per visualizzare un’icona Twitter o LinkedIn. Se proprio non ne puoi fare a meno cerca di ottimizzarle secondo quelli che sono i palastri dell’usabilità HTML (attributo alt, dimensioni, tag title).

Piccoli trucchi

Anche l’arte dell’email signature (non solo in HTML) ha i suoi bravi trucchi: inserire la firma anche nelle email automatiche, creare più di un modello da utilizzare in diverse occasioni, inserire un piccolo call to action e prendere sempre buoni spunti quando incontri qualcuno che ne sa più di te!

Fonte Immagine

Ciao! Come creare un’efficace firma HTMl per email e' un post scritto da Riccardo Esposito, signore e padrone di My Social Web, che ti consiglia di dare uno sguardo anche alle Guide per Blogger.

Vuoi leggere ancora qualcosa?

• Google ti suggerisce quando è il momento di aggiornare Wordpress
• Prima di mandare una email ricordati di…
• 5 semplici regole per ottimizzare gli header

Forse penserai che si tratta solo di un piccolo dettaglio, di un insignificante attributo che non toglie e non mette niente all’economia del tuo blog o sito. Beh… forse sono esagerato ma credo che anche questo elemento debba essere pianificato con attenzione.

Il target = “_blank” obbliga l’utente a compiere un’azione che non ha chiesto espressamente (aprire un link in un’altra finestra). Non tutti i lettori sono uguali e, come sostiene Search Engine Journal, qualcuno potrebbe non gradire questa imposizione.

Il galateo del web propone di inserire questo elemento solo quando si offrono informazioni supplementari non strettamente legate ai contenuti o documenti PDF che rallentano l’operato del browser, magari indicando vicino al link la natura e il peso del file.

Però è anche vero che il target=”_blank” può essere un buon modo per diminuire la frequenza di rimbalzo e trattenere gli utenti sulle pagine originali. Ma come limitare i danni ed evitare che si aprano mille, fastidiosissime, finestre per ogni link?

Semplicemente, a mio parere, evitando il target_”blank” al minimo indispensabile, e cioè inserendolo solo nei link che puntano alle risorse esterne. Da eliminare senza scrupoli nei link interni!

E tu come lo usi questo attributo?

Fonte Immagine

Ciao! Come utilizzare al meglio il target=”_blank” e' un post scritto da Riccardo Esposito, signore e padrone di My Social Web, che ti consiglia di dare uno sguardo anche alle Guide per Blogger.

Vuoi leggere ancora qualcosa?

• La lunga (e inesorabile) marcia di Google
• Serp e profili Google Plus: sempre più in alto…
• SEO, SMM e Copy: i migliori articoli della settimana [Sunday Morning]

In questa piccola guida firmata Sitepoint ho trovato alcuni degli espempi più assurdi di siti web che io abbia mai avuto modo di incontrare, e forse anche i più affascinanti, ma sfogliando questa sorta di corte dei miracoli è maturata una domanda nella mia testa…

Bio-Bak

The Back Of The Napkin

Kashiwa Sato

Sono veramente navigabili questi siti? Hanno una grafica spettacolare, dei parametri di navigazione innovativi e dei menu futuristici… ma in alcuni casi ho riscontrato notevoli difficoltà a muovermi tra le pagine.

Voi che ne pensate? Meglio l’innovatività del layout o la buona navigazione?

Fonte Immagine

Ciao! 10 layout non convenzionali e' un post scritto da Riccardo Esposito, signore e padrone di My Social Web, che ti consiglia di dare uno sguardo anche alle Guide per Blogger.

Vuoi leggere ancora qualcosa?

• 9 tool per creare wireframe
• Ecco il nuovo My Social Web!
• L’usabilità secondo My Social Web

È vero, però, che per portare avanti un blog che piace agli umani e ai motori di ricerca qualche conoscenza di HTML bisogna averla in tasca. Ho riassunto quelle fondamentali in 7 punti, e l’ho fatto in modo che possano essere d’aiuto sia ai principianti che ai più smaliziati utilizzatori del codice.  Bello, no?

Meta Tag

All’interno dell’<head>, la sezione che viene prima del <body> (non quello dell’immagine…), troviamo i Meta Tag, informazioni fondamentali affinchè il il sito venga correttamente indicizzato dai motori di ricerca. I più importanti:

• Tag Title – Uno dei principali fattori considerati da  Google in una query di ricerca. Inserite buone keyword e non superate i 60 caratteri, altrimenti uscirà troncato nella serp;

• Tag Description – Inutile ai fini dell’indicizzazione, può essere un fattore decisivo se il testo riesce a stimolare la curiosità dell’utente nelle 160 battute concesse (oltre viene tagliata);

• Tag Keyword – Anche queste sono ininfluenti ai fini dell’indicizzazione e in più non hanno alcuna visualizzazione nella serp: personalmente le inserisco sempre – non più di 10 – mantenendo una certa coerenza tra contenuto e keyword.

Header

Equivalente dei capitoli, paragrafi e sottoparagrafi di un libro, una buona semantizzazione degli Head aiuta a dare un’organizzazione a ciò che si scrive e suggerisce ai motori di ricerca gli elementi di maggiore importanza (e che quindi si preferisce indicizzare). Quindi <h1> comprenderà il titolo del post con le keyword che si vogliono spingere, <h2> quello di uno specchietto di approfondimento e così via fino ad <h6> se serve. Attenzione, mai mescolare l’ordine!

Formattazione

Ho già parlato in precedenza di quanto sia importante l’uso del neretto in un post. Per quanto riguarda gli altri comandi, l’unico consiglio è quello di utilizzarli per facilitare la lettura dei contenuti e senza esagerare: un testo troppo impacchettato risulta altrettanto ostico di uno assolutamente privo di formattazione. Solo un dettaglio: il W3c suggerisce di utilizzare <strong> e <em> piuttosto che <b> e  <i> per grassetto e corsivo. È vero che quasi nessun sito rispetta alla lettera le regole del W3c, ma è sempre meglio evitare un errore che farlo!

Piccoli dettagli

Perdiamo la vista a sfogliare virtualmente blog su blog per trovare un buon argomento, ci scervelliamo per scrivere contenuti interessanti e ci rompiamo le assa delle mani per scrivere in maniera fluida e discorsiva. E poi va a finire che ci dimentichiamo di curare le sfumature del codice che possono fare la differenza. Ecco quelle che non dobbiamo tralasciare:

• Title dei link - Attribuire ai collegamenti ipertestuali sempre un “title” esplicativo. Non tanto per una questione di indicizzazione ma per dare un buon suggerimento agli utenti che navigano nel nostro blog;

• Immagini SEO – Tutte le informazioni testuali che girano intorno alle immagini sono captate dai motori di ricerca (forse non come un qualsiasi contenuto ma lo sono).  Inserite il titolo dell’immagine, l’attributo “alt”, le didascalie con testi diversi e keyword che vi interessano, senza esagerare;

Infine, prima di pubblicare il post vi invito a dare sempre uno sguardo al codice  per scovare eventuali stringe inutili che appesantiscono la struttura. Questo soprattutto se fate un copia/incolla da un testo già formattato o utilizzate qualche applicazione in javascript.

Ciao! 7 regole HTML che ogni blogger dovrebbe seguire e' un post scritto da Riccardo Esposito, signore e padrone di My Social Web, che ti consiglia di dare uno sguardo anche alle Guide per Blogger.

Vuoi leggere ancora qualcosa?

• 5 semplici regole per ottimizzare gli header
• Come creare un’efficace firma HTMl per email
• Come utilizzare al meglio il target=”_blank”