Un problema ricorrente quando si va a creare un header per un sito web è che, a meno che non si tratti di un layout e di grafiche piuttosto "standard", il font di default utilizzato per scrivere il titolo potrebbe essere troppo banale o comunque inadatto. La soluzione predefinita è chiaramente creare un'immagine per l'header che includa il titolo con il carattere che si vuole utilizzare, ma questo come sappiamo comporta lo svantaggio di rendere il testo "introvabile" ai motori di ricerca. Usare il tag "alt" per l'immagine non garantisce che venga trovata da google et similia. Quindi come fare? Io mi sono posto questa domanda da poco, e mi è venuta in mente una soluzione fantasiosa e funzionale curiosando qua e là.Useremo un'immagine per l'header che già contiene la scritta in se', però applicheremo anche questa regola allo style sheet :
codice : _____________________________________________
h1 { background: url(header.jpg) no-repeat;
height: 30px;
}
h1 span { position: absolute;
h1 span { position: absolute;
text-indent:-2500px;}
_____________________________________________________________
Così facendo la nostra immagine resterà al suo posto dentro il div dell'header
mentre il testo sarà spostato a -2500 pixel fuori dallo schermo essendo così invisibile agli occhi ma perfettamente rintracciabile dai motori di ricerca.
1 commento:
Un'altro metodo e' questo:
1. creare un div (in questo caso chiamato header) con dentro l'immagine di sfondo dell'header.
2. Inserire dentro il div "header" una frase (dentro il tag h1) che identifichi l'header, in questo caso "sito ufficiale di antonio mura".
3. Poi rendere invisibile la frase inserendo dentro il titolo (h1) un tag "span" dandogli la proprieta' "display:none;" che non rende visibile il tag "span" appunto.
Cosi' facendo il motore di ricerca vedra' che in questa pagina c'e' un h1 che potra' indicizzare, mentre nella pagina vedremo semplicemente una immagine "header.jpg".
SHPEON !
luca :)
Posta un commento