Sostituire il testo H1 con un’immagine del logo: metodo migliore per SEO e accessibilità?

Sembra che ci siano alcune tecniche diverse là fuori, quindi speravo di ottenere una risposta “definitiva” su questo …

Su un sito web, è prassi comune creare un logo che rimandi alla homepage. Voglio fare lo stesso, ottimizzando al meglio i motori di ricerca, i lettori di schermo, IE 6+ e i browser che hanno disabilitato CSS e / o immagini.

Esempio 1: non usa un tag h1. Non è buono per SEO, giusto?

 

Esempio 2: trovato da qualche parte. Il CSS sembra un po ‘hacky.

 

Stack Overflow

 /* css */ #logo { padding: 70px 0 0 0; overflow: hidden; background-image: url("http://sofit.miximages.com/css/logo.png"); background-repeat: no-repeat; height: 0px !important; height /**/:70px; } 

Esempio tre: stesso codice HTML, approccio diverso usando il rientro del testo. Questo è l’approccio “Phark” alla sostituzione delle immagini.

 

Stack Overflow

 /* css */ #logo { background: transparent url("http://sofit.miximages.com/css/logo.png") no-repeat scroll 0% 0%; width: 250px; height: 70px; text-indent: -3333px; border: 0; margin: 0; } #logo a { display: block; width: 280px; /* larger than actual image? */ height: 120px; text-decoration: none; border: 0; } 

Esempio quattro: il metodo Leahy-Langridge-Jefferies . Visualizza quando le immagini e / o i css sono distriggersti.

 

Stack Overflow

 /* css */ h1.logo { margin-top: 15px; /* for this particular site, set this as you like */ position: relative; /* allows child element to be placed positioned wrt this one */ overflow:hidden; /* don't let content leak beyond the header - not needed as height of anchor will cover whole header */ padding: 0; /* needed to counter the reset/default styles */ } h1.logo a { position: absolute; /* defaults to top:0, left:0 and so these can be left out */ height: 0; /* hiding text, prevent it peaking out */ width: 100%; /* 686px; fill the parent element */ background-position: left top; background-repeat: no-repeat; } h1#logo { height: 60px; /* height of replacement image */ } h1#logo a { padding-top: 60px; /* height of the replacement image */ background-image: url("http://sofit.miximages.com/css/logo.png"); /* the replacement image */ } 

Quale metodo è il migliore per questo genere di cose? Si prega di fornire html e css nella risposta.