Správné obrázkové menu?

Ahoj dělám nový web a chtěl bych mít grafické menu, vím že podle SEO je lepší je mít menu textové, protože robot přečte text a ví co tam najde. Namísto obrázku má velký nečitelný blok.

Napadlo mě udělat textové menu a to překrýt obrázky jako je to v tomto článku: http://wellstyled.com/css-replace-text-by-image.html

Tak jsem to udělal a upravil podle mojí potřeby a vniklo z toho tohle:

#menu a{

 margin: 0px;

 padding: 0px;

 position: relative;

 width: 100px;

 height: 28px;

 margin: 0px;

 padding: 0px;

 overflow: hidden;

 display: block;

 float: left;

}



#menu a span{

 display: block;

 position: absolute;

 left: 0px;

 top: 0px;

 z-index: 1px;

 margin: 0px;

 padding: 0px;

 width: 100px;

 height: 28px;

 cursor: hand;

 background-position: 0px 0px;

}



#menu a:hover span{

 background-position: 0px -28px;

}



#menu a span.activ{

 background-position: 0px -56px !important;

}



#home       { background: url('img/menu/home.png')       ; }

#recenze    { background: url('img/menu/recenze.png')    ; }

#tapety     { background: url('img/menu/tapety.png')     ; }

#download   { background: url('img/menu/download.png')   ; }

#kino       { background: url('img/menu/kino.png')       ; }

#spoluprace { background: url('img/menu/spoluprace.png') ; }

#kontakt    { background: url('img/menu/kontakt.png')    ; }

#hledat     { background: url('img/menu/hledat.png')     ; }

A HTML vypadá takto:

<a href="?page=home" title="Home">Home<span id="home" ></span></a>

<a href="?page=recenze" title="Filmové recenze">Filmové recenze<span id="recenze" ></span></a>

<a href="?page=tapety" title="Tapety">Tapety<span id="tapety" ></span></a>

<a href="?page=download" title="Download">Download<span id="download" ></span></a>

<a href="?page=kino" title="Kino">Kino<span id="kino" ></span></a>

<a href="?page=spoluprace" title="Spoluprace">Spoluprace<span id="spoluprace" ></span></a>

<a href="?page=kontakt" title="Konkakt">Konkakt<span id="kontakt" ></span></a>

<a href="?page=hledat" title="Hledat">Hledat<span id="hledat" class="activ"></span></a></div>

Nebudou se na mě vyhledávače zlobit když takto překruji text menu obrázkem? Nebo si toho nevšimnou?

a nepoznají že jsem překryl text obrázkem?

fajne tak to je super to nemusím nic měnit :)